/*
 * Katalogseiten — Kategorie, Produkt, Warenkorb, Kasse, Konto.
 *
 * Nur dort geladen, wo sie gebraucht werden. Astras und WooCommerces
 * eigene Regeln bleiben bestehen; hier wird nur überschrieben, was die
 * Designsprache trägt.
 *
 * Durchgehend var(--sz-*): nur diese Token kippen unter
 * html[data-sz="dark"] mit.
 */

/* ===================================================================
   Kopf der Kategorieseite
   =================================================================== */

.sz-katalog__kopf {
    padding-block: clamp(2rem, 5vh, 4rem) 2.5rem;
    border-bottom: 1px solid var(--sz-border);
    margin-bottom: 2.5rem;
}

.sz-katalog__kicker {
    margin: 0 0 1rem;
    font-family: var(--sz-mono);
    font-size: 0.66rem;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: var(--sz-bordeaux-text);
}

.sz-katalog__titel {
    margin: 0;
    font-family: var(--sz-display);
    font-weight: 400;
    font-size: clamp(2.2rem, 6vw, 5rem);
    line-height: 0.94;
    letter-spacing: -0.04em;
}

.sz-katalog__text {
    margin-top: 1.25rem;
    max-width: 46ch;
    line-height: 1.7;
    color: var(--sz-ink-soft);
}

/* WooCommerce setzt eine eigene Überschrift — unsere steht schon da. */
.woocommerce-products-header__title,
.woocommerce-products-header { display: none; }

/* --- Filterreihen --------------------------------------------------- */

.sz-chips {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-top: 2rem;
}

.sz-chips__label {
    font-size: 0.62rem;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--sz-ink-soft);
    margin-right: 0.5rem;
}

.sz-chip {
    display: inline-flex;
    align-items: baseline;
    gap: 0.5rem;
    padding: 0.55rem 1rem;
    border: 1px solid var(--sz-border-strong);
    border-radius: var(--sz-radius);
    font-size: 0.85rem;
    color: var(--sz-ink);
    text-decoration: none;
    transition: background 200ms ease, border-color 200ms ease, color 200ms ease;
}

.sz-chip:hover { border-color: var(--sz-bordeaux); color: var(--sz-bordeaux-text); }

.sz-chip[aria-current] {
    background: var(--sz-bordeaux);
    border-color: var(--sz-bordeaux);
    color: var(--sz-bordeaux-fg);
}

.sz-chip__zahl { font-family: var(--sz-mono); font-size: 0.66rem; opacity: 0.65; }

.sz-katalog__zeile {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 2rem;
    font-family: var(--sz-mono);
    font-size: 0.7rem;
    letter-spacing: 0.12em;
    color: var(--sz-ink-soft);
}

.sz-katalog__zeile .woocommerce-result-count { margin: 0; }
.sz-katalog__zeile select { font-family: var(--sz-body); font-size: 0.85rem; }

/* ===================================================================
   Das Produktraster
   =================================================================== */

/*
 * Frueher ein Gitter aus geteilten Haarlinien ohne Abstand. Auf dem
 * Schirm las sich das als Tabelle. Jetzt echte Kacheln: eigene Flaeche,
 * bordeauxfarbene Kante links, Erhebung — wie in der Vorlage.
 */
.woocommerce ul.products,
ul.products {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
    margin: 0 0 3rem;
    padding: 0;
    list-style: none;
}

/* Die Stufen des Entwurfs: zwei, ab 640px drei, ab 1024px vier. */
@media (min-width: 640px)  { .woocommerce ul.products, ul.products { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .woocommerce ul.products, ul.products { grid-template-columns: repeat(4, 1fr); } }

/* WooCommerce setzt Breiten und Abstaende je Spalte — im Raster stoert
   das nur, deshalb ausdruecklich zurueck. */
.woocommerce ul.products li.product,
ul.products li.product {
    width: auto !important;
    float: none !important;
    margin: 0 !important;
    padding: 0;
    background: transparent;
    border: 0;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

/*
 * Kein eigenes content-product.php.
 *
 * WooCommerces Kachel ruft woocommerce_after_shop_loop_item_title auf —
 * genau dort ersetzt B2BKing die Preise. Eine eigene Vorlage wuerde den
 * Haken ueberspringen; der Preis verschwaende still oder waere falsch.
 * Deshalb bleibt die Auszeichnung von WooCommerce, und die Gestaltung
 * passiert hier.
 */

/* Dasselbe Bordeaux-Licht wie auf der Startseite. */
.woocommerce ul.products li.product::before,
ul.products li.product::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background: radial-gradient(circle at 50% 100%, var(--sz-bordeaux-soft), transparent 70%);
    opacity: 0;
    transform: translateY(30%);
    transition: opacity 700ms ease, transform 700ms cubic-bezier(0.22, 1, 0.36, 1);
}

.woocommerce ul.products li.product:hover::before,
.woocommerce ul.products li.product:focus-within::before { opacity: 1; transform: translateY(0); }

/* Kein Anheben: der Entwurf vergroessert beim Zeigen das Bild in seinem
   Kasten. Das steht weiter unten bei .sz-kachel__bild. */

.woocommerce ul.products li.product > * { position: relative; z-index: 1; }

/* Der Verweis, der Bild und Titel traegt. */
.woocommerce ul.products li.product a.woocommerce-LoopProduct-link {
    display: flex;
    flex-direction: column;
    flex: 1;
    text-decoration: none;
    color: inherit;
}

/* Quadratisches Bildfeld: sonst fluchten die Zeilen nicht, weil die
   Produktfotos unterschiedlich hoch sind. */
.woocommerce ul.products li.product a img,
ul.products li.product a img {
    aspect-ratio: 1;
    object-fit: contain;
    width: 100%;
    height: auto;
    margin: 0 0 1.25rem !important;
    padding: 1.25rem;
    background: var(--sz-muted);
    box-sizing: border-box;
    mix-blend-mode: multiply;
}

html[data-sz="dark"] .woocommerce ul.products li.product a img { mix-blend-mode: normal; }

.woocommerce ul.products li.product .woocommerce-loop-product__title {
    font-family: var(--sz-display);
    font-weight: 400;
    font-size: 1.15rem !important;
    line-height: 1.15;
    padding: 0 !important;
    margin: 0 0 0.6rem !important;
    hyphens: auto;
    overflow-wrap: break-word;
    color: var(--sz-ink);
}

/* Die Kategorie ueber dem Namen, so wie im Entwurf die Marke. */
.woocommerce ul.products li.product .woocommerce-loop-category__title {
    font-family: var(--sz-display);
    font-weight: 400;
    font-size: 1.15rem !important;
}

.woocommerce ul.products li.product .price {
    font-family: var(--sz-mono);
    font-size: 1rem !important;
    color: var(--sz-ink) !important;
    margin: 0 0 0.5rem !important;
    display: block;
}

.woocommerce ul.products li.product .price del { opacity: 0.5; margin-right: 0.4rem; }
.woocommerce ul.products li.product .price ins { text-decoration: none; color: var(--sz-bordeaux-text); }

/* B2BKings Hinweis anstelle des Preises — er soll wie ein Hinweis
   aussehen, nicht wie ein Preis. */
.woocommerce ul.products li.product .b2bking_hidden_price_message,
.woocommerce ul.products li.product .price .b2bking_login_message {
    font-family: var(--sz-mono);
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    color: var(--sz-bordeaux-text);
}

/* Der Warenkorb-Knopf unten. */
.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product .added_to_cart {
    margin-top: auto !important;
    display: block;
    width: 100%;
    text-align: center;
    padding: 0.75rem 1rem !important;
    border-radius: var(--sz-radius) !important;
    background: var(--sz-bordeaux) !important;
    color: var(--sz-bordeaux-fg) !important;
    font-family: var(--sz-body);
    font-size: 0.8rem !important;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-decoration: none;
}

.woocommerce ul.products li.product .added_to_cart {
    background: transparent !important;
    color: var(--sz-bordeaux-text) !important;
    border: 1px solid var(--sz-border-strong);
    margin-top: 0.5rem !important;
}

.woocommerce ul.products li.product .onsale {
    position: absolute;
    top: 1rem;
    right: 1rem;
    z-index: 2;
    background: var(--sz-bordeaux);
    color: var(--sz-bordeaux-fg);
    font-family: var(--sz-mono);
    font-size: 0.6rem;
    letter-spacing: 0.16em;
    padding: 0.3rem 0.6rem;
    border-radius: var(--sz-radius);
    min-height: 0;
    min-width: 0;
    line-height: 1.4;
}

/* ===================================================================
   Blätterung
   =================================================================== */

.woocommerce nav.woocommerce-pagination ul {
    border: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    justify-content: center;
}

.woocommerce nav.woocommerce-pagination ul li { border: 0; margin: 0; }

.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
    font-family: var(--sz-mono);
    font-size: 0.75rem;
    padding: 0.6rem 0.9rem;
    border: 1px solid var(--sz-border-strong);
    border-radius: var(--sz-radius);
    color: var(--sz-ink);
}

.woocommerce nav.woocommerce-pagination ul li span.current {
    background: var(--sz-bordeaux);
    border-color: var(--sz-bordeaux);
    color: var(--sz-bordeaux-fg);
}

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

.single-product div.product { padding-block: clamp(2rem, 5vh, 3.5rem); }

/*
 * Der Weg kann drei Zeilen lang werden. In Versalien und weit gesperrt
 * wird daraus ein Block, der lauter ist als der Produktname darunter —
 * deshalb klein, eng und ohne Grossbuchstaben.
 */
.woocommerce-breadcrumb {
    font-family: var(--sz-mono);
    font-size: 0.68rem;
    letter-spacing: 0.02em;
    text-transform: none;
    line-height: 1.6;
    color: var(--sz-ink-soft) !important;
    margin-bottom: 1.75rem !important;
}

.woocommerce-breadcrumb a { color: var(--sz-ink-soft); }
.woocommerce-breadcrumb a:hover { color: var(--sz-bordeaux-text); }

.single-product div.product .product_title {
    font-family: var(--sz-display);
    font-weight: 400;
    font-size: clamp(1.9rem, 4.4vw, 3.4rem);
    line-height: 1.02;
    letter-spacing: -0.03em;
    margin-bottom: 0.75rem;
}

.single-product div.product .price {
    font-family: var(--sz-mono);
    font-size: 1.9rem !important;
    color: var(--sz-ink) !important;
    margin-bottom: 1.25rem;
}

.single-product div.product .price del { opacity: 0.5; font-size: 1.1rem; }
.single-product div.product .price ins { text-decoration: none; color: var(--sz-bordeaux-text); }

.single-product div.product .woocommerce-product-details__short-description {
    line-height: 1.7;
    color: var(--sz-ink-soft);
    margin-bottom: 1.5rem;
}

/*
 * Traegt jetzt die Artikelnummer allein. Sie wechselt mit dem gewaehlten
 * Gebinde — deshalb ist sie die richtige, nicht die des Elternprodukts.
 */
.single-product .product_meta {
    font-family: var(--sz-mono);
    font-size: 0.7rem;
    letter-spacing: 0.1em;
    color: var(--sz-ink-soft);
    border-top: 1px solid var(--sz-border);
    padding-top: 1.25rem;
    margin-top: 1.5rem;
}

.single-product div.product form.cart .button {
    padding: 1rem 2rem !important;
    border-radius: var(--sz-radius) !important;
    background: var(--sz-bordeaux) !important;
    color: var(--sz-bordeaux-fg) !important;
    font-weight: 600;
}

/* Das Bildfeld der Produktseite bekommt denselben ruhigen Grund wie die
   Kacheln — ohne ihn steht ein Platzhalter nackt auf Weiss. */
.single-product div.product .woocommerce-product-gallery__image {
    background: var(--sz-muted);
}

/* --- B2BKing ------------------------------------------------------
   Die Staffelpreise sind der wichtigste Teil dieser Seite. Sie kommen
   vom Plugin; hier bekommen sie nur die Hausschrift. */

.b2bking_pricing_table,
table.b2bking_bulk_table {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--sz-mono);
    font-size: 0.85rem;
    margin-block: 1.5rem;
}

.b2bking_pricing_table th,
.b2bking_pricing_table td,
table.b2bking_bulk_table th,
table.b2bking_bulk_table td {
    border: 1px solid var(--sz-border);
    padding: 0.7rem 1rem;
    text-align: left;
}

.b2bking_pricing_table th,
table.b2bking_bulk_table th {
    font-size: 0.62rem;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--sz-ink-soft);
    font-weight: 400;
    background: var(--sz-muted);
}

/* ===================================================================
   Ähnliche Produkte
   =================================================================== */

.related.products > h2,
.up-sells > h2,
.cross-sells > h2 {
    font-family: var(--sz-display);
    font-weight: 400;
    font-size: clamp(1.5rem, 3vw, 2.2rem);
    letter-spacing: -0.02em;
    margin-bottom: 1.5rem;
}

@media (prefers-reduced-motion: reduce) {
    .sz-kachel::before { opacity: 1; transform: none; transition: none; }
    .sz-chip { transition: none; }
}

/* ===================================================================
   Produktseite — die eingehängten Teile
   =================================================================== */

.sz-produkt__marke {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 0.75rem;
    font-family: var(--sz-mono);
    font-size: 0.66rem;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--sz-bordeaux-text);
}

.sz-produkt__termin {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin: 1.25rem 0;
    padding: 0.9rem 1.1rem;
    border: 1px solid var(--sz-border);
    border-radius: var(--sz-radius);
    background: var(--sz-muted);
    font-size: 0.85rem;
    color: var(--sz-ink);
}

.sz-produkt__termin svg { flex-shrink: 0; color: var(--sz-bordeaux-text); }

/* Mengenwähler und Warenkorb nebeneinander, wie im Entwurf. */
.single-product div.product form.cart {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 0.75rem;
    margin-top: 1.5rem;
}

.single-product div.product form.cart .quantity input[type="number"] {
    height: 100%;
    min-height: 3.1rem;
    padding: 0 0.75rem;
    border: 1px solid var(--sz-border-strong);
    border-radius: var(--sz-radius);
    background: var(--sz-surface);
    color: var(--sz-ink);
    font-family: var(--sz-mono);
    font-size: 1rem;
    text-align: center;
}

.single-product div.product form.cart .button {
    flex: 1;
    min-width: 12rem;
    min-height: 3.1rem;
}

/* Die Bildergalerie: ruhiger Grund, damit ein Platzhalter nicht nackt
   auf Weiß steht — und die Vorschaubilder als Hairline-Reihe. */
.single-product .woocommerce-product-gallery__image img { mix-blend-mode: multiply; }
html[data-sz="dark"] .single-product .woocommerce-product-gallery__image img { mix-blend-mode: normal; }

.single-product .flex-control-thumbs { gap: 0.5rem; display: flex; margin-top: 0.5rem !important; }
.single-product .flex-control-thumbs li { width: auto !important; flex: 1; margin: 0 !important; }

.single-product .flex-control-thumbs img {
    border: 1px solid var(--sz-border);
    background: var(--sz-muted);
    opacity: 1;
}

.single-product .flex-control-thumbs img.flex-active { border-color: var(--sz-bordeaux); }

/* Die Reiter unter dem Produkt in der Hausschrift. */
.woocommerce-tabs ul.tabs li a {
    font-family: var(--sz-mono) !important;
    font-size: 0.7rem !important;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

/* ===================================================================
   Warenkorb
   =================================================================== */

.woocommerce-cart .entry-title,
.woocommerce-cart .page-title {
    font-family: var(--sz-display);
    font-weight: 400;
    font-size: clamp(2.4rem, 6vw, 5rem);
    line-height: 0.94;
    letter-spacing: -0.04em;
    margin-bottom: 2rem;
}

/* Die Summenkarte rechts. */
.woocommerce-cart .cart_totals,
.wc-block-cart__sidebar {
    background: var(--sz-surface);
    border: 1px solid var(--sz-border-strong);
    border-radius: var(--sz-radius);
    padding: 1.75rem;
}

.woocommerce-cart .cart_totals h2,
.wc-block-cart__totals-title {
    font-family: var(--sz-display) !important;
    font-weight: 400 !important;
    font-size: 1.5rem !important;
    letter-spacing: -0.01em;
    text-transform: none !important;
    margin-bottom: 1.25rem;
}

.woocommerce-cart .cart_totals table,
.woocommerce-cart .cart_totals th,
.woocommerce-cart .cart_totals td { border: 0 !important; }

.woocommerce-cart .cart_totals .order-total td,
.wc-block-components-totals-footer-item {
    font-family: var(--sz-mono);
    font-size: 1.35rem;
}

/* ===================================================================
   Wunschtermin
   =================================================================== */

.sz-termin {
    margin-top: 3rem;
    padding: 2rem 1.5rem 2.25rem;
    background: var(--sz-surface);
    border: 1px solid var(--sz-border-strong);
    border-radius: var(--sz-radius);
}

@media (min-width: 768px) { .sz-termin { padding: 2.5rem 2.5rem 2.75rem; } }

.sz-termin__kopf {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
}

.sz-termin__titel {
    margin: 0;
    font-family: var(--sz-display);
    font-weight: 400;
    font-size: clamp(1.5rem, 3.2vw, 2.2rem);
    letter-spacing: -0.02em;
}

.sz-termin__merk {
    font-size: 0.66rem;
    letter-spacing: 0.2em;
    color: var(--sz-ink-soft);
}

.sz-termin__lead {
    margin: 0.9rem 0 0;
    max-width: 62ch;
    line-height: 1.7;
    color: var(--sz-ink-soft);
}

/* --- Die Tageskacheln ---------------------------------------------
   Waagrecht scrollbar statt umgebrochen: zwölf Tage in zwei Reihen
   lesen sich wie eine Tabelle, in einer Reihe wie ein Kalender. */

.sz-termin__tage {
    display: flex;
    gap: 0.6rem;
    margin-top: 1.75rem;
    overflow-x: auto;
    padding-bottom: 0.5rem;
    scrollbar-width: thin;
}

.sz-tag {
    flex: 0 0 auto;
    box-sizing: border-box;
    min-width: 5.5rem;
    padding: 0.85rem 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    text-align: left;
    border: 1px solid var(--sz-border-strong);
    border-radius: var(--sz-radius);
    background: var(--sz-bg);
    color: var(--sz-ink);
    cursor: pointer;
    line-height: 1.2;
    min-height: 0;
    transition: border-color 200ms ease, background 200ms ease;
}

.sz-tag:hover:not(:disabled) { border-color: var(--sz-bordeaux); background: var(--sz-bg); }

.sz-tag[aria-pressed="true"] {
    border-color: var(--sz-bordeaux);
    background: var(--sz-bordeaux-soft);
}

/* Geschlossene Tage bleiben sichtbar, aber deutlich zurückgenommen —
   wer den Montag gar nicht fände, hielte es für einen Fehler. */
.sz-tag.ist-zu {
    opacity: 0.45;
    cursor: not-allowed;
    background: var(--sz-muted);
}

.sz-tag__wtag { font-size: 0.6rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--sz-ink-soft); }
.sz-tag__datum { font-size: 1.05rem; letter-spacing: 0.02em; }
.sz-tag__frei { font-size: 0.62rem; color: var(--sz-ink-soft); }

.sz-tag[aria-pressed="true"] .sz-tag__frei { color: var(--sz-bordeaux-text); }

/* --- Zeitfenster --------------------------------------------------- */

.sz-termin__label {
    margin: 1.75rem 0 0.75rem;
    font-size: 0.62rem;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--sz-ink-soft);
}

.sz-termin__fenster { display: flex; flex-wrap: wrap; gap: 0.5rem; }

.sz-fenster {
    box-sizing: border-box;
    padding: 0.6rem 1.2rem;
    min-height: 0;
    min-width: 0;
    border: 1px solid var(--sz-border-strong);
    border-radius: 999px;
    background: var(--sz-bg);
    color: var(--sz-ink);
    font-family: var(--sz-mono);
    font-size: 0.78rem;
    cursor: pointer;
    line-height: 1.4;
    transition: border-color 200ms ease, background 200ms ease, color 200ms ease;
}

.sz-fenster:hover { border-color: var(--sz-bordeaux); }

.sz-fenster[aria-pressed="true"] {
    background: var(--sz-bordeaux);
    border-color: var(--sz-bordeaux);
    color: var(--sz-bordeaux-fg);
}

/* --- Das Ergebnis --------------------------------------------------- */

.sz-termin__ergebnis {
    margin: 1.75rem 0 0;
    padding-left: 0.9rem;
    border-left: 2px solid var(--sz-bordeaux);
    font-family: var(--sz-display);
    font-size: 1.1rem;
}

.sz-termin__fein {
    margin: 0.75rem 0 0;
    font-size: 0.72rem;
    color: var(--sz-ink-soft);
}

/* --- In der Kasse ---------------------------------------------------- */

.sz-termin__kasse {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.6rem;
    margin: 1.25rem 0;
    padding: 0.9rem 1.1rem;
    border-left: 2px solid var(--sz-bordeaux);
    background: var(--sz-muted);
}

.sz-termin__kasse .sz-termin__label { margin: 0; flex-basis: 100%; }
.sz-termin__kasse strong { font-family: var(--sz-display); font-weight: 400; font-size: 1.05rem; }
.sz-termin__kasse .ist-fehlend { color: var(--sz-bordeaux-text); }
.sz-termin__kasse a { font-size: 0.8rem; color: var(--sz-bordeaux-text); }

@media (prefers-reduced-motion: reduce) {
    .sz-tag, .sz-fenster { transition: none; }
}

/* ===================================================================
   Kasse
   ===================================================================

   Deckt die Block- UND die klassische Fassung ab. WooCommerce Blocks
   bringt schwebende Feldbeschriftungen mit — die lassen sich nicht in
   Versalien über dem Feld verwandeln, ohne die Mechanik zu brechen.
   Typografie, Farben, Bestellkarte und Knöpfe treffen den Entwurf; die
   Felder bleiben Blocks eigene.
*/

/* Astras Seitentitel entfällt — wir setzen einen eigenen. */
.woocommerce-checkout .entry-title,
.woocommerce-checkout .page-title { display: none; }

.sz-kasse__kopf { padding-block: clamp(1.5rem, 4vh, 3rem) 2rem; }

.sz-kasse__titel {
    margin: 1.5rem 0 0;
    font-family: var(--sz-display);
    font-weight: 400;
    font-size: clamp(2.4rem, 6vw, 5rem);
    line-height: 0.94;
    letter-spacing: -0.04em;
}

/* --- Die drei Schritte ---------------------------------------------
   Nicht klickbar: sie zeigen, wo man steht, sie sind kein Menü. */

.sz-schritte-leiste {
    list-style: none;
    margin: 2.25rem 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr;
    border: 1px solid var(--sz-border);
}

@media (min-width: 768px) { .sz-schritte-leiste { grid-template-columns: repeat(3, 1fr); } }

.sz-schritt-feld {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--sz-border);
    font-size: 0.9rem;
    color: var(--sz-ink-soft);
}

@media (min-width: 768px) {
    .sz-schritt-feld { border-bottom: 0; border-right: 1px solid var(--sz-border); }
    .sz-schritt-feld:last-child { border-right: 0; }
}

.sz-schritt-feld__zeichen {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.6rem;
    height: 1.6rem;
    flex-shrink: 0;
    border: 1px solid currentColor;
    border-radius: 50%;
    font-size: 0.62rem;
}

.sz-schritt-feld.ist-fertig { color: var(--sz-bordeaux-text); }
.sz-schritt-feld.ist-fertig .sz-schritt-feld__zeichen { background: var(--sz-bordeaux); border-color: var(--sz-bordeaux); color: var(--sz-bordeaux-fg); }
.sz-schritt-feld.ist-jetzt { color: var(--sz-ink); }
.sz-schritt-feld.ist-jetzt .sz-schritt-feld__zeichen { color: var(--sz-bordeaux); border-color: var(--sz-bordeaux); }
.sz-schritt-feld.ist-offen { opacity: 0.55; }

/* --- Abschnittsüberschriften --------------------------------------- */

/*
 * Nur die Abschnittsueberschriften. Die erste Fassung traf ueber
 * .wc-block-components-title auch die Produktnamen in der
 * Bestelluebersicht — die standen dann in 1,6rem Serifenschrift und
 * brachen mitten im Wort um.
 */
.woocommerce-checkout h3,
.woocommerce-checkout .wc-block-components-checkout-step__title,
.woocommerce-checkout .wc-block-components-totals-wrapper > .wc-block-components-title {
    font-family: var(--sz-display) !important;
    font-weight: 400 !important;
    font-size: 1.6rem !important;
    letter-spacing: -0.02em;
    text-transform: none !important;
    color: var(--sz-ink) !important;
}

/* Blocks nummeriert die Schritte selbst — das macht schon unsere Leiste. */
.wc-block-components-checkout-step__heading-content,
.wc-block-components-checkout-step__number { display: none !important; }

/* --- Die Bestellkarte rechts ---------------------------------------- */

.wc-block-checkout__sidebar,
.woocommerce-checkout #order_review {
    background: var(--sz-muted);
    border: 1px solid var(--sz-border);
    border-radius: var(--sz-radius);
    padding: 1.75rem;
}

.wc-block-components-totals-item,
.woocommerce-checkout #order_review .cart-subtotal,
.woocommerce-checkout #order_review .shipping {
    font-family: var(--sz-mono);
    font-size: 0.85rem;
}

.wc-block-components-totals-footer-item,
.woocommerce-checkout #order_review .order-total {
    font-family: var(--sz-mono) !important;
    font-size: 1.4rem !important;
    border-top: 1px solid var(--sz-border-strong);
    padding-top: 0.9rem;
    margin-top: 0.9rem;
}

.woocommerce-checkout #order_review table,
.woocommerce-checkout #order_review th,
.woocommerce-checkout #order_review td { border: 0 !important; }

/* --- Knöpfe ---------------------------------------------------------- */

.wc-block-components-checkout-place-order-button,
.woocommerce-checkout #place_order {
    width: 100%;
    padding: 1.1rem 1.5rem !important;
    border-radius: var(--sz-radius) !important;
    background: var(--sz-bordeaux) !important;
    color: var(--sz-bordeaux-fg) !important;
    font-family: var(--sz-body) !important;
    font-size: 0.95rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.02em;
}

/* --- Zahlarten als Zeilen, wie im Entwurf ---------------------------- */

/*
 * Links MUSS Platz fuer den Knopf bleiben: Blocks setzt ihn absolut, und
 * ein zu kleiner Innenabstand schiebt den Text darunter. Genau das war in
 * der ersten Fassung zu sehen — "chpustertal Kostenlos".
 */
.wc-block-components-radio-control__option,
.woocommerce-checkout .wc_payment_method label {
    border: 1px solid var(--sz-border-strong);
    border-radius: var(--sz-radius);
    padding: 1rem 1.15rem 1rem 2.9rem !important;
    margin-bottom: 0.6rem;
    background: var(--sz-bg);
}

/*
 * Die Auswahl bekommt KEINE Flaeche, nur eine kraeftigere Kante und einen
 * Bordeaux-Balken links. Eine eingefaerbte Flaeche zieht mehr
 * Aufmerksamkeit auf sich als der Bestellknopf — und die Versandart ist
 * nicht das Wichtigste auf dieser Seite.
 */
.wc-block-components-radio-control__option--checked,
.woocommerce-checkout .wc_payment_method input:checked + label,
.woocommerce-checkout li.wc_payment_method:has(input:checked) label {
    border-color: var(--sz-bordeaux);
    box-shadow: inset 3px 0 0 0 var(--sz-bordeaux);
    background: var(--sz-bg);
}

/* Produktnamen in der Bestelluebersicht bleiben Fliesßtext. */
.wc-block-components-order-summary-item__description .wc-block-components-product-name {
    font-family: var(--sz-body) !important;
    font-size: 0.95rem !important;
    line-height: 1.35;
    overflow-wrap: break-word;
    hyphens: auto;
}

.woocommerce-checkout ul.wc_payment_methods { list-style: none; padding: 0; border: 0 !important; }
.woocommerce-checkout ul.wc_payment_methods li { margin: 0; }

/* --- Felder ---------------------------------------------------------- */

.woocommerce-checkout .form-row label {
    font-family: var(--sz-mono);
    font-size: 0.62rem;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--sz-ink-soft);
    margin-bottom: 0.5rem;
    display: block;
}

.woocommerce-checkout .form-row input[type="text"],
.woocommerce-checkout .form-row input[type="email"],
.woocommerce-checkout .form-row input[type="tel"],
.woocommerce-checkout .form-row textarea,
.wc-block-components-text-input input {
    border: 1px solid var(--sz-border-strong) !important;
    border-radius: var(--sz-radius) !important;
    background: var(--sz-surface) !important;
    color: var(--sz-ink) !important;
    padding: 0.9rem 1rem !important;
    font-size: 0.95rem;
}

.wc-block-components-text-input input:focus,
.woocommerce-checkout .form-row input:focus {
    border-color: var(--sz-bordeaux) !important;
    box-shadow: none !important;
    outline: none;
}


/* ===================================================================
   Klassische Kasse
   =================================================================== */

.woocommerce-checkout form.checkout {
    display: grid;
    gap: 2.5rem;
    align-items: start;
}

@media (min-width: 1024px) {
    .woocommerce-checkout form.checkout { grid-template-columns: 1.35fr 0.65fr; column-gap: 3rem; }
    .woocommerce-checkout form.checkout #customer_details { grid-column: 1; }
    .woocommerce-checkout form.checkout #order_review_heading,
    .woocommerce-checkout form.checkout #order_review { grid-column: 2; }
}

/* Die Adressspalten stehen untereinander, nicht nebeneinander: zwei
   halbe Spalten in einer schon halben Spalte werden zu Schnipseln. */
.woocommerce-checkout #customer_details .col-1,
.woocommerce-checkout #customer_details .col-2 { width: 100%; float: none; }

.woocommerce-checkout #order_review_heading {
    font-family: var(--sz-display);
    font-weight: 400;
    font-size: 1.6rem;
    letter-spacing: -0.02em;
    margin: 0 0 1rem;
}

.woocommerce-checkout #order_review {
    position: sticky;
    top: calc(var(--sz-kopf-oben) + var(--sz-kopf-klein) + 1.5rem);
}

.woocommerce-checkout #order_review .shop_table {
    font-family: var(--sz-mono);
    font-size: 0.85rem;
}

.woocommerce-checkout #order_review .product-name { font-family: var(--sz-body); }

.woocommerce-checkout #place_order {
    margin-top: 1.25rem;
    float: none;
}

/* Zahlung steht jetzt links unter der Adresse — die Kastenoptik der
   Bestellkarte braucht sie dort nicht. */
.woocommerce-checkout #payment {
    background: transparent !important;
    border-radius: 0;
    margin-top: 2rem;
}

.woocommerce-checkout #payment .payment_box {
    background: var(--sz-muted) !important;
    border-radius: var(--sz-radius);
    font-size: 0.85rem;
    color: var(--sz-ink-soft);
}

.woocommerce-checkout #payment .payment_box::before { display: none !important; }

.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper {
    font-size: 0.85rem;
    color: var(--sz-ink-soft);
    margin-top: 1.5rem;
}

/* ===================================================================
   Schnellerfassung
   =================================================================== */

.sz-erfassung { margin-block: 2rem 4rem; }

.sz-erfassung__wege {
    display: inline-flex;
    gap: 0;
    padding: 0.25rem;
    border: 1px solid var(--sz-border-strong);
    border-radius: 999px;
    margin-bottom: 2.5rem;
}

.sz-erfassung__weg {
    box-sizing: border-box;
    padding: 0.55rem 1.5rem !important;
    min-width: 0;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--sz-ink-soft);
    font-size: 0.9rem;
    cursor: pointer;
    line-height: 1.4;
}

.sz-erfassung__weg[aria-selected="true"] {
    background: var(--sz-bordeaux);
    color: var(--sz-bordeaux-fg);
}

/* --- Die Tabelle ---------------------------------------------------- */

.sz-erfassung__tabelle {
    width: 100%;
    border-collapse: collapse;
}

.sz-erfassung__tabelle th {
    text-align: left;
    font-family: var(--sz-mono);
    font-size: 0.6rem;
    font-weight: 400;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--sz-ink-soft);
    padding: 0 0.75rem 0.75rem;
    border-bottom: 1px solid var(--sz-border-strong);
}

.sz-erfassung__tabelle td {
    padding: 0.9rem 0.75rem;
    border-bottom: 1px solid var(--sz-border);
    vertical-align: middle;
}

.sz-erfassung__nummer {
    width: 100%;
    max-width: 12rem;
    padding: 0.6rem 0.8rem;
    border: 1px solid var(--sz-border-strong);
    border-radius: var(--sz-radius);
    background: var(--sz-surface);
    color: var(--sz-ink);
    font-family: var(--sz-mono);
    font-size: 0.85rem;
}

.sz-erfassung__nummer:focus { border-color: var(--sz-bordeaux); outline: none; }

.sz-erfassung__artikel em { color: var(--sz-ink-soft); font-size: 0.85rem; }
.sz-erfassung__marke { display: block; font-size: 0.58rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--sz-bordeaux-text); }
.sz-erfassung__name { display: block; font-family: var(--sz-display); font-size: 1.05rem; line-height: 1.2; }
.sz-erfassung__fehler { color: var(--sz-bordeaux-text); font-size: 0.85rem; }
.sz-erfassung__bestand,
.sz-erfassung__zeilensumme { font-size: 0.85rem; white-space: nowrap; }

/* Mengenwähler */
.sz-menge { display: inline-flex; align-items: stretch; border: 1px solid var(--sz-border-strong); border-radius: 999px; overflow: hidden; }

.sz-menge button {
    box-sizing: border-box;
    width: 2rem;
    padding: 0 !important;
    min-width: 0;
    border: 0;
    background: transparent;
    color: var(--sz-ink);
    cursor: pointer;
    line-height: 1;
}

.sz-menge input {
    width: 2.75rem;
    border: 0;
    background: transparent;
    text-align: center;
    font-family: var(--sz-mono);
    font-size: 0.85rem;
    color: var(--sz-ink);
    -moz-appearance: textfield;
}

.sz-menge input::-webkit-outer-spin-button,
.sz-menge input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.sz-erfassung__weg-knopf {
    box-sizing: border-box;
    width: 1.9rem;
    height: 1.9rem;
    padding: 0 !important;
    min-width: 0;
    border: 0;
    background: transparent;
    color: var(--sz-ink-soft);
    cursor: pointer;
    font-size: 1.1rem;
    line-height: 1;
}

.sz-erfassung__weg-knopf:hover { color: var(--sz-bordeaux-text); background: transparent; }

/* --- Fuß der Erfassung ---------------------------------------------- */

.sz-erfassung__fuss {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    margin-top: 1.75rem;
}

.sz-erfassung__hilfe { margin: 0; font-size: 0.8rem; color: var(--sz-ink-soft); max-width: 42ch; }

.sz-erfassung__summe { display: flex; align-items: center; gap: 1rem; }
.sz-erfassung__summe > .mono { font-size: 0.66rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--sz-ink-soft); }
.sz-erfassung__summe strong { font-size: 1.5rem; font-weight: 400; }

.sz-erfassung__knopf {
    padding: 0.9rem 1.75rem !important;
    border: 0;
    border-radius: var(--sz-radius);
    background: var(--sz-bordeaux);
    color: var(--sz-bordeaux-fg);
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
}

.sz-erfassung__knopf:disabled { opacity: 0.4; cursor: not-allowed; }

/* --- Scannen --------------------------------------------------------- */

.sz-erfassung__scan { display: grid; gap: 2.5rem; }

@media (min-width: 900px) { .sz-erfassung__scan { grid-template-columns: 0.9fr 1.1fr; align-items: start; } }

.sz-scan__buehne {
    position: relative;
    aspect-ratio: 4 / 3;
    background: var(--sz-muted);
    border-radius: var(--sz-radius);
    overflow: hidden;
    display: grid;
    place-items: center;
}

.sz-scan__buehne video { width: 100%; height: 100%; object-fit: cover; }

.sz-scan__rahmen {
    position: absolute;
    inset: 22% 12%;
    border: 2px solid var(--sz-bordeaux);
    border-radius: 2px;
    pointer-events: none;
}

.sz-scan__hinweis {
    position: absolute;
    bottom: 1rem;
    margin: 0;
    font-size: 0.8rem;
    color: var(--sz-ink-soft);
}

.sz-scan__text h3 { margin: 0 0 0.9rem; font-size: 1.6rem; }
.sz-scan__text p { line-height: 1.7; color: var(--sz-ink-soft); }

.sz-scan__kasten {
    padding: 0.9rem 1.1rem;
    border-left: 2px solid var(--sz-bordeaux);
    background: var(--sz-muted);
    font-size: 0.85rem;
}

.sz-scan__kasten:empty { display: none; }

/* ===================================================================
   Die Erfassungszeile auf dem Telefon
   ===================================================================

   Die leere erste Zeile sah aus wie eine gefuellte: Mengenwaehler,
   Entfernen-Kreuz und zwei Striche standen da, bevor irgendetwas
   eingegeben war. Wer das zum ersten Mal sieht, haelt es fuer eine
   Bestellung, die schon drinsteht.

   Solange nichts erfasst ist, bleibt nur das Eingabefeld und der
   Hinweis daneben. Alles Uebrige erscheint mit dem Artikel.
*/

@media (max-width: 700px) {
    .sz-erfassung__tabelle,
    .sz-erfassung__tabelle tbody { display: block; }

    .sz-erfassung__tabelle thead { display: none; }

    .sz-erfassung__tabelle tr {
        display: grid;
        grid-template-columns: 1fr auto;
        gap: 0.5rem 0.75rem;
        padding-block: 0.9rem;
        border-bottom: 1px solid var(--sz-border);
        align-items: center;
    }

    .sz-erfassung__tabelle td { display: block; border: 0; padding: 0.15rem 0; }

    /* Die Zeile ohne Artikel zeigt nur das Feld — die Regel dafuer steht
       weiter unten und gilt auf jedem Schirm. */
    .sz-erfassung__zeile.ist-leer { grid-template-columns: 1fr; }
}

/* ===================================================================
   Meine Artikel — eigene Namen
   =================================================================== */

/*
 * Die Liste ist jetzt eine echte Tabelle, ohne Karte darum — so steht
 * es im Entwurf. Ihre Gestaltung steht weiter unten unter
 * "Meine Artikel — 1:1 aus dem Entwurf". Hier bleibt nur, was die
 * Bestandsspalte ein- und ausblendet.
 */
.sz-meine-artikel { margin-block: 2rem 3rem; }


/*
 * Der eigene Name ist die Schaltfläche — er sieht aus wie Text, bis man
 * darüberfährt. Ein Stift daneben wäre ein zweiter Bedienweg für dieselbe
 * Sache.
 */
.sz-eigenname {
    display: block;
    box-sizing: border-box;
    width: 100%;
    padding: 0.15rem 0.4rem !important;
    margin-left: -0.4rem;
    min-width: 0;
    border: 0;
    border-radius: var(--sz-radius);
    background: transparent;
    color: var(--sz-ink);
    font-family: var(--sz-display);
    font-weight: 400;
    font-size: 1.25rem;
    line-height: 1.2;
    text-align: left;
    cursor: text;
    transition: background 180ms ease;
}

.sz-eigenname:hover,
.sz-eigenname:focus-visible { background: var(--sz-muted); }

.sz-eigenname.ist-leer {
    font-family: var(--sz-body);
    font-size: 0.85rem;
    color: var(--sz-ink-soft);
    font-style: italic;
}

.sz-eigenname__feld {
    box-sizing: border-box;
    width: 100%;
    padding: 0.15rem 0.4rem;
    margin-left: -0.4rem;
    border: 1px solid var(--sz-bordeaux);
    border-radius: var(--sz-radius);
    background: var(--sz-surface);
    color: var(--sz-ink);
    font-family: var(--sz-display);
    font-size: 1.25rem;
    line-height: 1.2;
}

.sz-eigenname__feld:focus { outline: none; }

.sz-katalogname {
    display: block;
    margin-top: 0.2rem;
    font-size: 0.82rem;
    color: var(--sz-ink-soft);
    text-decoration: none;
}

.sz-katalogname:hover { color: var(--sz-bordeaux-text); }
.sz-artikelnummer { margin-left: 0.5rem; font-size: 0.7rem; opacity: 0.8; }

.sz-eigenname__wer {
    display: block;
    margin-top: 0.3rem;
    font-family: var(--sz-mono);
    font-size: 0.62rem;
    letter-spacing: 0.1em;
    color: var(--sz-ink-soft);
}

.sz-artikelmeta { font-size: 0.82rem; color: var(--sz-ink-soft); }
/*
 * WooCommerce haengt den Steuerhinweis an den Preis. Nebeneinander wird
 * die Spalte zu breit, also kommt er klein darunter.
 */
.sz-artikelpreis {
    font-family: var(--sz-mono);
    font-size: 0.85rem;
    line-height: 1.35;
    font-variant-numeric: tabular-nums;
}

.sz-artikelpreis .woocommerce-price-suffix,
.sz-artikelpreis small {
    display: block;
    margin-top: 0.1rem;
    font-size: 0.6rem;
    letter-spacing: 0.06em;
    color: var(--sz-ink-soft);
}

.sz-artikelkopf span { white-space: nowrap; }

.sz-hinweis {
    padding: 1.25rem 1.5rem;
    border-left: 2px solid var(--sz-bordeaux);
    background: var(--sz-muted);
    color: var(--sz-ink-soft);
}

/* ===================================================================
   Etiketten
   =================================================================== */

.sz-etiketten-leiste {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.25rem;
    margin-bottom: 1.5rem;
    border: 1px solid var(--sz-border-strong);
    border-radius: var(--sz-radius);
    background: var(--sz-muted);
    font-size: 0.85rem;
}

.sz-etiketten-zahl { font-size: 0.7rem; letter-spacing: 0.16em; color: var(--sz-ink-soft); }
.sz-etiketten-groesse { display: flex; align-items: center; gap: 0.6rem; margin-left: auto; }
.sz-etiketten-groesse .mono { font-size: 0.62rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--sz-ink-soft); }
.sz-etiketten-groesse select { font-size: 0.82rem; padding: 0.4rem 0.6rem; border: 1px solid var(--sz-border-strong); border-radius: var(--sz-radius); background: var(--sz-surface); color: var(--sz-ink); }

.sz-artikelwahl { display: inline-flex; align-items: center; }

.sz-qr-knopf {
    box-sizing: border-box;
    width: 2.1rem; height: 2.1rem;
    padding: 0 !important; min-width: 0;
    border: 1px solid var(--sz-border-strong);
    border-radius: var(--sz-radius);
    background: transparent;
    color: var(--sz-ink-soft);
    cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
}

.sz-qr-knopf:hover { border-color: var(--sz-bordeaux); color: var(--sz-bordeaux-text); background: transparent; }

/* Einzelner Code, gross auf dem Schirm — praktisch, wenn jemand mit dem
   Handy danebensteht. */
.sz-qr-deckel {
    position: fixed; inset: 0; z-index: 200;
    display: grid; place-items: center;
    background: rgba(0, 0, 0, 0.55);
    padding: 1.5rem;
}

.sz-qr-karte {
    background: #fff;
    padding: 2rem;
    border-radius: var(--sz-radius);
    text-align: center;
    max-width: 22rem;
}

.sz-qr-name { margin: 0 0 1rem; font-family: var(--sz-display); font-size: 1.4rem; color: #1a1a1c; }
.sz-qr-bild svg { width: 100%; max-width: 15rem; height: auto; }
.sz-qr-nummer { margin: 0.75rem 0 1.25rem; font-size: 0.8rem; color: #5c5850; }

/* --- Der Bogen -------------------------------------------------------- */

.sz-bogen { margin-top: 2.5rem; }

.sz-bogen__leiste {
    display: flex; flex-wrap: wrap; align-items: center; gap: 1rem;
    padding: 0.9rem 1.25rem; margin-bottom: 1rem;
    border: 1px solid var(--sz-border-strong);
    background: var(--sz-muted);
    font-size: 0.85rem;
}

.sz-bogen__zu {
    padding: 0.6rem 1.2rem !important; min-width: 0;
    border: 1px solid var(--sz-border-strong); border-radius: var(--sz-radius);
    background: transparent; color: var(--sz-ink); cursor: pointer; font-size: 0.85rem;
}

/* A4 mit den ueblichen 8 mm Rand. */
.sz-bogen__blatt {
    width: 210mm;
    max-width: 100%;
    padding: 8mm;
    box-sizing: border-box;
    background: #fff;
    display: grid;
    grid-template-columns: repeat(var(--etikett-spalten, 3), var(--etikett-breite, 70mm));
    justify-content: start;
    border: 1px solid var(--sz-border);
}

.sz-etikett {
    box-sizing: border-box;
    width: var(--etikett-breite, 70mm);
    height: var(--etikett-hoehe, 37mm);
    padding: 3mm;
    display: flex;
    align-items: center;
    gap: 3mm;
    overflow: hidden;
    color: #1a1a1c;
}

.sz-etikett__text { flex: 1; min-width: 0; }

.sz-etikett__name {
    margin: 0;
    font-family: var(--sz-display);
    font-size: var(--etikett-name, 11pt);
    line-height: 1.15;
    overflow-wrap: break-word;
    hyphens: auto;
}

.sz-etikett__nummer { margin: 1mm 0 0; font-size: 6.5pt; letter-spacing: 0.08em; color: #5c5850; }

.sz-etikett__qr { flex-shrink: 0; width: var(--etikett-qr, 26mm); }
.sz-etikett__qr svg { display: block; width: 100%; height: auto; }

/*
 * Beim Drucken bleibt nur der Bogen. Ohne das kaeme die halbe Seite mit
 * aufs Papier — Kopfzeile, Navigation, Fusszeile.
 */
@media print {
    body > *:not(.sz-bogen) { display: none !important; }
    .sz-bogen { margin: 0; }
    .sz-bogen__leiste { display: none !important; }
    .sz-bogen__blatt { border: 0; width: auto; padding: 8mm; }
    @page { size: A4; margin: 0; }
}

/* ===================================================================
   Meine Artikel — Spalten, Bestellen, Etikettenkapitel
   =================================================================== */

.sz-artikelsuche { display: block; margin-bottom: 2rem; }

.sz-artikelsuche input[type="search"] {
    width: 100%;
    max-width: 30rem;
    padding: 0.85rem 1.25rem;
    border: 1px solid var(--sz-border-strong);
    border-radius: 999px;
    background: var(--sz-surface);
    color: var(--sz-ink);
    font-size: 0.95rem;
}

/*
 * Hier stand das Spaltenbild aus Rasterzellen, mit festen Breiten fuer
 * die letzten vier Spalten. Eine Tabelle braucht das nicht: sie rechnet
 * ihre Spalten ueber alle Zeilen gemeinsam aus. Genau darum fluchtet im
 * Entwurf alles — er benutzt eine Tabelle.
 *
 * Was bleibt, ist das Ein- und Ausblenden der Bestandsspalte.
 */
.sz-meine-artikel.ist-ohne-bestand .sz-spalte-bestand { display: none; }

.sz-artikelzeile[hidden] { display: none !important; }

.sz-artikelzeile__katalog { min-width: 0; }
.sz-artikelmarke { display: block; font-size: 0.58rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--sz-bordeaux-text); }
.sz-artikelrhythmus { display: block; margin-top: 0.2rem; font-size: 0.72rem; color: var(--sz-ink-soft); }

.sz-artikelbestand { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.82rem; white-space: nowrap; }

.sz-inkorb {
    box-sizing: border-box;
    width: 2.1rem; height: 2.1rem;
    padding: 0 !important; min-width: 0;
    border: 1px solid var(--sz-bordeaux);
    border-radius: 50%;
    background: transparent;
    color: var(--sz-bordeaux-text);
    font-size: 1.05rem; line-height: 1;
    cursor: pointer;
    transition: background 200ms ease, color 200ms ease;
}

.sz-inkorb:hover { background: var(--sz-bordeaux); color: var(--sz-bordeaux-fg); }
.sz-inkorb.ist-drin { background: var(--sz-bordeaux); color: var(--sz-bordeaux-fg); }
.sz-inkorb:disabled { opacity: 0.4; cursor: wait; }

.sz-artikelfuss { margin-top: 1.25rem; font-size: 0.78rem; color: var(--sz-ink-soft); }

/* --- Das Etikettenkapitel --------------------------------------------- */

.sz-etikettenkapitel { margin-top: 4rem; padding-block: clamp(3rem, 6vh, 5rem) 0; }

.sz-etiketten__titel {
    margin: 1.25rem 0 0;
    font-family: var(--sz-display);
    font-weight: 400;
    font-size: clamp(2rem, 4.6vw, 3.6rem);
    line-height: 0.96;
    letter-spacing: -0.03em;
}

.sz-etiketten__lead { margin: 1.25rem 0 0; max-width: 58ch; line-height: 1.7; color: var(--sz-ink-soft); }

.sz-etiketten__wahl {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    margin-top: 2rem;
}

.sz-etiketten-zahl { font-size: 0.7rem; letter-spacing: 0.16em; color: var(--sz-ink-soft); margin-right: 0.5rem; }

.sz-etiketten__groessen { display: inline-flex; padding: 0.25rem; border: 1px solid var(--sz-border-strong); border-radius: 999px; }

.sz-groesse {
    box-sizing: border-box;
    padding: 0.5rem 1.1rem !important;
    min-width: 0;
    border: 0; border-radius: 999px;
    background: transparent;
    color: var(--sz-ink-soft);
    font-family: var(--sz-mono);
    font-size: 0.7rem;
    cursor: pointer;
    line-height: 1.4;
    white-space: nowrap;
}

.sz-groesse[aria-pressed="true"] { background: var(--sz-bordeaux); color: var(--sz-bordeaux-fg); }

.sz-etiketten__vorschautitel {
    margin: 2.5rem 0 1rem;
    font-size: 0.62rem;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--sz-ink-soft);
}

.sz-etiketten__vorschau {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.sz-etiketten__vorschau .sz-etikett {
    border: 1px solid var(--sz-border);
    background: #fff;
    border-radius: var(--sz-radius);
}

.sz-artikelbereich { margin-block: 2rem; }

/* Der Bestandspunkt: gruen heisst lieferbar. Nur ein Punkt, keine
   Ampel — mehr Farbe waere mehr Behauptung, als der Bestand hergibt. */
.sz-punkt {
    width: 0.45rem;
    height: 0.45rem;
    border-radius: 50%;
    background: var(--sz-border-strong);
    flex: none;
}

.sz-punkt--da { background: #2f7d4f; }


/* ===================================================================
   Astras Blockbreite
   ===================================================================

   Astra deckelt jedes direkte Kind von .entry-content:

       .entry-content[data-ast-blocks-layout] > *
           { max-width: var(--wp--custom--ast-content-width-size); }

   Das sind 1200px, zentriert. Fuer einen Fliesstext ist das richtig, fuer
   eine Artikelliste mit sieben Spalten nicht — sie stand als schmale
   Saeule in einer breiten Seite.

   Der Selektor hat zwei Klassen Gewicht, unserer drei. Damit gewinnt er
   ohne !important.
*/

.entry-content[data-ast-blocks-layout] > .sz-artikelbereich,
.entry-content[data-ast-blocks-layout] > .sz-erfassung {
    max-width: none;
    margin-inline: 0;
}




/* ===================================================================
   Die Kachel im Sortiment — 1:1 aus dem Entwurf
   ===================================================================

   Bildkasten im Quadrat, cremefarben, das Bild darin zentriert und beim
   Zeigen um 4% groesser. Darunter Marke, Name, Preis. Keine Flaeche,
   keine Kante, kein Schatten — der Kasten traegt die Kachel.
*/

.sz-kachel__bild {
    display: grid;
    place-items: center;
    aspect-ratio: 1;
    overflow: hidden;
    background: var(--sz-muted);
    border-radius: var(--sz-radius);
}

.sz-kachel__bild img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 12%;
    box-sizing: border-box;
    transition: transform 700ms cubic-bezier(0.22, 1, 0.36, 1);
}

.woocommerce ul.products li.product:hover .sz-kachel__bild img,
ul.products li.product:hover .sz-kachel__bild img { transform: scale(1.04); }

@media (prefers-reduced-motion: reduce) {
    .woocommerce ul.products li.product:hover .sz-kachel__bild img,
    ul.products li.product:hover .sz-kachel__bild img { transform: none; }
}

.sz-kachel__marke {
    display: block;
    margin-top: 1rem;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--sz-ink-soft);
}

.woocommerce ul.products li.product .woocommerce-loop-product__title,
ul.products li.product .woocommerce-loop-product__title {
    margin: 0.25rem 0 0;
    padding: 0;
    font-family: var(--sz-body);
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.35;
    transition: color 300ms ease;
}

.woocommerce ul.products li.product:hover .woocommerce-loop-product__title,
ul.products li.product:hover .woocommerce-loop-product__title { color: var(--sz-bordeaux-text); }

.woocommerce ul.products li.product .price,
ul.products li.product .price {
    margin-top: 0.35rem;
    font-family: var(--sz-mono);
    font-weight: 500;
    font-size: 1.05rem;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
    color: var(--sz-ink);
}

.woocommerce ul.products li.product .price .woocommerce-price-suffix,
ul.products li.product .price small {
    margin-left: 0.4rem;
    font-family: var(--sz-body);
    font-size: 0.74rem;
    font-weight: 400;
    letter-spacing: 0;
    color: var(--sz-ink-soft);
}

/* ===================================================================
   Meine Artikel — 1:1 aus dem Entwurf
   ===================================================================

   Der Entwurf benutzt eine echte Tabelle. Das ist der Grund, warum dort
   alles fluchtet: eine Tabelle rechnet ihre Spalten ueber alle Zeilen
   gemeinsam aus. Mein Raster tat das nicht — jede Zeile war ein
   eigenes Raster und rechnete fuer sich.
*/

.sz-artikelbereich { margin-block: 0 2rem; }

.sz-eigener-titel .entry-title,
.sz-eigener-titel .ast-single-post-order .entry-title { display: none; }

.sz-artikeltitel {
    margin: 2.25rem 0 0;
    font-family: var(--sz-display);
    font-weight: 400;
    font-size: clamp(2.4rem, 5.6vw, 4.8rem);
    line-height: 0.92;
    letter-spacing: -0.04em;
}

.sz-artikellead {
    margin: 1.5rem 0 0;
    max-width: 36rem;
    font-size: 1rem;
    line-height: 1.7;
    color: var(--sz-ink-soft);
}

/* --- Das Suchfeld mit Lupe --- */

.sz-artikelsuche {
    position: relative;
    display: block;
    margin-top: 2rem;
    max-width: 34rem;
}

.sz-artikelsuche svg {
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    width: 1rem;
    height: 1rem;
    pointer-events: none;
    color: var(--sz-ink-soft);
}

.sz-artikelsuche input[type="search"] {
    box-sizing: border-box;
    width: 100%;
    max-width: none;
    height: 2.6rem;
    padding: 0 1.25rem 0 3.2rem;
    border: 1px solid var(--sz-border);
    border-radius: 999px;
    background: var(--sz-bg);
    color: var(--sz-ink);
    font-size: 1rem;
}

/* --- Die Tabelle --- */

.sz-artikeltafel { margin-top: 2rem; overflow-x: auto; }

.sz-artikeltabelle {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.95rem;
}

.sz-artikeltabelle th {
    padding: 0.75rem;
    border-bottom: 1px solid var(--sz-border);
    text-align: left;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--sz-ink-soft);
}

.sz-artikeltabelle td {
    padding: 0.75rem;
    border-bottom: 1px solid var(--sz-border);
    vertical-align: top;
}

.sz-artikelzeile[hidden] { display: none; }

.sz-z-name    { min-width: 190px; }
.sz-z-artikel { min-width: 230px; }

.sz-artikeltabelle th.sz-z-bestand,
.sz-artikeltabelle th.sz-z-preis,
.sz-artikeltabelle th.sz-z-menge,
.sz-artikeltabelle th.sz-z-korb,
.sz-artikeltabelle td.sz-z-bestand,
.sz-artikeltabelle td.sz-z-preis,
.sz-artikeltabelle td.sz-z-menge,
.sz-artikeltabelle td.sz-z-korb { text-align: right; white-space: nowrap; }

.sz-artikeltabelle td.sz-z-bestand,
.sz-artikeltabelle td.sz-z-preis,
.sz-artikeltabelle td.sz-z-menge,
.sz-artikeltabelle td.sz-z-korb { vertical-align: middle; }

.sz-artikelwahl input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: var(--sz-bordeaux);
}

/* Der eigene Name ist die Schaltflaeche, der Stift erscheint beim
   Zeigen. Ein Stift, der immer da steht, waere ein zweiter Bedienweg. */
.sz-eigenname {
    display: inline-flex;
    align-items: baseline;
    gap: 0.5rem;
    padding: 0 !important;
    min-width: 0;
    border: 0;
    background: transparent;
    text-align: left;
    cursor: pointer;
    font-family: var(--sz-display);
    font-size: 1.18rem;
    line-height: 1.2;
    color: var(--sz-ink);
}

.sz-eigenname.ist-leer { font-family: var(--sz-body); font-size: 0.95rem; font-style: italic; color: var(--sz-ink-soft); }

.sz-eigenname svg { width: 0.75rem; height: 0.75rem; opacity: 0; transition: opacity 200ms ease; color: var(--sz-bordeaux-text); }
.sz-eigenname:hover svg, .sz-eigenname:focus-visible svg { opacity: 1; }

.sz-eigenname__katalog {
    display: block;
    margin-top: 0.25rem;
    font-family: var(--sz-mono);
    font-size: 0.7rem;
    color: var(--sz-ink-soft);
}

.sz-eigenname__feld {
    box-sizing: border-box;
    width: 100%;
    padding: 0.15rem 0.4rem;
    border: 1px solid var(--sz-bordeaux);
    border-radius: var(--sz-radius);
    background: var(--sz-surface);
    color: var(--sz-ink);
    font-family: var(--sz-display);
    font-size: 1.18rem;
}

.sz-eigenname__feld:focus { outline: none; }

.sz-eigenname__wer { display: block; margin-top: 0.3rem; font-size: 0.6rem; color: var(--sz-ink-soft); }

.sz-artikelmarke {
    display: block;
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--sz-ink-soft);
}

.sz-katalogname { font-size: 0.95rem; color: inherit; text-decoration: none; }
.sz-katalogname:hover { color: var(--sz-bordeaux-text); }

.sz-artikelrhythmus { display: block; margin-top: 0.15rem; font-size: 0.78rem; color: var(--sz-ink-soft); }

.sz-artikelbestand { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.88rem; }
.sz-artikelbestand .sz-punkt { width: 7px; height: 7px; border-radius: 50%; background: var(--sz-bordeaux); flex: none; }

.sz-artikelpreis {
    font-family: var(--sz-mono);
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
    font-size: 0.95rem;
}

.sz-artikelpreis .woocommerce-price-suffix,
.sz-artikelpreis small {
    display: block;
    margin-top: 0.1rem;
    font-family: var(--sz-body);
    font-size: 0.68rem;
    font-weight: 400;
    letter-spacing: 0;
    color: var(--sz-ink-soft);
}

.sz-artikeltabelle .sz-menge {
    display: inline-flex;
    align-items: stretch;
    overflow: hidden;
    border: 1px solid var(--sz-border-strong);
    border-radius: 999px;
}

.sz-artikeltabelle .sz-menge button {
    box-sizing: border-box;
    width: 2rem; height: 2rem;
    padding: 0 !important; min-width: 0;
    border: 0; background: transparent;
    color: var(--sz-ink); cursor: pointer; line-height: 1;
}

.sz-artikeltabelle .sz-menge input {
    width: 2.75rem; border: 0; background: transparent;
    text-align: center; font-family: var(--sz-mono); font-size: 0.9rem; color: var(--sz-ink);
    -moz-appearance: textfield;
}

.sz-inkorb {
    box-sizing: border-box;
    display: grid; place-items: center;
    width: 34px; height: 34px;
    padding: 0 !important; min-width: 0;
    border: 1px solid var(--sz-bordeaux);
    border-radius: 50%;
    background: transparent;
    color: var(--sz-bordeaux-text);
    cursor: pointer;
    transition: background 200ms ease, color 200ms ease;
}

.sz-inkorb svg { width: 15px; height: 15px; }
.sz-inkorb:hover, .sz-inkorb.ist-drin { background: var(--sz-bordeaux); color: var(--sz-bordeaux-fg); }
.sz-inkorb:disabled { opacity: 0.4; cursor: wait; }

.sz-artikelfuss {
    display: flex; flex-wrap: wrap;
    gap: 0.5rem 1.5rem;
    margin-top: 1.25rem;
    font-size: 0.8rem;
    color: var(--sz-ink-soft);
}

.sz-artikeltrenner { margin-block: 3.5rem; }

/* --- Der Schlusssatz --- */

.sz-artikelschluss { display: flex; align-items: center; gap: 1.5rem; margin-top: 3.5rem; }
.sz-artikelschluss__linie { height: 1px; width: 3rem; flex: none; background: var(--sz-bordeaux); }

@media (min-width: 768px) { .sz-artikelschluss__linie { width: 6rem; } }

.sz-artikelschluss__satz {
    margin: 0;
    font-family: var(--sz-display);
    font-style: italic;
    font-size: 1.25rem;
    color: var(--sz-bordeaux-text);
}

@media (min-width: 768px) { .sz-artikelschluss__satz { font-size: 1.875rem; } }

/* Auf schmalen Schirmen darf die Tabelle waagrecht rollen — sie in
   Kaertchen umzubauen wuerde die Spaltenkoepfe kosten, und ohne die
   weiss niemand, ob 186 ein Bestand oder ein Preis ist. */
/* ===================================================================
   Meine Artikel auf dem Telefon
   ===================================================================

   Hier stand: die Tabelle darf waagrecht rollen, min-width 44rem. Das
   war falsch gedacht. Genau dort — im Lager, mit dem Telefon in der
   Hand — soll das Nachbestellen am einfachsten sein, und stattdessen
   lag der Mengenwaehler ausserhalb des Bildschirms. Man musste erst
   zur Seite schieben, um bestellen zu koennen.

   Also keine Tabelle mehr, sondern gestapelte Karten. Menge und
   Bestellknopf stehen in der letzten Zeile jeder Karte, mit dem Daumen
   erreichbar.
*/

@media (max-width: 780px) {
    .sz-artikeltafel { overflow: visible; }

    .sz-artikeltabelle,
    .sz-artikeltabelle tbody { display: block; min-width: 0; }

    .sz-artikeltabelle thead { display: none; }

    .sz-artikelzeile {
        display: grid;
        grid-template-columns: 1.6rem 1fr auto;
        gap: 0.35rem 0.75rem;
        padding: 1.1rem 0;
        border-bottom: 1px solid var(--sz-border);
    }

    .sz-artikeltabelle td {
        display: block;
        padding: 0;
        border: 0;
        text-align: left;
    }

    .sz-artikelwahl { grid-column: 1; grid-row: 1; }
    .sz-z-stern     { grid-column: 1; grid-row: 2; }
    .sz-z-name      { grid-column: 2 / -1; grid-row: 1; min-width: 0; }
    .sz-z-artikel   { grid-column: 2 / -1; grid-row: 2; min-width: 0; }

    .sz-artikeltabelle td.sz-z-bestand { grid-column: 2; grid-row: 3; }
    .sz-artikeltabelle td.sz-z-preis   { grid-column: 3; grid-row: 3; text-align: right; }
    .sz-artikeltabelle td.sz-z-menge   { grid-column: 2; grid-row: 4; }
    .sz-artikeltabelle td.sz-z-korb    { grid-column: 3; grid-row: 4; text-align: right; }

    /* Die letzte Zeile bekommt Luft nach oben: dort wird gehandelt. */
    .sz-artikeltabelle td.sz-z-menge,
    .sz-artikeltabelle td.sz-z-korb { padding-top: 0.5rem; }

    /* Der Korbknopf wird groesser — Daumen, nicht Mauszeiger. */
    .sz-artikelzeile .sz-inkorb { width: 44px; height: 44px; }
    .sz-artikelzeile .sz-inkorb svg { width: 18px; height: 18px; }

    .sz-artikeltabelle .sz-menge button { width: 2.4rem; height: 2.6rem; }
    .sz-artikeltabelle .sz-menge input { width: 3rem; }
}

/* ===================================================================
   Astras Tabellengitter
   ===================================================================

   Astra zeichnet um jede Tabelle ein vollstaendiges Gitter:

       table, td, th { border: 1px solid var(--ast-border-color); }
       table         { border-collapse: separate; border-width: 1px 0 0 1px; }
       td, th        { border-width: 0 1px 1px 0; }

   Meine Regeln setzten nur border-bottom, und nur auf td. Alles andere
   blieb stehen: die senkrechten Striche zwischen den Spalten, der Kasten
   um die Tabelle, die Linien in der Kopfzeile. Im Entwurf gibt es nur
   eine waagrechte Haarlinie je Zeile.

   Also erst alles auf null, dann die eine Linie. td UND th, sonst bleibt
   die Kopfzeile eingerahmt.
*/

.sz-artikeltabelle,
.sz-erfassung__tabelle {
    border: 0;
    border-collapse: collapse;
    border-spacing: 0;
    margin: 0;
}

.sz-artikeltabelle th,
.sz-artikeltabelle td,
.sz-erfassung__tabelle th,
.sz-erfassung__tabelle td {
    border: 0;
    border-bottom: 1px solid var(--sz-border);
}

/* Die letzte Zeile braucht keine Linie: darunter kommt nichts mehr. */
.sz-artikeltabelle tbody tr:last-child td,
.sz-erfassung__tabelle tbody tr:last-child td { border-bottom: 0; }

/* ===================================================================
   Vier Kacheln je Reihe
   ===================================================================

   WooCommerce haengt der Liste die Klasse .columns-N an, und Astras
   woocommerce-layout-grid.min.css setzt danach das Raster:

       .woocommerce ul.products:not(.elementor-grid).columns-3
           { grid-template-columns: repeat(3, minmax(0,1fr)); }

   Das wiegt vier Klassen, meine Regel zwei \u2014 sie kam nie zum Zug.
   Die Zahl selbst stellt jetzt ein Filter in shop.php auf vier; diese
   Regeln hier fangen die uebrigen Faelle ab, mit demselben Gewicht wie
   Astra und weiter hinten in der Reihenfolge.
*/

@media (min-width: 1024px) {
    .woocommerce ul.products:not(.elementor-grid),
    .woocommerce ul.products:not(.elementor-grid).columns-1,
    .woocommerce ul.products:not(.elementor-grid).columns-2,
    .woocommerce ul.products:not(.elementor-grid).columns-3,
    .woocommerce ul.products:not(.elementor-grid).columns-5,
    .woocommerce ul.products:not(.elementor-grid).columns-6,
    .woocommerce-page ul.products:not(.elementor-grid).columns-3 {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}


/* ===================================================================
   Das Konto
   ===================================================================

   WooCommerce liefert hier eine Navigationsliste und einen Inhaltsbereich,
   sonst nichts. Ungestaltet steht das als eingerahmter Kasten neben
   Fliesstext da — Astra rahmt jede Liste und jede Tabelle ein.

   Zwei Spalten wie im uebrigen Shop: links die Wege, rechts der Inhalt.
   Der aktive Weg traegt die bordeauxfarbene Kante, wie die Kacheln.
*/

.woocommerce-account .woocommerce {
    display: grid;
    gap: 2.5rem;
    margin-top: 2.5rem;
}

@media (min-width: 900px) {
    .woocommerce-account .woocommerce {
        grid-template-columns: 15rem 1fr;
        gap: 4rem;
        align-items: start;
    }
}

.woocommerce-account .woocommerce-MyAccount-navigation { margin: 0; }

.woocommerce-account .woocommerce-MyAccount-navigation ul {
    margin: 0;
    padding: 0;
    list-style: none;
    border: 0;
}

.woocommerce-account .woocommerce-MyAccount-navigation li {
    margin: 0;
    border: 0;
    border-bottom: 1px solid var(--sz-border);
}

.woocommerce-account .woocommerce-MyAccount-navigation li:last-child { border-bottom: 0; }

.woocommerce-account .woocommerce-MyAccount-navigation li a {
    display: block;
    padding: 0.85rem 0 0.85rem 1rem;
    border-left: 2px solid transparent;
    font-family: var(--sz-mono);
    font-size: 0.78rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--sz-ink-soft);
    transition: color 200ms ease, border-color 200ms ease;
}

.woocommerce-account .woocommerce-MyAccount-navigation li a:hover { color: var(--sz-ink); }

.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a {
    border-left-color: var(--sz-bordeaux);
    color: var(--sz-bordeaux-text);
}

.woocommerce-account .woocommerce-MyAccount-content { min-width: 0; }

.woocommerce-account .woocommerce-MyAccount-content > p:first-child {
    margin-top: 0;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--sz-border);
    font-family: var(--sz-display);
    font-size: 1.35rem;
    line-height: 1.4;
    color: var(--sz-ink);
}

.woocommerce-account .woocommerce-MyAccount-content p { line-height: 1.75; }

.woocommerce-account .woocommerce-MyAccount-content a { color: var(--sz-bordeaux-text); }

/* Astra rahmt auch hier jede Tabelle ein — Bestellungen, Adressen,
   Downloads. Dieselbe eine Haarlinie wie ueberall. */
.woocommerce-account table,
.woocommerce-account table th,
.woocommerce-account table td {
    border: 0;
    border-collapse: collapse;
}

.woocommerce-account table th,
.woocommerce-account table td {
    padding: 0.9rem 0.75rem;
    border-bottom: 1px solid var(--sz-border);
    text-align: left;
}

.woocommerce-account table th {
    font-family: var(--sz-mono);
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--sz-ink-soft);
}

/* ===================================================================
   Ein Mengenwaehler, nicht zwei
   ===================================================================

   In der Kachel gab es zwei Bilder: bei einfachen Artikeln ein kleines
   Kaestchen neben dem Knopf, bei Artikeln mit Gebinden ein Auswahlfeld
   und darunter ein Feld ueber die volle Breite. Zweimal dieselbe Sache,
   zweimal anders — das laesst die Seite unfertig wirken.

   Also fuer beide dasselbe: das Gebinde immer auf eigener Zeile, darunter
   Menge und Knopf nebeneinander.
*/

.woocommerce ul.products li.product form.cart,
.woocommerce ul.products li.product .cart {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    margin: 0.9rem 0 0;
}

/* Das Gebinde nimmt immer die ganze Zeile. */
.woocommerce ul.products li.product select {
    box-sizing: border-box;
    flex: 1 0 100%;
    width: 100%;
    height: 2.6rem;
    padding: 0 1rem;
    border: 1px solid var(--sz-border-strong);
    border-radius: 999px;
    background: var(--sz-surface);
    color: var(--sz-ink);
    font-family: var(--sz-mono);
    font-size: 0.8rem;
}

.woocommerce ul.products li.product .quantity {
    flex: 0 0 auto;
    margin: 0;
    width: auto;
    max-width: none;
    float: none;
}

.woocommerce ul.products li.product .quantity input,
.woocommerce ul.products li.product input.qty,
.woocommerce ul.products li.product input[type="number"] {
    box-sizing: border-box;
    width: 3.6rem;
    min-width: 0;
    max-width: 3.6rem;
    height: 2.6rem;
    margin: 0;
    padding: 0 0.4rem;
    border: 1px solid var(--sz-border-strong);
    border-radius: 999px;
    background: var(--sz-surface);
    text-align: center;
    font-family: var(--sz-mono);
    font-size: 0.85rem;
    color: var(--sz-ink);
    -moz-appearance: textfield;
}

.woocommerce ul.products li.product input[type="number"]::-webkit-outer-spin-button,
.woocommerce ul.products li.product input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.woocommerce ul.products li.product a.button,
.woocommerce ul.products li.product button.button,
.woocommerce ul.products li.product .add_to_cart_button,
.woocommerce ul.products li.product button[type="submit"] {
    box-sizing: border-box;
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    height: 2.6rem;
    margin: 0;
    padding: 0 1.25rem !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 999px;
    background: var(--sz-bordeaux);
    color: var(--sz-bordeaux-fg);
    font-family: var(--sz-mono);
    font-size: 0.72rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    line-height: 1;
    white-space: nowrap;
}

/* ===================================================================
   Der Katalogkopf
   ===================================================================

   Nach dem Entwurf: Brotkrumen, Kapitelmarke, grosse Ueberschrift mit
   Slogan, dann drei Leisten quer ueber die Seite.
*/

.sz-krumen {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 2rem;
    font-size: 0.78rem;
    color: var(--sz-ink-soft);
}

.sz-krumen a { color: inherit; text-decoration: none; }
.sz-krumen a:hover { color: var(--sz-bordeaux-text); }
.sz-krumen [aria-current] { color: var(--sz-ink); }
.sz-krumen__strich { opacity: 0.4; }

.sz-katalog__titel {
    margin: 2.25rem 0 0;
    font-family: var(--sz-display);
    font-weight: 400;
    font-size: clamp(2.8rem, 6.6vw, 6rem);
    line-height: 0.92;
    letter-spacing: -0.04em;
}

/* Der Slogan steht im Entwurf an einer bordeauxfarbenen Kante, in der
   kursiven Serifenschrift. Er traegt den Ton der Seite. */
.sz-katalog__slogan {
    display: inline-block;
    margin: 2rem 0 0;
    padding-left: 1.25rem;
    border-left: 2px solid var(--sz-bordeaux);
    font-family: var(--sz-display);
    font-style: italic;
    font-size: 1.35rem;
    line-height: 1.4;
    color: var(--sz-bordeaux-text);
}

/* --- Die Leisten -------------------------------------------------------
 *
 * Sie laufen von Rand zu Rand, auch wenn sie in einem gedeckelten
 * Container stehen: der negative Aussenabstand zieht sie bis an den
 * Fensterrand, der gleich grosse Innenabstand holt den Inhalt zurueck
 * in die Schale.
 *
 * 100vw ist breiter als der Inhalt, sobald ein Rollbalken da ist. Damit
 * das keinen waagrechten Rollbalken erzeugt, schneidet #content ab.
 * overflow-x: clip und nicht hidden \u2014 hidden wuerde einen eigenen
 * Rollbereich aufmachen und Sticky-Elemente darin festnageln.
 */

#content { overflow-x: clip; }

.sz-band {
    margin-inline: calc(50% - 50vw);
    padding-inline: calc(50vw - 50%);
    margin-top: 3rem;
    border-top: 1px solid var(--sz-border);
    border-bottom: 1px solid var(--sz-border);
}

.sz-band + .sz-band { margin-top: 0; border-top: 0; }

.sz-band--bereich { background: color-mix(in srgb, var(--sz-bg) 60%, var(--sz-muted)); }
.sz-band--kategorien,
.sz-band--marken { background: var(--sz-muted); }

.sz-band__innen {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.25rem;
    padding-block: 1.25rem;
}

.sz-band__innen--stapel {
    display: block;
    padding-block: 1.5rem;
}

.sz-band__notiz {
    margin-left: auto;
    font-size: 0.72rem;
    color: var(--sz-ink-soft);
}

.sz-kicker-klein {
    display: block;
    font-family: var(--sz-mono);
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--sz-ink-soft);
}

.sz-band__innen--stapel .sz-kicker-klein { margin: 0 0 1rem; }

/* ===================================================================
   Der Bereich — die erste Entscheidung
   ===================================================================

   Ein Hotelier und ein Reinigungsbetrieb brauchen zwei verschiedene
   Haelften des Hauses. Das ist die Weiche, an der alles Weitere haengt,
   und sie stand als blasse Kapsel neben einem winzigen Wort. Auf dem
   Telefon brachen die beiden Namen innerhalb der Kapsel um — es sah
   nicht nach einer Wahl aus, sondern nach einem Fehler.

   Jetzt zwei Felder nebeneinander, jedes mit seiner Artikelzahl, das
   gewaehlte gefuellt. Auf dem Telefon untereinander und ueber die ganze
   Breite: dort ist eine Zeile, die man antippt, klarer als zwei halbe.
*/

.sz-band--bereich { padding-block: 0.5rem; }

.sz-band__innen--wahl {
    display: block;
    padding-block: 1.75rem;
}

.sz-kicker-klein--stark {
    margin: 0 0 0.9rem;
    font-size: 0.72rem;
    color: var(--sz-bordeaux-text);
}

.sz-schalter {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
    gap: 0.75rem;
    border: 0;
    border-radius: 0;
    overflow: visible;
}

.sz-schalter__weg {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: 3.6rem;
    padding: 0.85rem 1.4rem;
    border: 1px solid var(--sz-border-strong);
    border-radius: var(--sz-radius);
    background: var(--sz-surface);
    font-family: var(--sz-body);
    font-size: 1.02rem;
    font-weight: 600;
    line-height: 1.25;
    text-decoration: none;
    color: var(--sz-ink);
    white-space: normal;
    transition: background 200ms ease, color 200ms ease, border-color 200ms ease;
}

.sz-schalter__zahl {
    flex: none;
    font-size: 0.76rem;
    font-weight: 500;
    color: var(--sz-ink-soft);
}

.sz-schalter__weg:hover {
    border-color: var(--sz-bordeaux);
    color: var(--sz-bordeaux-text);
}

.sz-schalter__weg[aria-current] {
    background: var(--sz-bordeaux);
    border-color: var(--sz-bordeaux);
    color: var(--sz-bordeaux-fg);
}

.sz-schalter__weg[aria-current] .sz-schalter__zahl { color: var(--sz-bordeaux-fg); opacity: 0.75; }

/* Favoritenfilter und Artikelzahl standen in der Flexzeile neben dem
   Schalter. Die Leiste ist jetzt gestapelt — sie brauchen wieder Luft
   und eine eigene Zeile darunter. */
.sz-band__innen--wahl .sz-chip { margin-top: 1rem; }

.sz-band__innen--wahl .sz-band__notiz {
    display: inline-block;
    margin-top: 1rem;
    margin-left: 0;
}

.sz-band__innen--wahl .sz-chip + .sz-band__notiz { margin-left: 0.9rem; }

@media (max-width: 700px) {
    .sz-band__innen--wahl { padding-block: 1.4rem; }
    .sz-schalter { grid-template-columns: 1fr; gap: 0.6rem; }
    .sz-schalter__weg { min-height: 3.3rem; font-size: 0.98rem; }
}

/* In der Leiste braucht die Chipreihe keinen eigenen Abstand mehr. */
.sz-band .sz-chips { margin-top: 0; gap: 0.65rem; }

.sz-chip[aria-current] {
    background: var(--sz-bordeaux-soft);
    border-color: var(--sz-bordeaux);
    color: var(--sz-bordeaux-text);
    font-weight: 600;
}

.sz-chip__zahl { font-size: 0.7rem; color: var(--sz-ink-soft); }
.sz-chip[aria-current] .sz-chip__zahl { color: var(--sz-bordeaux-text); }

/* --- Die Trefferzeile --- */

.sz-katalog__zeile {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-block: 2.5rem 2rem;
}

.sz-katalog__treffer {
    margin: 0;
    font-size: 0.7rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--sz-ink-soft);
}

/* Sortierung und Zahl je Seite: eine Gruppe rechts, die auf schmalen
   Schirmen umbricht statt zu quetschen. */
.sz-katalog__werkzeuge {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem;
}

.sz-katalog__werkzeuge > form { margin: 0; }

/* Ohne Skript steht das Feld nackt da; dann wenigstens mit einem
   Knopf daneben, der es abschickt. */
.sz-jeseite noscript button { margin-left: 0.4rem; }

/* ===================================================================
   Nicht vorraetige Artikel
   ===================================================================

   WooCommerce ersetzt bei nicht bestellbaren Artikeln den Warenkorbknopf
   durch einen Link "Weiterlesen". Das ist Blogsprache; in einem Katalog
   liest sich das falsch. Der Text steht jetzt in shop.php.

   Und er soll auch nicht rot schreien: die Kachel traegt bereits das
   Schild "Nicht vorraetig". Ein gefuellter Knopf daneben verspraeche
   etwas, das gerade nicht geht. Also nur Umriss.

   .outofstock setzt WooCommerce selbst an die Kachel \u2014 verlaesslicher,
   als auf das Fehlen von .add_to_cart_button zu bauen, denn den setzt
   das Mengen-Snippet ohnehin anders.
*/

.woocommerce ul.products li.product.outofstock .button,
ul.products li.product.outofstock .button {
    background: transparent !important;
    border: 1px solid var(--sz-border-strong) !important;
    color: var(--sz-ink-soft) !important;
}

.woocommerce ul.products li.product.outofstock .button:hover,
ul.products li.product.outofstock .button:hover {
    border-color: var(--sz-bordeaux) !important;
    color: var(--sz-bordeaux-text) !important;
}


/* ===================================================================
   Das B2B-Konto
   =================================================================== */

.sz-konto__name {
    margin: 1.25rem 0 0;
    font-family: var(--sz-display);
    font-weight: 400;
    font-size: clamp(2.2rem, 5vw, 4.2rem);
    line-height: 0.92;
    letter-spacing: -0.04em;
}

.sz-konto__lage { margin: 0.9rem 0 0; font-size: 0.92rem; color: var(--sz-ink-soft); }
.sz-konto__lead { margin: 0 0 1.5rem; max-width: 46rem; font-size: 0.92rem; line-height: 1.7; color: var(--sz-ink-soft); }
.sz-konto__fein { margin-top: 0.75rem; font-size: 0.72rem; color: var(--sz-ink-soft); }
.sz-konto__trenner { margin-block: 3rem; }

.sz-konto__zahlen { display: grid; gap: 1rem; margin-top: 2.5rem; }

@media (min-width: 640px) { .sz-konto__zahlen { grid-template-columns: repeat(3, 1fr); } }

.sz-kennzahl {
    padding: 1.5rem;
    border: 1px solid var(--sz-border);
    border-radius: var(--sz-radius);
    background: var(--sz-surface);
}

.sz-kennzahl__wert {
    margin: 0.5rem 0 0;
    font-family: var(--sz-mono);
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    font-size: 1.7rem;
    letter-spacing: -0.02em;
}

.sz-konto__kopfzeile {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    margin: 3rem 0 1rem;
}

.sz-konto__titel {
    margin: 0;
    font-family: var(--sz-display);
    font-weight: 400;
    font-size: clamp(1.6rem, 3vw, 2rem);
    line-height: 0.98;
    letter-spacing: -0.03em;
}

.sz-konto__titel--klein { font-size: 1.5rem; margin: 3rem 0 1rem; }
.sz-konto__weiter { font-size: 0.82rem; color: var(--sz-bordeaux-text); text-decoration: none; }
.sz-konto__spanne { font-size: 0.78rem; color: var(--sz-ink-soft); }

/* --- Reihen: Bestellungen, Belege, Zugaenge, Favoriten --- */

.sz-reihen {
    display: grid;
    gap: 1px;
    overflow: hidden;
    border: 1px solid var(--sz-border);
    border-radius: var(--sz-radius);
    background: var(--sz-border);
}

.sz-reihe {
    display: grid;
    gap: 0.4rem;
    padding: 0.9rem 1.25rem;
    background: var(--sz-bg);
    align-items: center;
}

@media (min-width: 768px) {
    .sz-reihe { grid-template-columns: 1.5fr 1fr 1fr auto; gap: 1rem; }
    .sz-reihe--favorit { grid-template-columns: 1.8fr auto auto auto; }
}

.sz-reihe__name { font-size: 0.92rem; color: inherit; text-decoration: none; }
.sz-reihe__name:hover { color: var(--sz-bordeaux-text); }
.sz-reihe__mono { display: block; font-family: var(--sz-mono); font-size: 0.76rem; color: var(--sz-ink-soft); }
.sz-reihe__preis { font-family: var(--sz-mono); font-size: 0.88rem; font-variant-numeric: tabular-nums; }
.sz-reihe__weg { white-space: nowrap; font-size: 0.8rem; color: var(--sz-bordeaux-text); text-decoration: none; }

/* --- Die Ausgaben --- */

.sz-konto__summe {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.5rem 2rem;
    margin: 0 0 2rem;
}

.sz-konto__summe .price {
    font-family: var(--sz-mono);
    font-weight: 500;
    font-size: 2rem;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
}

.sz-konto__vorjahr { font-size: 0.9rem; color: var(--sz-ink-soft); }
.sz-konto__wandel { color: var(--sz-bordeaux-text); }

.sz-saeulen {
    display: flex;
    align-items: flex-end;
    gap: 0.4rem;
    height: 190px;
    overflow-x: auto;
    padding-bottom: 0.25rem;
}

@media (min-width: 768px) { .sz-saeulen { gap: 0.75rem; } }

.sz-saeule {
    display: flex;
    flex: 1;
    min-width: 2.1rem;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
    height: 100%;
}

.sz-saeule__paar { display: flex; width: 100%; height: 100%; align-items: flex-end; justify-content: center; gap: 3px; }

/* Vorjahr blass, dieses Jahr bordeaux. Ein Balken allein sagt nichts
   ueber die Richtung, erst das Paar tut es. */
.sz-saeule__vorher { width: 38%; background: color-mix(in srgb, var(--sz-ink) 14%, transparent); }
.sz-saeule__jetzt  { width: 38%; background: var(--sz-bordeaux); }
.sz-saeule__marke  { font-size: 0.6rem; color: var(--sz-ink-soft); white-space: nowrap; }

.sz-konto__anteile { margin-top: 2.5rem; }
.sz-anteile { display: grid; gap: 0.9rem; margin-top: 1rem; }
.sz-anteil__zeile { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; font-size: 0.92rem; }
.sz-anteil__zeile .price { font-family: var(--sz-mono); font-size: 0.86rem; white-space: nowrap; font-variant-numeric: tabular-nums; }
.sz-anteil__prozent { margin-left: 0.5rem; font-size: 0.7rem; color: var(--sz-ink-soft); }

.sz-anteil__balken {
    display: block;
    height: 3px;
    width: 100%;
    margin-top: 0.4rem;
    background: color-mix(in srgb, var(--sz-ink) 10%, transparent);
}

.sz-anteil__balken > span { display: block; height: 100%; background: var(--sz-bordeaux); }

.sz-konto__schluss { display: flex; align-items: center; gap: 1.5rem; margin-top: 3.5rem; }
.sz-konto__schluss-linie { height: 1px; width: 3rem; flex: none; background: var(--sz-bordeaux); }

@media (min-width: 768px) { .sz-konto__schluss-linie { width: 6rem; } }

.sz-konto__schluss-satz {
    margin: 0;
    font-family: var(--sz-display);
    font-style: italic;
    font-size: 1.25rem;
    color: var(--sz-bordeaux-text);
}

@media (min-width: 768px) { .sz-konto__schluss-satz { font-size: 1.875rem; } }

/* ===================================================================
   Das Herz
   ===================================================================

   An der Kachel oben rechts im Bildkasten, am Artikel neben dem
   Warenkorbknopf. Umriss heisst nicht gemerkt, gefuellt heisst gemerkt.
*/

.sz-stern {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    width: auto;
    min-width: 0;
    padding: 0 !important;
    border: 0;
    border-radius: 0 !important;
    background: transparent;
    color: var(--sz-ink-soft);
    cursor: pointer;
    font-family: var(--sz-mono);
    font-size: 0.68rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    line-height: 1;
    transition: color 200ms ease;
}

.sz-stern svg {
    width: 0.95rem;
    height: 0.95rem;
    flex: none;
    fill: none;
}

.sz-stern:hover { color: var(--sz-bordeaux-text); }

.sz-stern.ist-gemerkt { color: var(--sz-bordeaux); }
.sz-stern.ist-gemerkt svg { fill: currentColor; }

/* In der Kachel steht es unter dem Preis, mit etwas Luft davor. */
.sz-stern--zeile { margin-top: 0.6rem; }

.sz-stern--artikel { margin-left: 1rem; vertical-align: middle; }


/* --- Der Stern in der Tabelle und die Filterreihe ------------------- */

.sz-artikeltabelle th.sz-z-stern,
.sz-artikeltabelle td.sz-z-stern { width: 2rem; padding-inline: 0.25rem; }

.sz-stern--zelle { gap: 0; }

.sz-artikelfilter { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2rem; }

.sz-wahlreihe {
    display: inline-flex;
    padding: 0.25rem;
    border: 1px solid var(--sz-border-strong);
    border-radius: 999px;
}

.sz-wahl {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    box-sizing: border-box;
    padding: 0.5rem 1.25rem !important;
    min-width: 0;
    border: 0;
    border-radius: 999px !important;
    background: transparent;
    color: var(--sz-ink-soft);
    font-family: var(--sz-mono);
    font-size: 0.72rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    line-height: 1.4;
    cursor: pointer;
    white-space: nowrap;
}

.sz-wahl[aria-pressed="true"] { background: var(--sz-bordeaux); color: var(--sz-bordeaux-fg); }
.sz-wahl__zahl { font-size: 0.66rem; opacity: 0.75; }

/* --- Der Favoritenchip im Katalogkopf ------------------------------- */

.sz-chip--stern { gap: 0.45rem; }
.sz-chip--stern svg { width: 0.9rem; height: 0.9rem; fill: none; stroke: currentColor; stroke-width: 1.7; }
.sz-chip--stern[aria-current] svg { fill: currentColor; }


/* --- Zwei Pfeile am Mengenfeld der Kachel --------------------------- */

.sz-menge--kachel {
    display: inline-flex;
    align-items: stretch;
    overflow: hidden;
    border: 1px solid var(--sz-border-strong);
    border-radius: 999px;
    background: var(--sz-surface);
}

.sz-menge--kachel button {
    box-sizing: border-box;
    width: 2rem;
    height: 2.6rem;
    padding: 0 !important;
    min-width: 0;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: var(--sz-ink) !important;
    font-family: var(--sz-body);
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
}

.sz-menge--kachel button:hover { color: var(--sz-bordeaux-text) !important; }

/* Das Feld selbst verliert seinen eigenen Rahmen — die Kapsel traegt ihn. */
.sz-menge--kachel input {
    box-sizing: border-box;
    width: 2.75rem !important;
    max-width: 2.75rem !important;
    height: 2.6rem;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    text-align: center;
    font-family: var(--sz-mono);
    font-size: 0.85rem;
    color: var(--sz-ink);
    -moz-appearance: textfield;
}

.sz-menge--kachel input::-webkit-outer-spin-button,
.sz-menge--kachel input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* Der Stern steht unter dem Preis, ueber dem Warenkorbknopf. */
.sz-stern--zeile { margin: 0.75rem 0 0; }


/* ===================================================================
   Der Stern in der Kachel, lesbar
   ===================================================================

   Beim Zeigen legt sich das Bordeaux-Licht ueber die Kachel. Auf dem
   roten Grund war "Merken" in Bordeaux kaum noch zu lesen — rot auf
   rot. Der Knopf traegt jetzt die Tintenfarbe und liegt ueber dem
   Licht, nicht darunter.
*/

.woocommerce ul.products li.product .sz-stern--zeile,
ul.products li.product .sz-stern--zeile {
    position: relative;
    z-index: 3;
    color: var(--sz-ink);
}

.woocommerce ul.products li.product .sz-stern--zeile:hover,
ul.products li.product .sz-stern--zeile:hover { color: var(--sz-bordeaux-text); }

/* Gemerkt bleibt Bordeaux — gefuellt ist es auch auf rotem Grund
   erkennbar, weil die Form voll ist und nicht nur eine Linie. */
.woocommerce ul.products li.product .sz-stern--zeile.ist-gemerkt,
ul.products li.product .sz-stern--zeile.ist-gemerkt { color: var(--sz-bordeaux); }

/* ===================================================================
   Das Konto, in voller Breite
   ===================================================================

   Astra deckelt jedes direkte Kind von .entry-content auf 1200px und
   zentriert es; auf der Kontoseite kam dazu, dass die zwei Spalten in
   einem so schmalen Feld nichts mehr uebrig liessen — der Fliesstext
   brach nach zwei Woertern um.
*/

.entry-content[data-ast-blocks-layout] > .woocommerce {
    max-width: none;
    margin-inline: 0;
}

/* minmax(0, …) statt blossem fr: sonst sprengt ein langer Preis oder
   eine breite Tabelle die Spalte und drueckt die andere zusammen. */
@media (min-width: 900px) {
    .woocommerce-account .woocommerce {
        grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
    }
}

.woocommerce-account .woocommerce-MyAccount-navigation,
.woocommerce-account .woocommerce-MyAccount-content { min-width: 0; }

/* Die Plaetze ausdruecklich zuweisen.
 *
 * Mit blossem grid-template-columns landet das erste Kind in Spalte 1,
 * das zweite in Spalte 2, das dritte wieder in Spalte 1 — und
 * WooCommerce setzt vor die Navigation gern einen Meldungsblock. Dann
 * rutschte der Inhalt in die 15rem schmale Spalte, und der Fliesstext
 * brach nach zwei Woertern um. Genau so sah es aus.
 */
@media (min-width: 900px) {
    .woocommerce-account .woocommerce { align-items: start; }

    .woocommerce-account .woocommerce > .woocommerce-notices-wrapper {
        grid-column: 1 / -1;
        grid-row: 1;
    }

    .woocommerce-account .woocommerce-MyAccount-navigation { grid-column: 1; grid-row: 2; }
    .woocommerce-account .woocommerce-MyAccount-content    { grid-column: 2; grid-row: 2; }
}

/* ===================================================================
   Die Kontonavigation, lesbar
   ===================================================================

   WooCommerces eigenes Stylesheet setzt

       .woocommerce-account .woocommerce-MyAccount-navigation
           { float: left; width: 30%; }

   Innerhalb unserer Rasterspalte wurden daraus 30% von 240px, also
   gut sechzig Pixel. In sechzig Pixel passt "BESTELLUNGEN" in
   gesperrten Grossbuchstaben nicht, also brach es mitten im Wort:
   BESTE / LLUNGEN.

   Die Spalte gibt die Breite vor, nicht der Prozentsatz.
*/

.woocommerce-account .woocommerce-MyAccount-navigation,
.woocommerce-account .woocommerce-MyAccount-content {
    float: none;
    width: 100%;
    margin: 0;
}

/* Und nie mitten im Wort trennen: lieber eine Zeile mehr. */
.woocommerce-account .woocommerce-MyAccount-navigation li a {
    word-break: normal;
    overflow-wrap: normal;
    hyphens: none;
}

/* ===================================================================
   Die Sortierung
   ===================================================================

   Ein natives Auswahlfeld laesst sich nur geschlossen gestalten; die
   aufgeklappte Liste zeichnet das Betriebssystem, mit blauem Balken und
   Systemschrift. Auf einer Seite, die sonst in Mono und Bordeaux
   gesetzt ist, faellt das heraus.

   Das Feld bleibt im Dokument und traegt den Wert \u2014 ohne Skript
   funktioniert die Sortierung wie zuvor. Es wird nur unsichtbar.
*/

.sz-sortierung { position: relative; display: inline-block; }

.sz-sortierung select {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.sz-sortierung__knopf {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 1.1rem !important;
    min-width: 0;
    border: 1px solid var(--sz-border-strong);
    border-radius: 999px !important;
    background: var(--sz-surface);
    color: var(--sz-ink);
    font-family: var(--sz-mono);
    font-size: 0.72rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    line-height: 1.4;
    cursor: pointer;
    white-space: nowrap;
}

.sz-sortierung__knopf:hover { border-color: var(--sz-bordeaux); color: var(--sz-bordeaux-text); }
.sz-sortierung__knopf svg { width: 0.85rem; height: 0.85rem; flex: none; transition: transform 200ms ease; }
.sz-sortierung.ist-offen .sz-sortierung__knopf svg { transform: rotate(180deg); }

@media (prefers-reduced-motion: reduce) {
    .sz-sortierung__knopf svg { transition: none; }
}

/* --- Der Grund unter der Liste ---------------------------------------
 *
 * Eine Flaeche ueber dem ganzen Fenster, die jeden Druck abfaengt, der
 * nicht der Liste gilt. Vorher haing die Liste an einem Lauscher am
 * Dokument — und blieb auf dem Telefon offen ueber den Waren stehen.
 *
 * Am Schreibtisch bleibt sie durchsichtig: dort ist die Liste ein
 * kleines Aufklappmenue, kein Vorhang. Auf dem Telefon ist sie ein
 * Blatt, und dann gehoert ein Schleier dazu.
 */

.sz-sortierung__grund {
    position: fixed;
    inset: 0;
    z-index: 69;
    background: transparent;
}

.sz-sortierung__grund[hidden] { display: none; }

/* Auch hier: display schlaegt [hidden]. Die Liste haengt zwar nur im
   Koerper, solange sie offen ist — aber wer das einmal aendert, sucht
   den Fehler sonst lange. */
.sz-sortierung__liste[hidden] { display: none; }

.sz-sortierung__liste {
    position: fixed;
    z-index: 70;
    min-width: 16rem;
    display: grid;
    overflow: hidden;
    border: 1px solid var(--sz-border-strong);
    border-radius: var(--sz-radius);
    background: var(--sz-surface);
    box-shadow: var(--sz-hebung);
}

.sz-sortierung__titel {
    margin: 0;
    padding: 0.9rem 1.1rem 0.5rem;
    font-family: var(--sz-mono);
    font-size: 0.64rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--sz-ink-soft);
}

.sz-sortierung__wahl {
    box-sizing: border-box;
    padding: 0.7rem 1.1rem !important;
    min-width: 0;
    border: 0;
    border-radius: 0 !important;
    background: transparent;
    color: var(--sz-ink);
    font-family: var(--sz-body);
    font-size: 0.88rem;
    text-align: left;
    line-height: 1.4;
    cursor: pointer;
    white-space: nowrap;
}

.sz-sortierung__wahl + .sz-sortierung__wahl { border-top: 1px solid var(--sz-border); }
.sz-sortierung__wahl:hover { background: var(--sz-muted); }

.sz-sortierung__wahl.ist-gewaehlt {
    background: var(--sz-bordeaux-soft);
    color: var(--sz-bordeaux-text);
    font-weight: 600;
}


/* ===================================================================
   Die Kachel auf dem Telefon
   ===================================================================

   Ohne Anmeldung steht statt des Preises "Anmelden und Preis sehen".
   Der Satz ist laenger als jeder Preis, und der Knopf darunter traegt
   gesperrte Grossbuchstaben — beides lief aus der Kachel hinaus und
   wurde am Rand abgeschnitten.

   Also: umbrechen duerfen, und auf schmalen Schirmen kleiner setzen.
*/

.woocommerce ul.products li.product .price,
ul.products li.product .price {
    display: block;
    overflow-wrap: anywhere;
    white-space: normal;
}

.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product .added_to_cart {
    white-space: normal;
    overflow-wrap: anywhere;
}

@media (max-width: 640px) {
    .woocommerce ul.products li.product .price,
    ul.products li.product .price { font-size: 0.86rem; }

    .woocommerce ul.products li.product .button,
    .woocommerce ul.products li.product .added_to_cart {
        padding: 0.7rem 0.6rem !important;
        font-size: 0.68rem !important;
        letter-spacing: 0.02em;
    }

    .woocommerce ul.products li.product .woocommerce-loop-product__title,
    ul.products li.product .woocommerce-loop-product__title { font-size: 0.95rem; }
}

/* ===================================================================
   Die Sortierliste auf dem Telefon
   ===================================================================

   Hier stand der Versuch aus 1.37.0, die haengende Liste zu retten:
   nach links haengen, schmal halten. Das kurierte am Symptom — die
   Liste blieb ein Aufklappmenue, das ueber den Waren stehenblieb.

   Sie ist jetzt ein Blatt von unten, ueber die ganze Breite, mit einem
   Schleier dahinter. Die Regeln dafuer stehen weiter unten. Geblieben
   ist nur, dass der Knopf eine eigene Zeile bekommt.
*/

@media (max-width: 700px) {
    .sz-sortierung { display: block; }
}

/* ===================================================================
   Adressen im Konto, im Dunkeln lesbar
   ===================================================================

   WooCommerce setzt den Titel einer Adresskarte in derselben Farbe wie
   den uebrigen Text — hell. Astra legt der Karte aber eine helle
   Flaeche unter, auch im dunklen Thema. Cremefarben auf Weiss ist
   nicht zu lesen.

   Die Karte bekommt unsere Flaeche und der Titel unsere Tinte.
*/

.woocommerce-account .woocommerce-Address,
.woocommerce-account .woocommerce-Address-title,
.woocommerce-account .addresses .col-1,
.woocommerce-account .addresses .col-2 {
    background: var(--sz-surface) !important;
}

.woocommerce-account .woocommerce-Address-title h2,
.woocommerce-account .woocommerce-Address-title h3,
.woocommerce-account .woocommerce-Address address {
    color: var(--sz-ink) !important;
}

.woocommerce-account .woocommerce-Address {
    border: 1px solid var(--sz-border);
    border-radius: var(--sz-radius);
    padding: 1.25rem 1.5rem;
}

.woocommerce-account .woocommerce-Address-title {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
    padding: 0;
    border: 0;
}

.woocommerce-account .woocommerce-Address-title h2,
.woocommerce-account .woocommerce-Address-title h3 {
    margin: 0;
    font-family: var(--sz-display);
    font-size: 1.35rem;
    line-height: 1.2;
}

.woocommerce-account .woocommerce-Address-title a { font-size: 0.82rem; color: var(--sz-bordeaux-text); }
.woocommerce-account .woocommerce-Address address { font-style: normal; line-height: 1.7; }

/* ===================================================================
   Kacheln ohne Bild
   ===================================================================

   Vierundzwanzig gleiche Platzhalter nebeneinander sehen nach kaputtem
   Katalog aus. Ohne Bildflaeche sieht dieselbe Kachel nach Liste aus —
   und das ist sie dann auch. Ehrlicher, solange die Bilder fehlen.

   Sobald ein Artikel ein Bild bekommt, faellt die Klasse weg und er hat
   wieder seinen cremefarbenen Kasten.
*/

.woocommerce ul.products li.product.sz-ohne-bild .sz-kachel__bild,
ul.products li.product.sz-ohne-bild .sz-kachel__bild { display: none; }

.woocommerce ul.products li.product.sz-ohne-bild,
ul.products li.product.sz-ohne-bild {
    padding-top: 1.1rem;
    border-top: 1px solid var(--sz-border-strong);
}

.woocommerce ul.products li.product.sz-ohne-bild .sz-kachel__marke,
ul.products li.product.sz-ohne-bild .sz-kachel__marke { margin-top: 0; }

/* Die Erklaerung, wo sonst der Kamerarahmen stuende. */
.sz-scan__kasten--oben {
    margin: 0 0 1.5rem;
    padding: 1.25rem 1.5rem;
    border: 1px solid var(--sz-border-strong);
    border-left: 2px solid var(--sz-bordeaux);
    border-radius: var(--sz-radius);
    background: var(--sz-surface);
    font-size: 0.92rem;
    line-height: 1.7;
}


/* ===================================================================
   Die leere Erfassungszeile
   ===================================================================

   Solange nichts erfasst ist, standen dort ein Mengenwaehler, ein
   Entfernen-Kreuz und zwei Striche — bevor irgendetwas eingegeben war.
   Das las sich wie eine Bestellung, die schon drinsteht.

   Ich hatte das zuerst nur fuer schmale Schirme abgestellt. Das war
   halb gedacht: am Schreibtisch steht derselbe Unsinn. Jetzt ueberall.

   visibility statt display, damit die Spalten der Tabelle stehen
   bleiben — sonst springt die Kopfzeile, sobald der erste Artikel
   gefunden ist. Auf dem Telefon ist es keine Tabelle mehr, dort darf
   es display: none sein.
*/

.sz-erfassung__zeile.ist-leer .sz-erfassung__bestand,
.sz-erfassung__zeile.ist-leer .sz-erfassung__mengezelle,
.sz-erfassung__zeile.ist-leer .sz-erfassung__zeilensumme,
.sz-erfassung__zeile.ist-leer .sz-erfassung__loeschzelle {
    visibility: hidden;
}

.sz-erfassung__zeile.ist-leer .sz-erfassung__was {
    color: var(--sz-ink-soft);
    font-size: 0.88rem;
}

@media (max-width: 700px) {
    .sz-erfassung__zeile.ist-leer .sz-erfassung__bestand,
    .sz-erfassung__zeile.ist-leer .sz-erfassung__mengezelle,
    .sz-erfassung__zeile.ist-leer .sz-erfassung__zeilensumme,
    .sz-erfassung__zeile.ist-leer .sz-erfassung__loeschzelle {
        display: none;
    }
}

/* ===================================================================
   Der Liefertermin: eckig, nicht oval
   ===================================================================

   Die Kapselregel aus 1.23.0 macht jeden Knopf rund. Fuer Knoepfe ist
   das richtig — fuer ein Auswahlfeld nicht. Tag und Zeitfenster sind
   keine Knoepfe, die etwas ausloesen, sondern Felder, die man ankreuzt;
   ein Kalender liest sich als Raster, nicht als Reihe von Pillen.

   Der Knopf zur Kasse darunter bleibt rund. Er loest wirklich etwas
   aus, und die Regel gilt weiterhin fuer alles ausser dem Warenkorb.
*/

.sz-tag,
.sz-fenster { border-radius: var(--sz-radius) !important; }

/* --- Der Knopf, der weiterfuehrt ------------------------------------
 *
 * Vorher endete die Auswahl im Nichts: man tippte Tag und Fenster an
 * und stand dann da. Dass oben im Warenkorb ein Knopf wartet, sieht
 * niemand, der gerade unten gewaehlt hat.
 *
 * Gesperrt statt versteckt, solange etwas fehlt: wer ihn sieht, weiss,
 * dass es weitergeht — und wonach.
 */

.sz-termin__abschluss {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 1.75rem;
}

.sz-termin__weiter {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.95rem 1.9rem;
    border: 0;
    border-radius: 999px;
    background: var(--sz-bordeaux);
    color: var(--sz-bordeaux-fg);
    font-family: var(--sz-body);
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    transition: filter 0.15s ease;
}

.sz-termin__weiter:hover,
.sz-termin__weiter:focus-visible { color: var(--sz-bordeaux-fg); filter: brightness(1.1); }

.sz-termin__weiter[aria-disabled="true"] {
    background: var(--sz-muted);
    color: var(--sz-ink-soft);
    cursor: not-allowed;
    filter: none;
}

.sz-termin__abschluss .sz-termin__fein { margin: 0; }

@media (max-width: 560px) {
    .sz-termin__abschluss { flex-direction: column; align-items: stretch; }
    .sz-termin__weiter { justify-content: center; }
}


/* ===================================================================
   Die Chips: Symbol, kleiner, mit Schalter
   ===================================================================

   Zehn Kategorien untereinander sind auf dem Telefon eine
   Bildschirmlaenge. Kommen weitere dazu, scrollt man an den Waren
   vorbei statt zu ihnen. Drei Sachen dagegen:

   Ein Symbol je Gruppe — gezeichnet, in der Farbe der Zeile. Wer den
   Katalog kennt, findet die Rolle schneller als das Wort.

   Kleinere Chips auf schmalen Schirmen, sodass zwei nebeneinander
   passen statt einer allein.

   Und ab dem neunten ein Schalter. Ein Kaestchen mit Beschriftung
   statt eines Skripts: keine weitere Datei, keine Wartezeit, und es
   geht auch, wenn ein Skript nicht laedt.
*/

.sz-chip__symbol {
    width: 1.05rem;
    height: 1.05rem;
    flex: none;
    align-self: center;
    opacity: 0.7;
}

.sz-chip[aria-current] .sz-chip__symbol { opacity: 1; }

/* --- Der Schalter fuer den Rest -------------------------------------- */

.sz-chips__schalter {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.sz-chip--mehr {
    cursor: pointer;
    border-style: dashed;
    color: var(--sz-bordeaux-text);
    -webkit-user-select: none;
    user-select: none;
}

.sz-chip--mehr:hover { border-color: var(--sz-bordeaux); }

/* Der Fokus liegt am unsichtbaren Kaestchen — sichtbar wird er am
   Schild daneben, sonst sieht man beim Tabben nichts. */
.sz-chips__schalter:focus-visible ~ .sz-chip--mehr {
    outline: 2px solid var(--sz-bordeaux);
    outline-offset: 2px;
}

.sz-mehr--zu { display: none; }

.sz-chips__schalter:checked ~ .sz-chip--mehr .sz-mehr--auf { display: none; }
.sz-chips__schalter:checked ~ .sz-chip--mehr .sz-mehr--zu  { display: inline; }

@media (max-width: 899px) {
    .sz-chip--rest { display: none; }
    .sz-chips__schalter:checked ~ .sz-chip--rest { display: inline-flex; }

    .sz-band .sz-chips { gap: 0.4rem; }

    .sz-chip {
        gap: 0.4rem;
        padding: 0.42rem 0.72rem;
        font-size: 0.79rem;
    }

    .sz-chip__symbol { width: 0.95rem; height: 0.95rem; }
    .sz-chip__zahl { font-size: 0.64rem; }
}

/* Am Schreibtisch ist Platz — dort steht alles offen und der Schalter
   waere nur ein Klick ohne Zweck. */
@media (min-width: 900px) {
    .sz-chip--mehr { display: none; }
}


/* ===================================================================
   Die Sortierung als Blatt von unten
   ===================================================================

   Auf dem Telefon war die Liste ein kleines Aufklappmenue, das ueber
   den Waren haengen blieb und sich nicht wegdruecken liess. Jetzt
   kommt sie als Blatt von unten — dieselbe Geste wie beim Menue, mit
   einem Schleier dahinter, den man antippt, um sie zu schliessen.
*/

@keyframes sz-blatt-hoch {
    from { transform: translateY(100%); }
    to   { transform: none; }
}

@media (max-width: 899px) {
    .sz-sortierung__grund { background: rgba(0, 0, 0, 0.45); }

    .sz-sortierung__liste.ist-blatt {
        top: auto !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0;
        min-width: 0;
        max-height: 76vh;
        overflow-y: auto;
        border-inline: 0;
        border-bottom: 0;
        border-radius: 1.25rem 1.25rem 0 0;
        padding-bottom: calc(0.75rem + env(safe-area-inset-bottom, 0px));
        box-shadow: 0 -18px 44px rgba(0, 0, 0, 0.28);
        animation: sz-blatt-hoch 300ms cubic-bezier(0.22, 1, 0.36, 1);
    }

    /* Der Griff, den jedes Telefon fuer "das laesst sich ziehen" nimmt. */
    .sz-sortierung__liste.ist-blatt .sz-sortierung__titel {
        position: relative;
        padding-top: 1.6rem;
        text-align: center;
    }

    .sz-sortierung__liste.ist-blatt .sz-sortierung__titel::before {
        content: "";
        position: absolute;
        top: 0.7rem;
        left: 50%;
        width: 2.5rem;
        height: 4px;
        transform: translateX(-50%);
        border-radius: 999px;
        background: var(--sz-border-strong);
    }

    /* Getippt wird mit dem Daumen, nicht gezielt. */
    .sz-sortierung__liste.ist-blatt .sz-sortierung__wahl {
        padding: 1rem 1.25rem !important;
        font-size: 1rem;
        white-space: normal;
    }
}

@media (prefers-reduced-motion: reduce) {
    .sz-sortierung__liste.ist-blatt { animation: none; }
}


/* ===================================================================
   Die App-Karte im Konto
   ===================================================================

   Sie steht unter den Kennzahlen, nicht darüber: wer sein Konto
   aufmacht, will zuerst wissen, was offen ist. Das Ablegen auf dem
   Startbildschirm tut man einmal.

   Abgesetzt durch eine eigene Fläche — es ist der einzige Abschnitt
   dort, der nicht von Bestellungen handelt, sondern vom Gerät.
*/

.sz-appkarte {
    margin-top: 3rem;
    padding: 1.75rem;
    border: 1px solid var(--sz-border);
    border-radius: var(--sz-radius);
    background: var(--sz-muted);
}

.sz-appkarte__titel {
    margin: 0.75rem 0 0;
    font-family: var(--sz-display);
    font-weight: 400;
    font-size: clamp(1.4rem, 3vw, 1.9rem);
    line-height: 1.1;
}

.sz-appkarte__lead {
    margin: 0.75rem 0 0;
    max-width: 46ch;
    line-height: 1.7;
    color: var(--sz-ink-soft);
}

.sz-appkarte__gemerkt {
    margin: 1rem 0 0;
    padding: 0.7rem 1rem;
    border-left: 3px solid var(--sz-bordeaux);
    background: var(--sz-bordeaux-soft);
    color: var(--sz-bordeaux-text);
    font-size: 0.88rem;
}

.sz-appkarte__form { margin-top: 1.75rem; }

.sz-appkarte__frage {
    display: block;
    font-family: var(--sz-mono);
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--sz-ink-soft);
}

.sz-appkarte__zeile {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    margin-top: 0.75rem;
}

/* Das Feld darf nicht über die Karte hinauswachsen, aber auch nicht so
   schmal werden, dass "Schnellerfassung" abgeschnitten dasteht. */
.sz-appkarte__zeile select {
    box-sizing: border-box;
    flex: 1 1 14rem;
    min-width: 0;
    max-width: 22rem;
    padding: 0.7rem 1rem;
    border: 1px solid var(--sz-border-strong);
    background: var(--sz-surface);
    color: var(--sz-ink);
    font-family: var(--sz-body);
    font-size: 0.95rem;
}

.sz-appkarte__knopf {
    box-sizing: border-box;
    flex: none;
    padding: 0.7rem 1.6rem;
    border: 0;
    border-radius: 999px;
    background: var(--sz-bordeaux);
    color: var(--sz-bordeaux-fg);
    font-family: var(--sz-body);
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
}

.sz-appkarte__knopf:hover { filter: brightness(1.08); }

.sz-appkarte__fein {
    margin: 0.9rem 0 0;
    max-width: 52ch;
    font-size: 0.82rem;
    line-height: 1.6;
    color: var(--sz-ink-soft);
}

/* --- Die zwei Wege ---------------------------------------------------
 *
 * Nebeneinander, weil niemand beide braucht: man hat entweder ein
 * iPhone oder ein Android-Gerät und überliest die andere Spalte.
 */

.sz-appkarte__wege {
    display: grid;
    gap: 1.5rem;
    margin-top: 1.75rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--sz-border);
}

@media (min-width: 720px) {
    .sz-appkarte__wege { grid-template-columns: 1fr 1fr; gap: 2.5rem; }
}

.sz-appkarte__wegtitel {
    margin: 0;
    font-family: var(--sz-mono);
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--sz-ink);
}

.sz-appkarte__schritte {
    margin: 0.75rem 0 0;
    padding-left: 1.2rem;
    font-size: 0.88rem;
    line-height: 1.7;
    color: var(--sz-ink-soft);
}

.sz-appkarte__schritte li { margin-bottom: 0.35rem; }

@media (max-width: 700px) {
    .sz-appkarte { padding: 1.25rem; }
    .sz-appkarte__zeile select { flex-basis: 100%; max-width: none; }
    .sz-appkarte__knopf { width: 100%; }
}


/* ===================================================================
   Warenkorb und Kasse auf dem Telefon
   ===================================================================

   Sie standen zu weit links, und zwar messbar: der Block traegt auf
   schmalen Schirmen margin-left und margin-right von -20px — er soll
   sich aus der Polsterung des Rahmens herausziehen und ueber die ganze
   Breite gehen.

   Nur wird er dabei nicht breiter. Seine Breite bleibt die des
   Elternteils, also 335px in einem 375px-Fenster. Das Ergebnis ist kein
   Vollbild, sondern eine Verschiebung: links klebt er am Rand, rechts
   bleiben vierzig Bildpunkte leer.

   Am Schreibtisch stehen dieselben Raender auf 0 — dort war nie etwas
   falsch, und dort aendert sich auch nichts.
*/

@media (max-width: 921px) {
    .wp-block-woocommerce-cart,
    .wp-block-woocommerce-checkout,
    .wp-block-woocommerce-cart.alignwide,
    .wp-block-woocommerce-checkout.alignwide {
        margin-left: 0;
        margin-right: 0;
        max-width: 100%;
    }

    /* Die zwei Karten — Summen im Korb, Bestelluebersicht in der Kasse —
       duerfen auf dem Telefon weniger Polsterung haben; sonst bleibt fuer
       die Zahlen selbst zu wenig uebrig. */
    .wc-block-cart__sidebar,
    .wc-block-checkout__sidebar,
    .woocommerce-cart .cart_totals,
    .woocommerce-checkout #order_review {
        padding: 1.15rem;
    }
}