/* ==========================================================================
   Shop
   ========================================================================== */

.woocommerce-breadcrumb {
  font-size: var(--step--1); color: var(--c-text-muted);
  margin-block-end: var(--space-m);
}
.woocommerce-breadcrumb a { color: var(--c-text-muted); }

/* --- Produktliste ---------------------------------------------------------- */
ul.products {
  list-style: none; padding: 0; display: grid; gap: var(--space-m);
  grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr));
}
ul.products li.product {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-bottom: 3px solid var(--c-gold);
  border-radius: var(--radius);
  display: flex; flex-direction: column;
  overflow: hidden;
  transition: box-shadow .15s ease;
}
ul.products li.product:hover { box-shadow: var(--shadow-card); }
ul.products li.product > a { text-decoration: none; display: block; }
ul.products li.product img { aspect-ratio: 1; object-fit: contain; background: #fff; padding: var(--space-s); }
/* Einzug einmal für alle Textelemente der Kachel.
   Vorher bekamen nur Titel und Preis einen Innenabstand — alles, was
   German Market zusätzlich ausgibt (Steuersatz, Versandhinweis), klebte
   am linken Rand. Die Regel greift für alles außer Bild und Knopf,
   also auch für künftige Ergänzungen. */
ul.products li.product > a > *:not(img),
ul.products li.product > *:not(a):not(img) {
  padding-inline: var(--space-s);
}
ul.products li.product .woocommerce-loop-product__title {
  font-size: var(--step-0); font-weight: var(--fw-semibold);
  color: var(--c-primary); padding-block: var(--space-2xs) 0;
  line-height: 1.35;
}
ul.products li.product .price {
  display: block; padding-block: var(--space-2xs);
  color: var(--c-primary); font-weight: var(--fw-semibold);
}

/* Die Rechtshinweise treten hinter Titel und Preis zurück. */
ul.products li.product .woocommerce-de_price_taxrate,
ul.products li.product .wgm-info,
ul.products li.product .shipping_de_string,
ul.products li.product .additional-info {
  font-size: var(--step--1); color: var(--c-text-muted); line-height: 1.4;
}
ul.products li.product .ab-preis__basis { padding-inline: 0; }
ul.products li.product .price del { color: var(--c-text-muted); font-weight: var(--fw-regular); }
/* Alle Knöpfe einer Reihe auf einer Linie: Die Lücke davor wächst, der Knopf
   selbst bekommt keinen Außenabstand nach oben. Bis 0.23.2 hob
   margin-block-start das "auto" wieder auf — der Knopf folgte dem Text. */
ul.products li.product > .kachel-luecke { flex: 1 0 var(--space-s); padding: 0; }
ul.products li.product .button { margin: 0 var(--space-s) var(--space-s); }

/* --- Produktseite ---------------------------------------------------------- */
.single-product div.product {
  display: grid; gap: var(--space-xl);
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: start;
}
@media (max-width: 860px) {
  .single-product div.product { grid-template-columns: minmax(0, 1fr); gap: var(--space-l); }
}

/* Rasterfelder dürfen nicht mit ihrem Inhalt mitwachsen.
   1fr bedeutet minmax(auto, 1fr) — eine breite Tabelle im Inhalt zieht die
   Spalte dann über den Bildschirmrand hinaus, und weil html/body auf
   overflow-x: hidden stehen, wird alles rechts stillschweigend abgeschnitten
   statt scrollbar zu sein. minmax(0, …) verhindert genau das. */
.single-product div.product > *,
.single-product .summary,
.single-product .woocommerce-tabs { min-inline-size: 0; }
/* font-family entfällt — h1 ist seit 0.9.14 ohnehin Inter. */
.single-product .product_title { font-size: var(--step-3); }
.single-product .price { font-size: var(--step-2); color: var(--c-primary); font-weight: var(--fw-semibold); }
.single-product .summary > * + * { margin-block-start: var(--space-s); }
.woocommerce-product-gallery { background: #fff; border: 1px solid var(--c-border); border-radius: var(--radius); }

/* Tabs */
.woocommerce-tabs { grid-column: 1 / -1; margin-block-start: var(--space-xl); }
.woocommerce-tabs ul.tabs {
  list-style: none; padding: 0; display: flex; gap: var(--space-s);
  border-bottom: 1px solid var(--c-border); flex-wrap: wrap;
}
.woocommerce-tabs ul.tabs li a {
  display: block; padding: var(--space-2xs) var(--space-xs);
  text-decoration: none; font-weight: var(--fw-medium);
  border-bottom: 2px solid transparent; margin-block-end: -1px;
}
.woocommerce-tabs ul.tabs li.active a { border-bottom-color: var(--c-gold); color: var(--c-primary); }
.woocommerce-tabs .panel { padding-block-start: var(--space-m); }

/* Technische Daten */
.tech-tabelle { border-collapse: collapse; width: min(100%, 640px); }
.tech-tabelle th, .tech-tabelle td {
  text-align: left; padding: var(--space-2xs) var(--space-s);
  border-bottom: 1px solid var(--c-border); vertical-align: top;
}
.tech-tabelle th { font-weight: var(--fw-medium); color: var(--c-text-muted); width: 44%; }

/* --- Warenkorb und Kasse ---------------------------------------------------- */
.woocommerce table.shop_table {
  border-collapse: collapse; width: 100%; background: var(--c-surface);
  border: 1px solid var(--c-border);
}
.woocommerce table.shop_table th, .woocommerce table.shop_table td {
  padding: var(--space-xs) var(--space-s); border-bottom: 1px solid var(--c-border);
  text-align: left;
}
.woocommerce table.shop_table th { font-weight: var(--fw-semibold); color: var(--c-primary); }

/* Rabattkette je Position — das Werkzeug, mit dem Rechenfehler auffallen */
.rabattkette { font-size: var(--step--1); color: var(--c-text-muted); margin-block-start: var(--space-3xs); }
.rabattkette li { display: flex; justify-content: space-between; gap: var(--space-s); max-width: 28rem; }

/* ==========================================================================
   Ergänzungen, nachdem die WooCommerce-Stylesheets entfallen sind.
   Alles, was von dort kam, muss hier selbst stehen.
   ========================================================================== */

/* --- Kopfzeile der Produktliste -------------------------------------------
   Auf Shop- und Kategorieseiten steht die Ware im Vordergrund, nicht die
   Überschrift. Deshalb hier bewusst Inter statt der Display-Schrift. */
.woocommerce-products-header { margin-block-end: var(--space-s); }
.woocommerce-products-header__title,
.woocommerce-products-header h1 {
  /* Das !important auf der Schriftart ist entfallen: Es hat eine Regel
     zurückgedreht, die es nicht mehr gibt. */
  font-size: var(--step-2) !important;
  font-weight: var(--fw-semibold);
  letter-spacing: 0;
}
.term-description { max-width: var(--measure); color: var(--c-text-muted); }

.woocommerce-result-count {
  float: none; margin: 0;
  font-size: var(--step--1); color: var(--c-text-muted);
}
.woocommerce-ordering { margin: 0; }
.woocommerce-ordering select {
  font-size: var(--step--1); padding: var(--space-3xs) var(--space-2xs);
  border: 1px solid var(--c-border); border-radius: var(--radius);
  background: var(--c-surface); color: var(--c-text);
}
/* Zähler und Sortierung in einer Zeile.
   WooCommerce gibt beide als Geschwister aus; ohne eigenen Rahmen floaten sie
   über die erste Produktkachel. Deshalb wird die Zeile per Grid aufgespannt. */
.woocommerce-result-count,
.woocommerce-ordering { float: none !important; margin: 0 !important; }

.shop-leiste {
  display: flex; justify-content: space-between; align-items: center;
  gap: var(--space-s); flex-wrap: wrap;
  margin-block: var(--space-s) var(--space-m);
  padding-block-end: var(--space-2xs);
  border-bottom: 1px solid var(--c-border);
}

/* --- Produktkacheln: Floats von WooCommerce neutralisieren ---------------- */
ul.products::before, ul.products::after { content: none; }
ul.products li.product {
  float: none !important;
  width: auto !important;
  margin: 0 !important;
  clear: none !important;
}
ul.products li.product .woocommerce-loop-product__title {
  /* Umbruch nur wo nötig, nicht mitten im Wort */
  overflow-wrap: break-word; hyphens: auto;
}
ul.products li.product .onsale,
.single-product .onsale {
  position: absolute; z-index: 2;
  background: var(--c-primary); color: #fff;
  font-size: var(--step--1); font-weight: var(--fw-semibold);
  padding: var(--space-3xs) var(--space-2xs); border-radius: var(--radius);
  margin: var(--space-2xs);
}
ul.products li.product { position: relative; }

/* Preis: Steuerhinweis nicht umbrechen lassen */
.woocommerce-Price-amount { white-space: nowrap; }
.woocommerce-price-suffix, small.includes_tax {
  display: block; font-size: var(--step--1);
  font-weight: var(--fw-regular); color: var(--c-text-muted);
}

/* --- Blättern -------------------------------------------------------------- */
.woocommerce-pagination ul, .wp-block-query-pagination {
  display: flex; gap: var(--space-2xs); list-style: none; padding: 0;
  margin-block-start: var(--space-xl); flex-wrap: wrap;
}
.woocommerce-pagination a, .woocommerce-pagination span {
  display: block; padding: var(--space-3xs) var(--space-xs);
  border: 1px solid var(--c-border); border-radius: var(--radius);
  background: var(--c-surface); text-decoration: none;
}
.woocommerce-pagination .current {
  background: var(--c-primary); color: #fff; border-color: var(--c-primary);
}

/* --- Mengenfeld ------------------------------------------------------------ */
.quantity input[type="number"] {
  width: 5rem; padding: var(--space-2xs);
  border: 1px solid var(--c-border); border-radius: var(--radius);
  background: var(--c-surface);
}
form.cart { display: flex; gap: var(--space-2xs); align-items: center; flex-wrap: wrap; }

/* --- Galerie --------------------------------------------------------------- */
.woocommerce-product-gallery__wrapper { margin: 0; }
.woocommerce-product-gallery__image img { width: 100%; }
.flex-control-thumbs {
  display: flex; gap: var(--space-2xs); list-style: none;
  padding: var(--space-2xs); margin: 0; flex-wrap: wrap;
}
.flex-control-thumbs li { width: 64px; }

/* --- Verwandte Produkte ----------------------------------------------------- */
.related, .upsells { grid-column: 1 / -1; margin-block-start: var(--space-2xl); }
.related > h2, .upsells > h2 { margin-block-end: var(--space-m); }

/* --- Hinweis auf den gefilterten Katalog --------------------------------- */
.welt-hinweis {
  font-size: var(--step--1); color: var(--c-text-muted);
  background: var(--c-surface); border-inline-start: 3px solid var(--c-gold);
  padding: var(--space-2xs) var(--space-s);
  margin-block-end: var(--space-s); max-width: none;
}
.welt-hinweis strong { color: var(--c-primary); }
.welt-hinweis__satz { margin: 0; max-width: none; }

/* Die Bereichsauswahl unter dem Satz. Kleine Knöpfe, keine Verweise in einer
   Textzeile: Was man anklicken soll, muss aussehen wie etwas zum Anklicken —
   und mit dem Finger muss man es treffen können. */
.welt-hinweis__wahl {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--space-3xs); margin: var(--space-2xs) 0 0; max-width: none;
}

.welt-hinweis__wort { color: var(--c-text-muted); margin-inline-end: var(--space-3xs); }

.welt-hinweis__knopf {
  display: inline-block; margin: 0;
  padding: 0.3rem 0.7rem; border-radius: var(--radius);
  border: 1px solid var(--c-border, #E2DFD8);
  background: #fff; color: var(--c-primary);
  text-decoration: none; line-height: 1.3;
}

/* Der Weg in den Konfigurator — eigene Zeile, durch eine Linie abgesetzt. */
.welt-hinweis__konf {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--space-2xs) var(--space-s);
  margin: var(--space-2xs) 0 0; padding-block-start: var(--space-2xs);
  border-top: 1px solid var(--c-border, #E2DFD8); max-width: none;
}
.welt-hinweis__konf span { color: var(--c-text); }
.welt-hinweis__konf-knopf { font-size: var(--step--1); padding: 0.45rem 1rem; white-space: nowrap; }

.welt-hinweis__knopf:hover { border-color: var(--c-primary); color: var(--c-primary); }

/* Der aktive Bereich ist kein Knopf mehr, sondern eine Angabe. Deshalb
   gefüllt statt umrandet — man sieht auf einen Blick, wo man steht. */
.welt-hinweis__knopf.ist-aktiv {
  background: var(--c-primary); border-color: var(--c-primary);
  color: #fff; font-weight: var(--fw-semibold);
}

/* --- Gewährleistungs-Hinweisfeld ----------------------------------------- */
/* Gestaffelte Darstellung: ruhige Zeile, Grafik erst auf Klick.
   Die Verordnung erlaubt das, solange das Feld vollständig erscheint. */
.gewaehrleistung { margin-block: var(--space-s); max-width: 34rem; }

.gewaehrleistung__zeile {
  cursor: pointer; list-style: none;
  display: flex; align-items: center; gap: var(--space-2xs);
  font-size: var(--step--1); color: var(--c-text-muted);
  padding-block: var(--space-3xs);
}
.gewaehrleistung__zeile::-webkit-details-marker { display: none; }

/* Eigener Pfeil, damit er in beiden Zuständen gleich sitzt. */
.gewaehrleistung__zeile::before {
  content: ""; inline-size: 0; block-size: 0;
  border-inline-start: 5px solid currentColor;
  border-block: 4px solid transparent;
  transition: transform .15s ease;
}
.gewaehrleistung[open] .gewaehrleistung__zeile::before { transform: rotate(90deg); }
.gewaehrleistung__zeile:hover { color: var(--c-primary); }
.gewaehrleistung__zeile:focus-visible {
  outline: 2px solid var(--c-gold); outline-offset: 2px;
}

.gewaehrleistung__feld { padding-block-start: var(--space-2xs); }
.gewaehrleistung__feld img {
  display: block; inline-size: 100%; block-size: auto; max-inline-size: 26rem;
}

/* Im Ausdruck ist nichts aufklappbar - also immer zeigen. */
@media print {
  .gewaehrleistung__feld { display: block !important; }
}

/* --- "ab"-Preis ----------------------------------------------------------- */
/* Der Monatspreis trägt, die Grundlage steht klein darunter. Die Gesamtsumme
   muss mit, sonst bewirbt man bei befristeten Verträgen nur die Rate. */
.ab-preis { display: block; }
.ab-preis__wert { font-weight: 600; }
.ab-preis__einheit { font-weight: 600; }
.ab-preis__basis {
  display: block; font-size: var(--step--1); font-weight: 400;
  color: var(--c-text-muted); margin-block-start: var(--space-3xs);
}

/* --- Laufzeitvergleich ---------------------------------------------------- */
.laufzeiten {
  inline-size: 100%; border-collapse: collapse;
  margin-block: var(--space-s); font-size: var(--step--1);
  max-inline-size: 30rem;
}
.laufzeiten caption {
  text-align: start; font-weight: 600; color: var(--c-primary);
  padding-block-end: var(--space-2xs);
}
.laufzeiten th, .laufzeiten td {
  padding: var(--space-2xs) var(--space-xs);
  border-block-end: 1px solid var(--c-border);
  text-align: end;
}
.laufzeiten thead th { color: var(--c-text-muted); font-weight: 400; }
.laufzeiten th[scope="row"] { text-align: start; font-weight: 500; }
.laufzeiten__beste { background: var(--c-surface); }
.laufzeiten__beste td, .laufzeiten__beste th { font-weight: 600; color: var(--c-primary); }

/* --- Mengenrabatt-Hinweis ------------------------------------------------- */
.mengenhinweis {
  font-size: var(--step--1); color: var(--c-text-muted);
  border-inline-start: 3px solid var(--c-gold);
  padding: var(--space-2xs) var(--space-s);
  margin-block: var(--space-s); max-inline-size: 34rem;
}

/* --- Haupt- und Zusatzpaket ------------------------------------------------ */
/* Auf dem Zusatzpaket: kräftiger als der Mengenhinweis. Der Mengenhinweis ist
   ein Angebot, dieser Block verhindert eine Fehlbestellung. */
.zusatz-hinweis {
  font-size: var(--step--1);
  border-inline-start: 3px solid var(--c-primary);
  background: var(--c-surface-alt, rgba(0, 0, 0, 0.03));
  padding: var(--space-xs) var(--space-s);
  margin-block: var(--space-s); max-inline-size: 34rem;
}
.zusatz-hinweis p { margin-block: 0; }
.zusatz-hinweis__kopf strong { color: var(--c-primary); }
.zusatz-hinweis__weg { margin-block-start: var(--space-2xs) !important; }

/* Auf dem Hauptpaket: eine Zeile, die sich nicht vordrängt. Ein zweites
   Angebot neben dem Preis lädt zum Vergleichen ein — genau das nicht. */
.zusatz-weg {
  font-size: var(--step--1); color: var(--c-text-muted);
  margin-block: var(--space-s); max-inline-size: 34rem;
}
.zusatz-weg__preis,
.zusatz-hinweis__preis,
.zusatz-liste__preis { white-space: nowrap; color: var(--c-text-muted); }

/* Auf der Kachel muss es klein bleiben, sonst wächst die Kachel und die
   Preiszeile rutscht aus der Reihe. */
.zusatz-marke {
  display: block;
  font-size: var(--step--2); font-weight: 600;
  letter-spacing: 0.02em; text-transform: uppercase;
  color: var(--c-text-muted);
  margin-block-start: var(--space-3xs);
}

/* Seite für Bestandskunden, [gpsi_zusatzpakete] */
.zusatz-liste { list-style: none; padding: 0; margin-block: var(--space-s); }
.zusatz-liste li {
  padding-block: var(--space-2xs);
  border-block-end: 1px solid var(--c-border);
}
.zusatz-liste a { font-weight: 600; }

/* --- Warenkorb am Telefon --------------------------------------------------
 *
 * Der Warenkorb-Block behält seine drei Spalten auch auf schmalen Geräten:
 * Bild, Produkt, Gesamtsumme. Auf 390 Pixeln bleiben für die mittlere Spalte
 * rund 60 Pixel — "GPS-Tracking Standard" bricht dort mitten im Wort auf vier
 * Zeilen. Lesbar ist das nicht, und premium schon gar nicht.
 *
 * Statt die Spalten schmaler zu machen, fällt die dritte weg. Die Zeile wird
 * zu einem Raster: links ein kleines Bild, rechts alles zum Produkt, darunter
 * über die ganze Breite der Betrag und die Mengenwahl.
 *
 * Warum nicht einfach die Breiten anpassen: Drei Spalten sind auf einem Handy
 * kein Platzproblem, sondern das falsche Format. Jede Spalte braucht Rand,
 * jeder Rand fehlt dem Text. Zwei Spalten mit einem 72-Pixel-Bild lassen rund
 * 290 Pixel für den Namen — das Vierfache von heute.
 *
 * Gewählt ist 46rem statt eines Pixelwerts, damit die gestapelte Ansicht auch
 * dann greift, wenn jemand die Schrift im Browser vergrößert hat. Dann ist
 * der Platz genauso knapp, nur aus einem anderen Grund.
 *
 * ---------------------------------------------------------------------------
 * Warum hier !important steht, und warum das ausnahmsweise richtig ist:
 *
 * Die erste Fassung dieser Regeln lag auf dem Server und bewirkte nichts. Der
 * Grund war weder Datei noch Zwischenspeicher: WooCommerce lädt das
 * Stylesheet seiner Blöcke erst beim Zeichnen des Blocks, also NACH dem
 * Theme. Bei gleich schweren Regeln gewinnt die spätere — und die Regeln von
 * WooCommerce wiegen genauso viel wie diese hier, eine einzelne Klasse.
 *
 * Das ist kein Streit über Gestaltung, sondern über Ladereihenfolge. !important
 * ist dafür das richtige Mittel; eine künstlich verschachtelte Auswahl wäre
 * nur eine schwerer lesbare Form desselben Vorrangs.
 *
 * Gesetzt wird es ausschließlich auf die Eigenschaften, die das Raster
 * aufspannen. Farben, Abstände und Schriftgrößen bleiben normal gewichtet und
 * lassen sich weiterhin überschreiben.
 * ---------------------------------------------------------------------------
 */
@media (max-width: 46rem) {

  /* Breiter als das Fenster darf nichts werden. Sonst steht der Betrag rechts
     außerhalb des Bildschirms, und niemand sieht, dass dort etwas fehlt. */
  .wc-block-cart,
  .wc-block-checkout,
  .wc-block-checkout__main,
  .wc-block-checkout__sidebar {
    max-inline-size: 100%;
    min-inline-size: 0;
  }

  .wc-block-cart-items,
  .wc-block-cart-items tbody,
  .wc-block-cart-items__row {
    display: block !important;
    inline-size: 100%;
  }

  /* Die Kopfzeile "PRODUKT / GESAMTSUMME" beschriftet Spalten, die es hier
     nicht mehr gibt. */
  .wc-block-cart-items thead { display: none !important; }

  .wc-block-cart-items__row {
    display: grid !important;
    grid-template-columns: 72px minmax(0, 1fr) !important;
    gap: var(--space-2xs) var(--space-s);
    align-items: start;
    padding-block: var(--space-s);
    border-block-end: 1px solid var(--c-border);
  }

  .wc-block-cart-items__row > td,
  .wc-block-cart-item__image,
  .wc-block-cart-item__product,
  .wc-block-cart-item__total {
    display: block !important;
    padding: 0;
    border: 0;
    inline-size: auto !important;
    max-inline-size: 100%;
  }

  .wc-block-cart-item__image { grid-column: 1 !important; grid-row: 1 !important; }
  .wc-block-cart-item__image img { inline-size: 72px; block-size: auto; }

  .wc-block-cart-item__product {
    grid-column: 2 !important;
    grid-row: 1 !important;
    min-inline-size: 0;
  }

  /* Der Betrag über die ganze Breite, rechtsbündig — dort sucht ihn das Auge,
     und dort steht er auch in der Summe weiter unten. */
  .wc-block-cart-item__total {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    text-align: end;
  }

  /* Produktname: an Leerzeichen und Bindestrichen brechen, nicht im Wort.
     Nur wenn ein einzelnes Wort wirklich nicht passt, darf es brechen. */
  .wc-block-components-product-name {
    display: inline-block;
    font-size: var(--step-0);
    line-height: 1.3;
    word-break: normal;
    overflow-wrap: break-word;
    hyphens: auto;
  }

  /* Preis und Streichpreis in einer Zeile halten. Im Dreispalter brach schon
     das Währungszeichen vom Betrag ab. */
  .wc-block-components-product-price { display: block; }
  .wc-block-components-product-price__regular,
  .wc-block-components-product-price__value { white-space: nowrap; }

  /* Mengenwahl und Papierkorb unter den Produktangaben, nicht daneben. */
  .wc-block-cart-item__quantity { margin-block-start: var(--space-2xs); }

  /*
   * Dasselbe für die Bestellübersicht an der Kasse.
   *
   * Sie sieht aus wie der Warenkorb, ist aber ein anderer Block mit eigenen
   * Klassennamen — eine Regel für den Warenkorb greift dort nicht.
   *
   * Der Betrag wird in zwei Fassungen angesprochen: Je nach Version steht er
   * als "__total-price" unmittelbar im Raster oder in einer Hülle "__total".
   * Beide Namen zu nennen kostet nichts und erspart die nächste Runde.
   */
  .wc-block-components-order-summary-item {
    display: grid !important;
    grid-template-columns: 56px minmax(0, 1fr) !important;
    gap: var(--space-2xs) var(--space-s);
    align-items: start;
  }

  .wc-block-components-order-summary-item__image {
    grid-column: 1 !important;
    grid-row: 1 !important;
    inline-size: 56px;
  }

  .wc-block-components-order-summary-item__description {
    grid-column: 2 !important;
    grid-row: 1 !important;
    min-inline-size: 0;
  }

  .wc-block-components-order-summary-item__total,
  .wc-block-components-order-summary-item__total-price {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    text-align: end;
    inline-size: auto !important;
  }

  /*
   * Versand- und Zahlungsarten.
   *
   * Dieselbe Ursache, anderer Block: Beschriftung links, Betrag rechts, und
   * weil keines von beiden schrumpfen darf, wird die Zeile breiter als der
   * Bildschirm. "Enthält € 1,20 USt (20 %)" stand deshalb halb außerhalb.
   */
  .wc-block-components-radio-control__option {
    min-inline-size: 0;
    max-inline-size: 100%;
  }

  .wc-block-components-radio-control__label,
  .wc-block-components-radio-control__secondary-label,
  .wc-block-components-radio-control__description,
  .wc-block-components-radio-control__secondary-description {
    min-inline-size: 0;
    overflow-wrap: break-word;
  }
}

/* Die selbst gebaute Technik- und Laufzeittabelle bleibt normal umbrechend. */
.tech-tabelle, .laufzeiten { display: table; }
.tech-tabelle th, .tech-tabelle td,
.laufzeiten th, .laufzeiten td { white-space: normal; inline-size: auto; }

/* Bilder und eingebettete Inhalte aus Fremdtexten */
.woocommerce-Tabs-panel img,
.woocommerce-Tabs-panel iframe,
.woocommerce-product-details__short-description img { max-inline-size: 100%; block-size: auto; }

/* Lange Wörter und Artikelnummern dürfen brechen, statt die Zeile zu sprengen. */
.single-product .product_title,
.woocommerce-Tabs-panel,
.woocommerce-product-details__short-description,
.summary { overflow-wrap: anywhere; }

/* Der Produkttitel darf am Telefon kleiner werden. */
@media (max-width: 560px) {
  .single-product .product_title { font-size: var(--step-2); hyphens: auto; }
  .laufzeiten { font-size: var(--step--2); }
  .laufzeiten th, .laufzeiten td { padding: var(--space-3xs) var(--space-2xs); }
}

/* --- Gestaffelte Beschreibung --------------------------------------------
   Erst wenige Zeilen, der Rest auf Klick. Dieselbe Form wie beim
   Gewährleistungshinweis — eine ruhige Zeile mit eigenem Pfeil, damit
   beides auf der Produktseite gleich aussieht und nicht wie zwei
   verschiedene Bauteile. */
.mehr { margin-block-start: var(--space-2xs); }

.mehr__zeile {
  cursor: pointer; list-style: none;
  display: inline-flex; align-items: center; gap: var(--space-3xs);
  font-size: var(--step--1); font-weight: 600;
  color: var(--c-primary);
  padding-block: var(--space-3xs);
}
.mehr__zeile::-webkit-details-marker { display: none; }

.mehr__zeile::before {
  content: ""; inline-size: 0; block-size: 0;
  border-inline-start: 5px solid currentColor;
  border-block: 4px solid transparent;
  transition: transform .15s ease;
}
.mehr[open] .mehr__zeile::before { transform: rotate(90deg); }
.mehr__zeile:hover { color: var(--c-gold-muted); }
.mehr__zeile:focus-visible { outline: 2px solid var(--c-gold); outline-offset: 2px; }

.mehr__inhalt { padding-block-start: var(--space-2xs); }

/* Im Ausdruck ist nichts aufklappbar. */
@media print { .mehr__inhalt { display: block !important; } }

/* ==========================================================================
   Mein Konto
   ==========================================================================
   Dieses Theme entfernt WooCommerce' eigene Stylesheets vollständig
   (siehe inc/woocommerce.php). Für Katalog, Warenkorb und Kasse gab es
   Ersatz — für "Mein Konto" nicht. Die Seite erschien deshalb nackt: die
   Navigation als Aufzählungspunkte, Beschriftungen und Felder ineinander
   gerutscht, und neben den Passwortfeldern ein leeres Kästchen, dessen Sinn
   niemand erraten konnte. Das Kästchen ist WooCommerce' Umschalter zum
   Einblenden des Passworts; sein Augensymbol steckte in genau dem
   Stylesheet, das hier fehlt. Es steht weiter unten als eigene Regel.

   Bei einem Abo-Shop ist diese Seite kein Nebenschauplatz: Hier verwaltet
   der Kunde seine laufenden Verträge. Sie muss so aussehen wie der Rest. */

.woocommerce-account .woocommerce {
  display: grid;
  grid-template-columns: minmax(12rem, 15rem) minmax(0, 1fr);
  gap: var(--space-xl);
  align-items: start;
}

@media (max-width: 48rem) {
  .woocommerce-account .woocommerce { grid-template-columns: minmax(0, 1fr); gap: var(--space-m); }
}

/* --- Die Navigation ------------------------------------------------------ */
.woocommerce-MyAccount-navigation ul {
  list-style: none; margin: 0; padding: 0;
  border: 1px solid var(--c-border); border-radius: var(--radius);
  background: var(--c-surface); overflow: hidden;
}

.woocommerce-MyAccount-navigation li + li { border-block-start: 1px solid var(--c-border); }

.woocommerce-MyAccount-navigation a {
  display: block; padding: var(--space-2xs) var(--space-s);
  text-decoration: none; color: var(--c-text);
  font-weight: var(--fw-medium);
}

.woocommerce-MyAccount-navigation a:hover { background: var(--c-bg); color: var(--c-primary); }

/* Wo man ist, muss man sehen, ohne zu suchen: gefüllt statt unterstrichen. */
.woocommerce-MyAccount-navigation li.is-active > a {
  background: var(--c-primary); color: #fff; font-weight: var(--fw-semibold);
}

/* --- Formulare ----------------------------------------------------------- */
/* Beschriftung ÜBER dem Feld, nicht daneben. Nebeneinander müsste jede
   Beschriftung gleich lang sein, damit die Felder fluchten — das tun sie
   nie, und genau dadurch entsteht die Treppe, die unordentlich wirkt. */
.woocommerce-MyAccount-content form .form-row,
.woocommerce-MyAccount-content form p.woocommerce-form-row {
  display: flex; flex-direction: column; gap: var(--space-3xs);
  margin: 0 0 var(--space-s); max-width: 28rem;
}

.woocommerce-MyAccount-content form label {
  font-size: var(--step--1); font-weight: var(--fw-medium); color: var(--c-text);
}

.woocommerce-MyAccount-content .required { color: var(--c-danger); text-decoration: none; }

.woocommerce-MyAccount-content input[type="text"],
.woocommerce-MyAccount-content input[type="email"],
.woocommerce-MyAccount-content input[type="tel"],
.woocommerce-MyAccount-content input[type="password"],
.woocommerce-MyAccount-content select,
.woocommerce-MyAccount-content textarea {
  inline-size: 100%;
  padding: var(--space-2xs) var(--space-xs);
  border: 1px solid var(--c-border); border-radius: var(--radius);
  background: var(--c-surface); color: var(--c-text);
  /* Gleiche Höhe für alle Feldarten — sonst steht ein Auswahlfeld zwei
     Pixel tiefer als das Textfeld daneben, und genau das sieht billig aus. */
  min-block-size: 2.75rem;
}

.woocommerce-MyAccount-content input:focus-visible,
.woocommerce-MyAccount-content select:focus-visible,
.woocommerce-MyAccount-content textarea:focus-visible {
  outline: 2px solid var(--c-gold); outline-offset: 1px; border-color: var(--c-primary);
}

/* Der erklärende Nachsatz gehört unter sein Feld, nicht in die nächste Zeile. */
.woocommerce-MyAccount-content form span em,
.woocommerce-MyAccount-content .woocommerce-form-row span.description {
  display: block; font-size: var(--step--1); font-style: normal;
  color: var(--c-text-muted); margin-block-start: var(--space-3xs);
}

/* Kästchen samt Text in einer Zeile, Text nicht unter das Kästchen gerutscht. */
.woocommerce-MyAccount-content .woocommerce-form__label-for-checkbox {
  display: flex; align-items: flex-start; gap: var(--space-2xs);
  max-width: 40rem; font-weight: var(--fw-regular);
}

.woocommerce-MyAccount-content .woocommerce-form__input-checkbox {
  flex: none; inline-size: 1.05rem; block-size: 1.05rem; margin-block-start: .2rem;
}

.woocommerce-MyAccount-content fieldset {
  border: 1px solid var(--c-border); border-radius: var(--radius);
  padding: var(--space-s) var(--space-m) var(--space-2xs);
  margin-block: var(--space-m);
  max-width: 32rem;
}

.woocommerce-MyAccount-content legend {
  padding-inline: var(--space-2xs);
  font-weight: var(--fw-semibold); color: var(--c-primary);
}

/* --- Das Auge am Passwortfeld -------------------------------------------- */
/* WooCommerce legt hinter jedes Passwortfeld ein leeres <span>, das sein
   eigenes Stylesheet zum Auge macht. Ohne dieses Stylesheet blieb ein
   unerklärliches Kästchen stehen. Das Symbol steckt hier als Datenadresse
   in der Regel — kein Nachladen, keine zweite Datei. */
.woocommerce-MyAccount-content .password-input { position: relative; display: block; }

.woocommerce-MyAccount-content .password-input input { padding-inline-end: 2.6rem; }

.woocommerce-MyAccount-content .show-password-input {
  position: absolute; inset-inline-end: .75rem; inset-block-start: 50%;
  transform: translateY(-50%);
  inline-size: 1.25rem; block-size: 1.25rem;
  cursor: pointer; opacity: .5;
  background: center / contain no-repeat
    url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23333" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M1.8 12S5.5 5.2 12 5.2 22.2 12 22.2 12 18.5 18.8 12 18.8 1.8 12 1.8 12Z"/><circle cx="12" cy="12" r="3"/></svg>');
}

.woocommerce-MyAccount-content .show-password-input:hover,
.woocommerce-MyAccount-content .show-password-input.display-password { opacity: 1; }

/* --- Tabellen (Bestellungen, Abos) --------------------------------------- */
.woocommerce-MyAccount-content table {
  inline-size: 100%; border-collapse: collapse;
  background: var(--c-surface);
  border: 1px solid var(--c-border); border-radius: var(--radius);
}

.woocommerce-MyAccount-content table th,
.woocommerce-MyAccount-content table td {
  padding: var(--space-2xs) var(--space-xs);
  border-block-end: 1px solid var(--c-border);
  text-align: start; vertical-align: middle;
}

.woocommerce-MyAccount-content table th { font-weight: var(--fw-semibold); color: var(--c-primary); }
.woocommerce-MyAccount-content table tr:last-child td { border-block-end: 0; }

/* Am Telefon wird aus jeder Zeile ein Block — eine Tabelle mit sechs Spalten
   ist auf 390 Pixeln nicht zu lesen, und waagrechtes Schieben findet keiner. */
@media (max-width: 48rem) {
  .woocommerce-MyAccount-content table thead { display: none; }
  .woocommerce-MyAccount-content table tr {
    display: block; border-block-end: 1px solid var(--c-border);
    padding-block: var(--space-2xs);
  }
  .woocommerce-MyAccount-content table td {
    display: flex; justify-content: space-between; gap: var(--space-s);
    border: 0; padding-block: var(--space-3xs);
  }
  .woocommerce-MyAccount-content table td::before {
    content: attr(data-title);
    font-weight: var(--fw-semibold); color: var(--c-text-muted);
  }
}

/* ==========================================================================
   Klassische Kasse und klassischer Warenkorb (seit 0.27.0)
   ==========================================================================
 *
 * Seit 0.27 laufen Kasse und Warenkorb wieder als Shortcode statt als Block.
 * Nur dort hängt German Market Gewährleistungslabel, Pflicht-Kästchen und
 * Bestellknopf automatisch ein. Weil das Theme die Stylesheets von
 * WooCommerce abschaltet (inc/woocommerce.php), stand die klassische Kasse
 * bis 0.26 völlig ungestaltet da: Beschriftung neben dem Feld, Aufzählungs-
 * punkte vor den Zahlungsarten, ein Label über die ganze Seitenbreite.
 *
 * Aufbau: eine Spalte, jede Gruppe eine Karte. Zwei Spalten wären möglich,
 * German Market ordnet die Teile der Kasse aber selbst um (Zahlungsweise vor
 * die Bestellübersicht, Knopf ans Ende). Eine Spalte hält jede Reihenfolge
 * aus, ohne dass etwas an der falschen Stelle steht.
 * ------------------------------------------------------------------------- */

.woocommerce-checkout .inhalt .woocommerce { max-inline-size: 46rem; }

/* Überschriften der Gruppen */
form.woocommerce-checkout h3,
.woocommerce-checkout #order_review_heading {
  font-size: var(--step-1); font-weight: var(--fw-semibold);
  color: var(--c-primary); margin: 0 0 var(--space-s);
}
form.woocommerce-checkout > * + h3,
form.woocommerce-checkout > h3:not(:first-child) { margin-block-start: var(--space-l); }

/* Kundendaten als Karte */
.woocommerce-checkout #customer_details {
  background: var(--c-surface);
  border: 1px solid var(--c-border); border-top: 3px solid var(--c-gold);
  border-radius: var(--radius); box-shadow: var(--shadow-card);
  padding: var(--space-m);
}
@media (min-width: 600px) {
  .woocommerce-checkout #customer_details { padding: var(--space-l); }
}
.woocommerce-checkout #customer_details .col-2 { margin-block-start: var(--space-m); }
.woocommerce-checkout #customer_details .col-2 > * + * { margin-block-start: var(--space-m); }

/* Felder: Vorname/Nachname und PLZ/Ort teilen sich eine Zeile.
   flex-wrap statt Raster, weil WooCommerce die Felder je nach Land umsortiert
   (in den USA steht der Ort vor dem Bundesstaat und der PLZ). Ein Feld, das
   allein in seiner Zeile landet, wächst auf die volle Breite. */
.woocommerce-billing-fields__field-wrapper,
.woocommerce-shipping-fields__field-wrapper,
.woocommerce-additional-fields__field-wrapper,
.woocommerce-account-fields {
  display: flex; flex-wrap: wrap; gap: var(--space-s) var(--space-s);
}
:is(.woocommerce-checkout, .woocommerce-cart) .form-row {
  flex: 1 1 100%; margin: 0; min-inline-size: 0;
}
:is(.woocommerce-billing-fields__field-wrapper, .woocommerce-shipping-fields__field-wrapper)
  :is(.form-row-first, .form-row-last) { flex: 1 1 calc(50% - var(--space-s)); }
:is(.woocommerce-billing-fields__field-wrapper, .woocommerce-shipping-fields__field-wrapper)
  :is(#billing_postcode_field, #shipping_postcode_field) { flex: 1 1 8rem; max-inline-size: 100%; }
:is(.woocommerce-billing-fields__field-wrapper, .woocommerce-shipping-fields__field-wrapper)
  :is(#billing_city_field, #shipping_city_field) { flex: 3 1 14rem; }
@media (max-width: 30rem) {
  :is(.woocommerce-billing-fields__field-wrapper, .woocommerce-shipping-fields__field-wrapper)
    :is(.form-row-first, .form-row-last) { flex-basis: 100%; }
}

form.woocommerce-checkout .form-row > label,
form.checkout_coupon .form-row > label {
  display: block; margin-block-end: var(--space-3xs);
  font-size: var(--step--1); font-weight: var(--fw-medium); color: var(--c-text);
}
form.woocommerce-checkout .woocommerce-input-wrapper { display: block; }
:is(.woocommerce-checkout, .woocommerce-cart) :is(.required, abbr.required) {
  color: var(--c-danger); text-decoration: none; border: 0;
}
/* „(optional)“ bleibt Teil der Beschriftung, nur leiser. */
form.woocommerce-checkout label .optional { color: var(--c-text-muted); font-weight: var(--fw-regular); }

:is(form.woocommerce-checkout, form.checkout_coupon, .woocommerce-cart-form, .cart-collaterals)
  :is(input[type="text"], input[type="email"], input[type="tel"], input[type="number"],
      input[type="password"], input[type="date"], select, textarea) {
  display: block; inline-size: 100%; min-block-size: 2.75rem;
  padding: var(--space-2xs) var(--space-xs);
  font: inherit; font-size: max(16px, 1em);   /* unter 16px zoomt iOS beim Tippen */
  color: var(--c-text); background: var(--c-surface);
  border: 1px solid var(--c-border); border-radius: var(--radius);
  transition: border-color .15s ease;
}
form.woocommerce-checkout textarea { min-block-size: 6rem; resize: vertical; }
:is(form.woocommerce-checkout, form.checkout_coupon, .woocommerce-cart-form, .cart-collaterals)
  :is(input, select, textarea):hover { border-color: var(--c-gold-muted); }
:is(form.woocommerce-checkout, form.checkout_coupon, .woocommerce-cart-form, .cart-collaterals)
  :is(input, select, textarea):focus-visible {
  outline: 2px solid var(--c-gold); outline-offset: 1px; border-color: var(--c-primary);
}
:is(form.woocommerce-checkout, form.checkout_coupon, .woocommerce-cart-form) ::placeholder { color: #9A968E; }

/* Länderauswahl (Select2): gleiche Höhe und Linie wie die Textfelder. */
:is(.woocommerce-checkout, .woocommerce-cart) .select2-container { inline-size: 100% !important; }
:is(.woocommerce-checkout, .woocommerce-cart) .select2-container .select2-selection--single {
  display: flex; align-items: center;
  block-size: 2.75rem; border: 1px solid var(--c-border); border-radius: var(--radius);
  background: var(--c-surface);
}
:is(.woocommerce-checkout, .woocommerce-cart) .select2-container .select2-selection--single .select2-selection__rendered {
  padding-inline: var(--space-xs) 2.25rem; line-height: 1.4; color: var(--c-text);
}
:is(.woocommerce-checkout, .woocommerce-cart) .select2-container .select2-selection--single .select2-selection__arrow {
  block-size: 100%; inset-block-start: 0; inset-inline-end: var(--space-2xs);
}
:is(.woocommerce-checkout, .woocommerce-cart) .select2-container--open .select2-selection--single,
:is(.woocommerce-checkout, .woocommerce-cart) .select2-container--focus .select2-selection--single {
  border-color: var(--c-primary); outline: 2px solid var(--c-gold); outline-offset: 1px;
}
.select2-dropdown { border-color: var(--c-border); border-radius: var(--radius); }
.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted[data-selected] {
  background: var(--c-primary); color: #fff;
}

/* Kästchen samt Text in einer Zeile — „Lieferung an eine andere Adresse?“,
   AGB/Widerruf, Datenweitergabe, vorzeitiger Beginn bei Software. */
/* Block statt Flex: Text und Pflicht-Stern bleiben im selben Fließtext,
   statt dass der Stern als eigene Spalte an den rechten Rand rutscht. */
:is(.woocommerce-checkout, .woocommerce-cart) label:has(> input[type="checkbox"]),
:is(.woocommerce-checkout, .woocommerce-cart) .woocommerce-form__label-for-checkbox {
  display: block; position: relative; padding-inline-start: 1.75rem;
  font-size: var(--step--1); font-weight: var(--fw-regular); line-height: 1.5;
  color: var(--c-text); cursor: pointer;
}
:is(.woocommerce-checkout, .woocommerce-cart) :is(label:has(> input[type="checkbox"]), .woocommerce-form__label-for-checkbox) > input[type="checkbox"] {
  position: absolute; inset-inline-start: 0; inset-block-start: .1em;
}
:is(.woocommerce-checkout, .woocommerce-cart) :is(input[type="checkbox"], input[type="radio"]) {
  flex: none; inline-size: 1.1rem; block-size: 1.1rem; margin: .15em 0 0;
  accent-color: var(--c-primary); cursor: pointer;
}
/* Die Lieferadresse ist eine Frage, keine Überschrift — sie bekommt die
   Größe der übrigen Kästchen, nur kräftiger. */
.woocommerce-checkout #ship-to-different-address { margin: 0; font-size: inherit; }
.woocommerce-checkout #ship-to-different-address label {
  font-size: var(--step-0); font-weight: var(--fw-medium); color: var(--c-primary);
}
.woocommerce-checkout .shipping_address { margin-block-start: var(--space-s); }

/* --- Bestellübersicht ---------------------------------------------------- */
.woocommerce-checkout #order_review_heading { margin-block-start: var(--space-l); }

.woocommerce table.shop_table.woocommerce-checkout-review-order-table,
.woocommerce .cart-collaterals table.shop_table {
  border-radius: var(--radius); border-collapse: separate; border-spacing: 0;
  overflow: hidden; box-shadow: var(--shadow-card);
}
.woocommerce-checkout-review-order-table thead th {
  font-size: var(--step--1); text-transform: uppercase; letter-spacing: .06em;
  color: var(--c-text-muted); font-weight: var(--fw-semibold);
  background: var(--c-bg);
}
.woocommerce table.woocommerce-checkout-review-order-table :is(.product-total, tfoot td),
.woocommerce .cart-collaterals table.shop_table td {
  text-align: right; white-space: nowrap; vertical-align: top;
}
.woocommerce-checkout-review-order-table .product-name { color: var(--c-text); }
.woocommerce-checkout-review-order-table .product-quantity {
  color: var(--c-text-muted); font-weight: var(--fw-regular); white-space: nowrap;
}
/* Die Steuerzeile unter jedem Betrag: klein und gedämpft. */
:is(.woocommerce-checkout-review-order-table, .cart-collaterals, .woocommerce-cart-form)
  :is(.product-tax, .woocommerce-Price-taxLabel, .tax_label, small, .includes_tax, .wgm-tax) {
  display: block; font-size: var(--step--1); font-weight: var(--fw-regular);
  color: var(--c-text-muted); white-space: normal;
}

/* Merkmale je Position (Konfiguration, Kennung, Laufzeit) */
:is(.woocommerce-checkout-review-order-table, .woocommerce-cart-form, .woocommerce-table--order-details)
  dl.variation {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0 var(--space-2xs);
  margin: var(--space-3xs) 0 0; font-size: var(--step--1); color: var(--c-text-muted);
  line-height: 1.45;
}
:is(.woocommerce-checkout-review-order-table, .woocommerce-cart-form, .woocommerce-table--order-details)
  dl.variation dt { font-weight: var(--fw-medium); }
:is(.woocommerce-checkout-review-order-table, .woocommerce-cart-form, .woocommerce-table--order-details)
  dl.variation :is(dd, dd p) { margin: 0; }

/* Summen */
.woocommerce-checkout-review-order-table tfoot th { font-weight: var(--fw-medium); color: var(--c-text); }
:is(.woocommerce-checkout-review-order-table, .cart-collaterals) tr.order-total :is(th, td) {
  font-size: var(--step-1); font-weight: var(--fw-bold); color: var(--c-primary);
  background: var(--c-bg); border-bottom: 0;
}
:is(.woocommerce-checkout-review-order-table, .cart-collaterals) tr.order-total td small,
:is(.woocommerce-checkout-review-order-table, .cart-collaterals) tr.order-total td .includes_tax {
  font-size: var(--step--1); font-weight: var(--fw-regular);
}
/* Wiederkehrende Summen (Subscriptions): eigener, ruhigerer Block */
:is(.woocommerce-checkout-review-order-table, .cart-collaterals) tr.recurring-totals th {
  padding-block-start: var(--space-m);
  font-size: var(--step--1); text-transform: uppercase; letter-spacing: .06em;
  color: var(--c-text-muted); font-weight: var(--fw-semibold);
}
:is(.woocommerce-checkout-review-order-table, .cart-collaterals) tr.order-total.recurring-total :is(th, td) {
  font-size: var(--step-0); background: transparent; border-bottom: 1px solid var(--c-border);
}
:is(.woocommerce-checkout-review-order-table, .cart-collaterals) .first-payment-date {
  display: block; font-size: var(--step--1); color: var(--c-text-muted); font-weight: var(--fw-regular);
}

/* Am Telefon wird die Übersicht von der Tabelle zur Liste: jede Zeile eine
   Flex-Reihe, Name links, Betrag rechts. Als Tabelle wurde sie breiter als das
   Fenster, und für den Produktnamen blieben rund 120 Pixel — „Konfiguration“
   brach dort Silbe für Silbe. Die Versandwahl bekommt die ganze Breite. */
@media (max-width: 46rem) {
  .woocommerce table.woocommerce-checkout-review-order-table,
  .woocommerce-checkout-review-order-table :is(tbody, tfoot) { display: block; }
  .woocommerce-checkout-review-order-table thead { display: none; }
  .woocommerce-checkout-review-order-table tr {
    display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline;
    gap: 0 var(--space-s); padding: var(--space-xs) var(--space-s);
    border-bottom: 1px solid var(--c-border);
  }
  .woocommerce table.woocommerce-checkout-review-order-table tr :is(th, td) {
    display: block; padding: 0; border: 0; background: transparent;
  }
  .woocommerce table.woocommerce-checkout-review-order-table td.product-name { flex: 1 1 12rem; min-inline-size: 0; }
  .woocommerce table.woocommerce-checkout-review-order-table :is(.product-total, tfoot td) {
    flex: 0 1 auto; white-space: normal; margin-inline-start: auto; text-align: right;
  }
  .woocommerce table.woocommerce-checkout-review-order-table tr.order-total :is(th, td) {
    border: 0; background: transparent;
  }
  .woocommerce-checkout-review-order-table tr.order-total:not(.recurring-total) { background: var(--c-bg); }
  .woocommerce-checkout-review-order-table tr.recurring-totals { padding-block-end: 0; border-bottom: 0; }
  .woocommerce table.woocommerce-checkout-review-order-table tr.recurring-totals th { padding: 0; }
  .woocommerce table.woocommerce-checkout-review-order-table tr.woocommerce-shipping-totals td {
    flex: 1 1 100%; text-align: left; margin-block-start: var(--space-2xs);
  }
  .woocommerce-checkout-review-order-table ul.woocommerce-shipping-methods { justify-items: start; }
  .woocommerce-checkout-review-order-table tfoot tr:last-child { border-bottom: 0; }
  :is(.woocommerce-checkout-review-order-table, .woocommerce-cart-form) dl.variation { display: block; }
  :is(.woocommerce-checkout-review-order-table, .woocommerce-cart-form) dl.variation dt { margin-block-start: var(--space-3xs); }
}

/* Versandarten als Auswahl ohne Aufzählungspunkte */
ul.woocommerce-shipping-methods {
  list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3xs);
  justify-items: end;
}
ul.woocommerce-shipping-methods li {
  display: flex; align-items: flex-start; gap: var(--space-2xs);
  margin: 0; white-space: normal; text-align: left;
}
ul.woocommerce-shipping-methods li label { cursor: pointer; min-inline-size: 0; }
.woocommerce-shipping-destination,
.woocommerce-shipping-calculator { font-size: var(--step--1); color: var(--c-text-muted); white-space: normal; }

/* --- Zahlungsweise ------------------------------------------------------- */
.woocommerce-checkout #payment { margin-block-start: var(--space-m); }
.woocommerce-checkout #order_review > #payment:first-child { margin-block-start: 0; }

ul.wc_payment_methods {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: var(--space-2xs);
}
ul.wc_payment_methods li.wc_payment_method {
  position: relative; margin: 0;
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2xs) var(--space-xs);
  padding: var(--space-xs) var(--space-s);
  background: var(--c-surface);
  border: 1px solid var(--c-border); border-radius: var(--radius);
  transition: border-color .15s ease, box-shadow .15s ease;
}
ul.wc_payment_methods li.wc_payment_method:hover { border-color: var(--c-gold-muted); }
ul.wc_payment_methods li.wc_payment_method:has(> input:checked) {
  border-color: var(--c-primary); box-shadow: inset 3px 0 0 var(--c-gold), var(--shadow-card);
}
ul.wc_payment_methods li.wc_payment_method > input { margin: 0; }
/* Die ganze Zeile ist klickbar; das Logo steht rechts. */
ul.wc_payment_methods li.wc_payment_method > label {
  flex: 1 1 0; min-inline-size: 0;
  display: flex; align-items: center; gap: var(--space-xs);
  font-weight: var(--fw-medium); color: var(--c-text); cursor: pointer;
}
ul.wc_payment_methods li.wc_payment_method > label::after {
  content: ""; position: absolute; inset: 0;   /* Klickfläche über die ganze Karte */
}
ul.wc_payment_methods li.wc_payment_method > label img {
  margin-inline-start: auto; max-block-size: 1.6rem; inline-size: auto;
  flex: none; display: inline-block; vertical-align: middle;
}
ul.wc_payment_methods .payment_box {
  flex: 1 1 100%; position: relative; z-index: 1;
  padding-inline-start: calc(1.1rem + var(--space-xs));
  font-size: var(--step--1); color: var(--c-text-muted);
}
ul.wc_payment_methods .payment_box > :first-child { margin-block-start: 0; }
ul.wc_payment_methods .payment_box :is(input, select) { position: relative; z-index: 1; }
/* Hinweis „keine Zahlungsart verfügbar“ */
ul.wc_payment_methods li.woocommerce-notice { display: block; }

/* --- Rechtliches und Bestellknopf ---------------------------------------- */
.woocommerce-checkout .place-order,
.woocommerce-checkout .wgm-place-order,
.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper {
  display: grid; gap: var(--space-xs);
}
.woocommerce-checkout .place-order { margin-block-start: var(--space-m); }
.woocommerce-checkout :is(.place-order, .woocommerce-terms-and-conditions-wrapper) > p,
.woocommerce-checkout :is(.place-order, .woocommerce-terms-and-conditions-wrapper) .form-row { margin: 0; }
.woocommerce-checkout .woocommerce-privacy-policy-text,
.woocommerce-checkout .woocommerce-privacy-policy-text p {
  font-size: var(--step--1); color: var(--c-text-muted); margin: 0;
}
.woocommerce-checkout .woocommerce-terms-and-conditions {
  max-block-size: 14rem; overflow: auto; padding: var(--space-s);
  border: 1px solid var(--c-border); border-radius: var(--radius);
  background: var(--c-surface); font-size: var(--step--1);
}

.woocommerce-checkout #place_order {
  display: block; inline-size: 100%;
  margin-block-start: var(--space-xs);
  padding: var(--space-s) var(--space-m);
  font-size: var(--step-1); letter-spacing: .02em;
  background: var(--c-primary); color: #fff;
  box-shadow: 0 2px 0 var(--c-gold);
}
.woocommerce-checkout #place_order:hover { background: color-mix(in srgb, var(--c-primary) 85%, #000); color: #fff; }
.woocommerce-checkout #place_order:focus-visible { outline: 2px solid var(--c-gold); outline-offset: 2px; }

/* Während WooCommerce die Summen neu rechnet, legt es einen Schleier über
   die Übersicht. Ohne sein Stylesheet fehlte der; jetzt dezent. */
.woocommerce .blockUI.blockOverlay { background: var(--c-bg) !important; opacity: .6 !important; }

/* --- Gutschein ----------------------------------------------------------- */
.woocommerce-form-coupon-toggle .woocommerce-info { margin-block-end: var(--space-s); }
form.checkout_coupon {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-xs);
  background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius);
  padding: var(--space-s); margin-block-end: var(--space-m);
}
form.checkout_coupon > p:not(.form-row) { flex: 1 1 100%; margin: 0; font-size: var(--step--1); color: var(--c-text-muted); }
form.checkout_coupon .form-row-first { flex: 1 1 14rem; }
form.checkout_coupon .form-row-last { flex: 0 0 auto; }
form.checkout_coupon .clear { display: none; }

/* --- Gewährleistungslabel (German Market) ---------------------------------
   Steht unter der Kasse und wurde in voller Seitenbreite gezeigt. Die Grafik
   ist ein Etikett, kein Aufmacher: höchstens 22rem breit. Feiner einstellen
   lässt es sich in German Market („Maximale Breite an der Kasse“). */
.woocommerce-checkout .inhalt :is(form.woocommerce-checkout ~ *, .woocommerce ~ *) {
  margin-block-start: var(--space-l);
  font-size: var(--step--1); color: var(--c-text-muted);
}
.woocommerce-checkout .inhalt :is(form.woocommerce-checkout ~ *, .woocommerce ~ *) img {
  display: block; inline-size: auto; max-inline-size: min(100%, 22rem); block-size: auto;
  margin-block-start: var(--space-2xs);
  border: 1px solid var(--c-border); border-radius: var(--radius);
}

/* --- Klassischer Warenkorb ---------------------------------------------- */
.woocommerce-cart-form table.shop_table.cart {
  border-radius: var(--radius); border-collapse: separate; border-spacing: 0;
  overflow: hidden; box-shadow: var(--shadow-card);
}
.woocommerce-cart-form table.cart thead th {
  font-size: var(--step--1); text-transform: uppercase; letter-spacing: .06em;
  color: var(--c-text-muted); background: var(--c-bg);
}
.woocommerce-cart-form table.cart td { vertical-align: top; }
.woocommerce-cart-form table.cart :is(.product-price, .product-subtotal) {
  text-align: right; white-space: nowrap;
}
.woocommerce-cart-form table.cart .product-quantity { text-align: center; }
.woocommerce-cart-form table.cart .product-thumbnail { inline-size: 5rem; }
.woocommerce-cart-form table.cart .product-thumbnail img {
  inline-size: 4rem; block-size: 4rem; object-fit: contain;
  background: #fff; border: 1px solid var(--c-border); border-radius: var(--radius);
}
.woocommerce-cart-form table.cart .product-name a { font-weight: var(--fw-semibold); color: var(--c-primary); text-decoration: none; }
.woocommerce-cart-form table.cart .product-name a:hover { text-decoration: underline; }
.woocommerce-cart-form table.cart .product-remove { inline-size: 2.5rem; text-align: center; }
.woocommerce-cart-form table.cart a.remove {
  display: inline-grid; place-items: center; inline-size: 1.75rem; block-size: 1.75rem;
  border-radius: 50%; font-size: 1.25rem; line-height: 1; text-decoration: none;
  color: var(--c-text-muted);
}
.woocommerce-cart-form table.cart a.remove:hover { background: var(--c-danger); color: #fff; }
.woocommerce-cart-form .quantity input.qty {
  inline-size: 4.5rem; margin-inline: auto; text-align: center; padding-inline: var(--space-3xs);
}
.woocommerce-cart-form td.actions {
  text-align: right; background: var(--c-bg); border-bottom: 0;
}
.woocommerce-cart-form td.actions .coupon {
  display: inline-flex; flex-wrap: wrap; gap: var(--space-2xs); float: left;
}
.woocommerce-cart-form td.actions .coupon label { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.woocommerce-cart-form td.actions .coupon input.input-text { inline-size: 12rem; }
.woocommerce-cart-form td.actions button[name="update_cart"] {
  background: transparent; color: var(--c-primary); border-color: var(--c-border);
}
.woocommerce-cart-form td.actions button[name="update_cart"]:disabled { opacity: .5; cursor: default; }

.woocommerce .cart-collaterals { margin-block-start: var(--space-l); display: flex; justify-content: flex-end; }
.woocommerce .cart-collaterals .cart_totals { inline-size: min(100%, 28rem); }
.woocommerce .cart-collaterals .cart_totals h2 {
  font-size: var(--step-1); color: var(--c-primary); margin: 0 0 var(--space-s);
}
.woocommerce .cart-collaterals table.shop_table th { font-weight: var(--fw-medium); color: var(--c-text); }
.woocommerce .wc-proceed-to-checkout { margin-block-start: var(--space-s); }
.woocommerce .wc-proceed-to-checkout .checkout-button {
  display: block; inline-size: 100%; font-size: var(--step-1);
  padding: var(--space-s) var(--space-m);
  background: var(--c-primary); color: #fff; box-shadow: 0 2px 0 var(--c-gold);
}
.woocommerce .wc-proceed-to-checkout .checkout-button:hover {
  background: color-mix(in srgb, var(--c-primary) 85%, #000); color: #fff;
}

/* Warenkorb am Telefon: WooCommerce schreibt die Spaltennamen als data-title
   an jede Zelle. Ohne sein Stylesheet blieb die Tabelle sechs Spalten breit;
   jetzt wird jede Position zu einer Karte mit Beschriftung links. */
@media (max-width: 46rem) {
  .woocommerce-cart-form table.shop_table_responsive thead { display: none; }
  .woocommerce-cart-form table.shop_table_responsive,
  .woocommerce-cart-form table.shop_table_responsive tbody,
  .woocommerce-cart-form table.shop_table_responsive tr,
  .woocommerce-cart-form table.shop_table_responsive td { display: block; inline-size: 100%; }
  .woocommerce-cart-form table.shop_table_responsive tr.cart_item {
    position: relative; padding-block: var(--space-xs);
    border-bottom: 1px solid var(--c-border);
  }
  .woocommerce-cart-form table.shop_table_responsive tr.cart_item td {
    border: 0; padding-block: var(--space-3xs);
    display: flex; justify-content: space-between; gap: var(--space-s); text-align: right;
  }
  .woocommerce-cart-form table.shop_table_responsive tr.cart_item td[data-title]::before {
    content: attr(data-title); font-weight: var(--fw-medium); color: var(--c-text-muted);
    font-size: var(--step--1); text-align: left;
  }
  .woocommerce-cart-form table.shop_table_responsive tr.cart_item td.product-name {
    display: block; text-align: left; padding-inline-end: 2.5rem;
  }
  .woocommerce-cart-form table.shop_table_responsive tr.cart_item td.product-name::before { content: none; }
  .woocommerce-cart-form table.shop_table_responsive tr.cart_item td.product-thumbnail { display: none; }
  .woocommerce-cart-form table.shop_table_responsive tr.cart_item td.product-remove {
    position: absolute; inset-block-start: var(--space-xs); inset-inline-end: 0;
    inline-size: auto; display: block;
  }
  .woocommerce-cart-form table.shop_table_responsive tr.cart_item td.product-remove::before { content: none; }
  .woocommerce-cart-form .quantity input.qty { margin-inline: 0; }
  .woocommerce-cart-form td.actions { text-align: left; }
  .woocommerce-cart-form td.actions .coupon { float: none; display: flex; margin-block-end: var(--space-2xs); }
  .woocommerce-cart-form td.actions .coupon input.input-text { flex: 1 1 10rem; inline-size: auto; }
  .woocommerce-cart-form td.actions button[name="update_cart"] { inline-size: 100%; }
}

/* --- Gutschein unter der Bestellübersicht (seit 0.27.1) -------------------
   Eine leise Zeile statt eines Balkens über der Kasse. */
.woocommerce-checkout .gutschein { margin-block-start: var(--space-s); }
.woocommerce-checkout .gutschein summary {
  display: inline-flex; align-items: center; gap: var(--space-3xs);
  font-size: var(--step--1); color: var(--c-primary); cursor: pointer;
  list-style: none; text-decoration: underline; text-underline-offset: .2em;
  text-decoration-color: var(--c-border);
}
.woocommerce-checkout .gutschein summary::-webkit-details-marker { display: none; }
.woocommerce-checkout .gutschein summary::before {
  content: "+"; display: inline-grid; place-items: center;
  inline-size: 1.1rem; block-size: 1.1rem; border: 1px solid currentColor;
  border-radius: 50%; font-size: .8rem; line-height: 1; text-decoration: none;
}
.woocommerce-checkout .gutschein details[open] summary::before { content: "–"; }
.woocommerce-checkout .gutschein summary:hover { text-decoration-color: currentColor; }
.woocommerce-checkout .gutschein__feld {
  display: flex; gap: var(--space-2xs); margin-block-start: var(--space-xs);
  max-inline-size: 26rem;
}
.woocommerce-checkout .gutschein__feld input.input-text { flex: 1 1 auto; min-inline-size: 0; }
.woocommerce-checkout .gutschein__feld .button {
  flex: none; padding-block: 0; min-block-size: 2.75rem;
  background: transparent; color: var(--c-primary); border-color: var(--c-primary);
}
.woocommerce-checkout .gutschein__feld .button:hover { background: var(--c-primary); color: #fff; }
.woocommerce-checkout .gutschein.is-laedt .gutschein__feld { opacity: .6; }
.woocommerce-checkout .gutschein__meldung:not(:empty) { margin-block-start: var(--space-xs); }
.woocommerce-checkout .gutschein__meldung :is(.woocommerce-error, .woocommerce-message, .woocommerce-info) {
  margin: 0; font-size: var(--step--1);
}