/* ═══════════════════════════════════════════════
   FF WHEELS — CART / CHECKOUT / THANK YOU
   Bento Design System · Apple-Card Style
   ═══════════════════════════════════════════════ */

/* ── Steps in hero (dark bg, white text) ── */
.ff-checkout-steps {
  display: flex;
  align-items: center;
  gap: 0;
  flex-wrap: wrap;
}
.ff-checkout-step {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 500;
  color: rgba(255,255,255,.5);
  white-space: nowrap;
}
.ff-checkout-step span {
  width: 24px; height: 24px;
  border-radius: 50%;
  background: rgba(255,255,255,.15);
  color: rgba(255,255,255,.7);
  font-size: 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ff-checkout-step.is-done { color: rgba(255,255,255,.7); }
.ff-checkout-step.is-done span { background: rgba(255,255,255,.3); color: #fff; }
.ff-checkout-step.is-active { color: #fff; font-weight: 700; }
.ff-checkout-step.is-active span { background: #fff; color: var(--text); }
.ff-checkout-step__line {
  width: 24px; height: 1px;
  background: rgba(255,255,255,.2);
  margin: 0 4px;
}
.ff-checkout-step__line.is-done { background: rgba(255,255,255,.5); }

/* ── Page background for Cart / Checkout / Thankyou ── */
body.woocommerce-cart,
body.woocommerce-checkout,
body.woocommerce-order-received {
  background: var(--bg) !important;
  color: var(--text);
}

/* ── Page wrapper ── */
.ff-checkout-page {
  background: transparent;
  padding: 36px 0 80px;
  font-family: var(--font);
  color: var(--text);
}
/* .ff-checkout-page .fx inherits the standard .fx from homepage.css (--max = 1440px) — no override needed */
.ff-page-header__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.ff-page-header__back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text2);
  text-decoration: none;
  transition: color .2s;
}
.ff-page-header__back:hover { color: var(--text); }
.ff-page-header__title {
  font-size: 20px;
  font-weight: 700;
  color: var(--text);
  margin: 0;
}

/* ── Progress steps ── */
.ff-steps {
  display: flex;
  align-items: center;
  gap: 0;
}
.ff-step {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text2);
  white-space: nowrap;
}
.ff-step__num {
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--border);
  color: var(--text2);
  font-size: 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ff-step.is-done .ff-step__num  { background: var(--text); color: #fff; }
.ff-step.is-active .ff-step__num { background: var(--accent); color: #fff; }
.ff-step.is-active { color: var(--text); font-weight: 600; }
.ff-step__line {
  width: 32px; height: 1px;
  background: var(--border);
  margin: 0 4px;
}
.ff-step__line.is-done { background: var(--text); }

/* ── 2-col grid ── */
.ff-checkout-grid {
  display: grid;
  /* minmax(0,1fr) statt 1fr: eine Grid-Spalte hat implizit min-width:auto und
     waechst sonst mit ihrem breitesten Inhalt (Zahlungsliste, Flaggen-Panel).
     Dadurch wurde die rechte 380px-Spalte aus dem Viewport geschoben. */
  grid-template-columns: minmax(0, 1fr) 380px;
  gap: 24px;
  align-items: flex-start;
}
.ff-checkout-grid > * { min-width: 0; }
@media (max-width: 900px) {
  .ff-checkout-grid { grid-template-columns: 1fr; }
}

/* ── Warenkorb: die drei Kaesten ausdruecklich setzen ──
   Das Raster hat hier DREI Kinder: Artikel links, Zusammenfassung rechts,
   Beratungs-Box. Ueberlaesst man die Verteilung der Automatik, landet die
   Box zwar in Spalte 1 Zeile 2 — aber die Hoehe von Zeile 1 richtet sich
   nach dem hoechsten Kasten darin, und das ist die Zusammenfassung mit
   Summen, Kasse-Knopf und Zahlarten. Unter der Artikelkarte klaffte
   dadurch eine leere Flaeche von mehreren hundert Pixeln, und die Box
   stand ganz unten im Nichts.

   Die Zusammenfassung ueberspannt deshalb beide Zeilen. Zeile 1 misst
   damit nur noch die Artikelkarte, und die Box sitzt direkt darunter —
   genau dort, wo sie vorher war, als sie noch in der linken Spalte lag.

   Nur am Schreibtisch: darunter ist das Raster einspaltig, und dort
   gehoert die Box ans Ende (hinter die Summe), was die Reihenfolge im
   Dokument von selbst erledigt. */
@media (min-width: 901px) {
  /* Zeile 1 nach Inhalt, der Rest in Zeile 2. Ohne diese Angabe verteilt das
     Raster die Mehrhoehe der (ueber beide Zeilen laufenden) Zusammenfassung
     gleichmaessig auf beide Zeilen — Zeile 1 wurde damit hoeher als die
     Artikelkarte, und zwischen ihr und dem Beratungskasten klaffte eine
     Luecke von ueber hundert Pixeln. */
  .woocommerce-cart .ff-checkout-grid { grid-template-rows: auto 1fr; }
  .woocommerce-cart .ff-checkout-grid > :first-child { grid-column: 1; grid-row: 1; }
  .woocommerce-cart .ff-cart-summe { grid-column: 2; grid-row: 1 / span 2; }
  .woocommerce-cart .ff-berat      { grid-column: 1; grid-row: 2; align-self: start; }
}

/* ── Bento cards ── */
/* WICHTIG: Polsterung ausdruecklich auf null.
   Denselben Klassennamen gibt es ein zweites Mal in style.css (Zeile ~2625,
   die Karte mit __head und __icon von Kontakt- und Inhaltsseiten). Sie
   bringt 'padding: 32px' mit. Hintergrund und Radius ueberschreibt diese
   Regel hier, die Polsterung aber NICHT — die stand nirgends drin und kam
   deshalb ungehindert durch. Auf jede Karte in Warenkorb und Kasse kamen so
   32 px obendrauf, zusaetzlich zu den 20 px, die __header und __body selbst
   mitbringen: auf einem 360-px-Schirm gut ein Drittel der Breite, nur fuer
   Rand.

   Gesetzt wird sie nur fuer Warenkorb und Kasse, nicht allgemein: die
   andere Karte lebt auf Seiten, die dieses Stylesheet ebenfalls laden, und
   braucht ihre 32 px. */
.woocommerce-cart .ff-card,
.woocommerce-checkout .ff-card { padding: 0; }

.ff-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r);
  overflow: hidden;
}
.ff-card__header {
  padding: 20px 24px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 14px;
}
.ff-card__num {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--text);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.ff-card__title { font-size: 15px; font-weight: 700; color: var(--text); margin: 0; }
.ff-card__subtitle { font-size: 12px; color: var(--text2); margin: 0; }
.ff-card__body { padding: 20px; }

/* Auf schmalen Schirmen kosteten 24px je Seite fast ein Fuenftel der
   nutzbaren Breite — in der Bestelluebersicht blieb fuer den Artikeltitel
   danach kaum noch Platz. Die Karte behaelt ihre Optik, gibt aber Breite
   frei, wo sie knapp wird. */
@media (max-width: 900px) {
  .ff-card__header { padding: 16px 18px; }
  .ff-card__body   { padding: 16px 18px; }
}
@media (max-width: 560px) {
  .ff-card__header { padding: 14px; }
  .ff-card__body   { padding: 14px; }
}

/* ── Cart item rows ── */
.ff-cart-items { display: flex; flex-direction: column; gap: 0; }
.ff-cart-item {
  display: grid;
  grid-template-columns: 72px 1fr auto;
  gap: 16px;
  align-items: center;
  padding: 16px 24px;
  border-bottom: 1px solid var(--border);
  transition: background .15s;
}
.ff-cart-item:last-child { border-bottom: none; }
.ff-cart-item:hover { background: var(--bg); }

.ff-cart-item__img {
  width: 72px; height: 72px;
  border-radius: var(--r-sm);
  background: var(--bg);
  overflow: hidden;
  border: 1px solid var(--border);
}
.ff-cart-item__img img {
  width: 100%; height: 100%;
  object-fit: contain;
  padding: 4px;
}
.ff-cart-item__info { min-width: 0; }
.ff-cart-item__name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  text-decoration: none;
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ff-cart-item__name:hover { color: var(--accent); }
.ff-cart-item__meta { font-size: 12px; color: var(--text2); margin-top: 2px; }

/* HSN/TSN badge in cart */
.ff-hsn-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  padding: 4px 10px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
  color: var(--text2);
}
.ff-hsn-badge__edit {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  color: var(--text2);
  display: inline-flex;
  align-items: center;
  transition: color .2s;
  font-family: inherit;
}
.ff-hsn-badge__edit:hover { color: var(--accent); }

/* Qty stepper in cart row */
.ff-cart-item__qty { display: inline-flex; align-items: center; background: var(--bg); border: 1px solid var(--border); border-radius: var(--r-sm); overflow: visible; width: fit-content; flex-shrink: 0; }
.ff-cart-item__qty button { width: 30px; height: 30px; background: none; border: none; cursor: pointer; font-size: 16px; font-weight: 500; color: var(--text); font-family: inherit; transition: background .15s; }
.ff-cart-item__qty button:hover { background: var(--border); }
.ff-cart-item__qty input { width: 40px; text-align: center; border: none; border-left: 1px solid var(--border); border-right: 1px solid var(--border); background: transparent; font-size: 14px; font-weight: 700; color: #1D1D1F; -webkit-text-fill-color: #1D1D1F; font-family: inherit; -moz-appearance: textfield; appearance: textfield; outline: none; height: 30px; line-height: 30px; padding: 0; box-sizing: border-box; }
.ff-cart-item__qty input::-webkit-inner-spin-button, .ff-cart-item__qty input::-webkit-outer-spin-button { display: none; }
/* Compact variant — for inline row next to HSN/TSN badge */
.ff-cart-item__qty--sm button { width: 26px; height: 26px; font-size: 13px; }
.ff-cart-item__qty--sm input { width: 36px !important; height: 26px; font-size: 13px; line-height: 26px; box-sizing: border-box; padding: 0; }
/* Plus und Minus im Warenkorb sind 30 beziehungsweise 26 Pixel hoch. Mit der
   Maus trifft man das, mit dem Daumen daneben — und daneben liegt bei "minus"
   der naechste Artikel. Die Knoepfe behalten ihr Aussehen, bekommen aber eine
   unsichtbare Randzone. Nur bei Beruehrung, damit am Rechner nichts
   ueberlappt. */
@media (hover: none) {
  .ff-cart-item__qty button { position: relative; }
  .ff-cart-item__qty button::after { content: ''; position: absolute; inset: -8px -6px; }
  .ff-cart-item__qty--sm button::after { inset: -10px -7px; }
}

.ff-cart-item__right { text-align: right; }
.ff-cart-item__price { font-size: 15px; font-weight: 700; color: var(--text); }
.ff-cart-item__remove {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text2);
  font-size: 18px;
  text-decoration: none;
  margin-top: 8px;
  margin-left: auto;
  transition: background .2s, color .2s;
}
.ff-cart-item__remove:hover { background: rgba(239,68,68,.1); color: #ef4444; }
/* Zweiter Schritt: "Entfernen?" im Knopf selbst bestaetigen */
.ff-cart-item__remove.is-bestaetigen {
  width: auto; padding: 0 10px; border-radius: 14px;
  font-size: 12px; font-weight: 700; white-space: nowrap;
  background: rgba(239,68,68,.1); color: #c0392b;
}

/* Zusatzzeilen der Position: Steuer, Einzelaufschlag, Lieferzeit, Fahrzeug */
.ff-cart-item__steuer { display: block; font-size: 11px; font-weight: 500; color: var(--text2); }
.ff-co-item__price .ff-cart-item__steuer { display: inline; margin-left: 4px; }
.ff-cart-item__aufschlag { margin: 6px 0 0; font-size: 12px; color: var(--text2); }
.ff-cart-item__lieferzeit { margin: 6px 0 0; font-size: 12px; color: #1B8A3A; font-weight: 600; }
.ff-fz-badge { flex-wrap: wrap; gap: 6px; }
.ff-fz-badge__name { color: var(--text); font-weight: 700; }
.ff-fz-badge__nr { font-weight: 600; }
.ff-im-komplettpreis { font-size: 12px; font-weight: 500; color: var(--text2); }
.ff-cart-item--unterpos .ff-cart-item__name { font-weight: 600; font-size: 13px; }

/* ── Cart actions bar ── */
.ff-cart-actions {
  padding: 16px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-top: 1px solid var(--border);
  background: var(--card);
  border-radius: 0 0 var(--r) var(--r);
}
.ff-coupon {
  display: flex;
  align-items: center;
  gap: 8px;
}
.ff-coupon input[type="text"] {
  padding: 9px 14px;
  border-radius: var(--r-sm);
  border: 1.5px solid var(--border);
  background: var(--card);
  font-size: 13px;
  color: var(--text);
  font-family: inherit;
  outline: none;
  width: 160px;
  transition: border-color .2s;
}
.ff-coupon input:focus { border-color: var(--text); }

/* ── Order summary card (right) ── */
.ff-summary-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
  font-size: 14px;
}
.ff-summary-row:last-child { border-bottom: none; }
.ff-summary-row__label { color: var(--text2); }
.ff-summary-row__value { font-weight: 600; color: var(--text); }
.ff-summary-row--total .ff-summary-row__label { font-size: 15px; font-weight: 700; color: var(--text); }
.ff-summary-row--total .ff-summary-row__value { font-size: 22px; font-weight: 800; color: var(--text); }

.ff-checkout-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 16px;
  margin-top: 20px;
  border-radius: var(--r-sm);
  background: var(--text);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  border: none;
  cursor: pointer;
  text-decoration: none;
  font-family: inherit;
  transition: opacity .2s;
}
.ff-checkout-btn:hover { opacity: .85; color: #fff; }

/* Trust badges under CTA */
.ff-trust-row {
  display: flex;
  gap: 12px;
  margin-top: 16px;
  justify-content: center;
  flex-wrap: wrap;
}
.ff-trust-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 600;
  color: var(--text2);
}
.ff-trust-pill svg { width: 14px; height: 14px; flex-shrink: 0; }

/* ── Checkout form fields ── */
.woocommerce-checkout .woocommerce input[type="text"],
.woocommerce-checkout .woocommerce input[type="email"],
.woocommerce-checkout .woocommerce input[type="tel"],
.woocommerce-checkout .woocommerce input[type="number"],
.woocommerce-checkout .woocommerce select,
.woocommerce-checkout .woocommerce textarea {
  width: 100%;
  padding: 12px 16px;
  border-radius: var(--r-sm);
  border: 1.5px solid var(--border);
  background: var(--bg);
  font-size: 14px;
  color: var(--text);
  font-family: var(--font);
  outline: none;
  transition: border-color .2s;
  box-sizing: border-box;
}
.woocommerce-checkout .woocommerce input:focus,
.woocommerce-checkout .woocommerce select:focus,
.woocommerce-checkout .woocommerce textarea:focus { border-color: var(--text); }
.woocommerce-checkout .woocommerce label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text2);
  display: block;
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.woocommerce-checkout .woocommerce label .required { color: var(--accent); }
.woocommerce-checkout .woocommerce .form-row { margin-bottom: 14px; }
.woocommerce-checkout .woocommerce .form-row-first,
.woocommerce-checkout .woocommerce .form-row-last { width: 48%; }
.woocommerce-checkout .woocommerce .form-row-first { float: left; }
.woocommerce-checkout .woocommerce .form-row-last  { float: right; }
.woocommerce-checkout .woocommerce .form-row-wide  { width: 100%; clear: both; }
.woocommerce-checkout .woocommerce .form-row::after { content: ''; display: table; clear: both; }

/* Bestellknopf (#place_order): nur noch in woo-style.css ("Zahlarten + Bestellknopf") */

/* Order review table in checkout right */
.woocommerce-checkout-review-order table {
  width: 100%;
  border-collapse: collapse;
}
.woocommerce-checkout-review-order table td,
.woocommerce-checkout-review-order table th {
  padding: 10px 0;
  font-size: 13px;
  color: var(--text);
  border-bottom: 1px solid var(--border);
}
.woocommerce-checkout-review-order table th { color: var(--text2); font-weight: 600; }
.woocommerce-checkout-review-order .order-total td,
.woocommerce-checkout-review-order .order-total th { font-size: 16px; font-weight: 800; border-bottom: none; }
.woocommerce-checkout-review-order-table thead { display: none; }

/* ── Order-Review-Tabelle: feste Spaltenbreiten ──
   Die Tabelle lief aus der Karte heraus (.ff-card hat overflow:hidden, also
   wurde rechts einfach abgeschnitten). Ursache ist table-layout:auto: dort
   bestimmt der laengste NICHT umbrechbare Inhalt die Mindestbreite der
   Tabelle — hier "1.183,52 €" (geschuetztes Leerzeichen, also ein Stueck)
   und die per CSS in Grossbuchstaben gesetzten Label. Liegt diese
   Mindestbreite ueber der Kartenbreite, gewinnt sie gegen width:100%: die
   Tabelle war 390px breit in einer rund 330px schmalen Karte.

   Achtung, das war der Fehler im ersten Anlauf: overflow-wrap:break-word
   hilft hier NICHT — es verkleinert laut Spezifikation die min-content-
   Breite ausdruecklich nicht, und genau die ist die Stellschraube. Mit
   table-layout:fixed ist width:100% massgeblich, die Spalten stehen fest,
   und der Inhalt bricht innerhalb seiner Zelle um.

   Die Spaltenbreiten stehen als <colgroup> im Template (review-order.php),
   weil die Artikelzeilen ueber beide Spalten spannen und die Breiten sonst
   nicht mehr ableitbar waeren. */
.woocommerce-checkout-review-order-table { table-layout: fixed; }

/* Die Artikelzeile spannt per colspan="2" ueber beide Spalten. Wichtig:
   der Zelle KEIN display:block/flex geben — damit waere sie keine
   Tabellenzelle mehr, der Browser wickelt sie in eine anonyme Zelle und
   das colspan verfaellt (genau daran ist es zuvor gescheitert). */

/* Bild ueber dem Titel statt daneben — daneben blieb fuer den Titel in der
   schmalen Spalte zu wenig Platz. */
.ff-co-item__head { margin-bottom: 10px; }
.ff-co-item__img {
  display: block;
  width: 48px;
  height: 48px;
  margin-bottom: 8px;
  border-radius: 10px;
  border: 1px solid var(--border);
  object-fit: contain;
  background: var(--bg);
}
.ff-co-item__titlewrap { min-width: 0; }
.ff-co-item__title {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.35;
  /* Bewusst 'break-word' und nicht 'anywhere': der Titel soll an der
     Wortgrenze umbrechen und nur im Notfall im Wort. */
  overflow-wrap: break-word;
}
.ff-co-item__meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-top: 4px;
}
.ff-co-item__qty {
  font-size: 12px;
  font-weight: 500;
  color: var(--text2);
  white-space: nowrap;
}
.ff-co-item__price {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  text-align: right;
  white-space: nowrap;
}

/* Preisspalten duerfen notfalls im Wort umbrechen statt zu ueberlaufen.
   Hier bewusst 'anywhere' und nicht 'break-word' — nur 'anywhere' wirkt
   auch auf die Mindestbreite. Die Versandzeile ist ausgenommen: dort steht
   Fliesstext ("Kostenlose Lieferung"), der gehoert an der Wortgrenze
   umgebrochen und nicht mitten im Wort zerlegt. */
.woocommerce-checkout-review-order-table td.product-total,
.woocommerce-checkout-review-order-table tfoot td {
  overflow-wrap: anywhere;
  white-space: normal;
}
/* Steht bewusst nach der Regel darueber und ist spezifischer — damit gilt
   'anywhere' fuer die Betragsspalten, aber nicht fuer die Versandzeile. */
.woocommerce-checkout-review-order-table tr.shipping td {
  overflow-wrap: normal;
  word-break: normal;
}

/* ── Versandzeile ──
   Zwei Dinge liefen hier schief: der Versandart-Text erbt die Grossbuchstaben
   der Formular-Labels (.woocommerce-checkout .woocommerce label) und wird
   dadurch deutlich breiter als noetig, und die <ul> bringt den Browser-Default
   mit — rund 40px Einzug plus Aussenabstand, was in der schmalen Spalte kaum
   Platz fuer den Text uebrig laesst. */
.woocommerce-checkout-review-order-table tr.shipping ul#shipping_method,
.woocommerce-checkout-review-order-table tr.shipping .woocommerce-shipping-methods {
  list-style: none;
  margin: 0;
  padding: 0;
}
.woocommerce-checkout-review-order-table tr.shipping li { margin: 0; padding: 0; }
.woocommerce-checkout-review-order-table tr.shipping label {
  display: inline;
  margin: 0;
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  text-transform: none;
  letter-spacing: 0;
}
.woocommerce-checkout-review-order-table tr.shipping td { text-align: right; }

/* MwSt.-Hinweis in der Gesamtsumme unter den Betrag statt daneben */
.woocommerce-checkout-review-order-table tr.order-total .includes_tax {
  display: block;
  margin-top: 3px;
  font-size: 11px;
  font-weight: 500;
  color: var(--text3, #86868B);
}

/* Haengt Germanized darunter ohnehin eine eigene MwSt.-Zeile an, steht die
   Angabe doppelt da — einmal als Zusatz in der Gesamtsumme, einmal als
   eigene Zeile. In der schmalen Spalte bricht der Zusatz dann ueber drei
   Zeilen um. Also nur den doppelten Zusatz ausblenden; die gesetzlich
   noetige MwSt.-Angabe bleibt durch die Zeile darunter erhalten.
   Browser ohne :has() zeigen weiterhin beides — unschoen, aber nie falsch. */
.woocommerce-checkout-review-order-table tfoot:has(tr.order-tax) tr.order-total .includes_tax {
  display: none;
}

/* Woocommerce Germanized haengt eine eigene "inkl. X% MwSt."-Zeile per Hook
   an (tr.order-tax). Die kommt nicht aus review-order.php und hat deshalb
   keine der dort inline gesetzten Stile — ohne eigene Regel faellt sie auf
   den Browser-Default zurueck und steht optisch quer zu den Zeilen darueber. */
.woocommerce-checkout-review-order-table tr.order-tax th,
.woocommerce-checkout-review-order-table tr.order-tax td {
  padding: 10px 0 0;
  font-size: 12px;
  font-weight: 500;
  color: var(--text2);
  border-bottom: none;
}
.woocommerce-checkout-review-order-table tr.order-tax td { text-align: right; }

/* Letzte Zeile der Zusammenfassung nie mit Trennlinie abschliessen —
   welche Zeile das ist, haengt davon ab, was Germanized anhaengt. */
.woocommerce-checkout-review-order-table tfoot tr:last-child th,
.woocommerce-checkout-review-order-table tfoot tr:last-child td { border-bottom: none; }

/* Zahlarten (#payment): nur noch in woo-style.css ("Zahlarten + Bestellknopf") */

/* ── Thank You page ── */
.ff-thankyou {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 60px 24px;
  max-width: 640px;
  margin: 0 auto;
}
.ff-thankyou__icon {
  width: 72px; height: 72px;
  border-radius: 50%;
  background: #dcfce7;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 24px;
}
.ff-thankyou__icon svg { width: 36px; height: 36px; color: #16a34a; }
.ff-thankyou__title { font-size: 28px; font-weight: 800; color: var(--text); margin: 0 0 10px; }
.ff-thankyou__sub { font-size: 15px; color: var(--text2); margin: 0 0 36px; line-height: 1.6; }

.ff-thankyou__details {
  width: 100%;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r);
  overflow: hidden;
  margin-bottom: 24px;
  text-align: left;
}
.ff-thankyou__detail-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 20px;
  border-bottom: 1px solid var(--border);
  font-size: 14px;
}
.ff-thankyou__detail-row:last-child { border-bottom: none; }
.ff-thankyou__detail-label { color: var(--text2); font-weight: 500; }
.ff-thankyou__detail-value { font-weight: 700; color: var(--text); }

.ff-thankyou__actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 8px;
}

/* ── WC notices override ── */
.woocommerce-message,
.woocommerce-info {
  background: var(--card) !important;
  border: 1px solid var(--border) !important;
  border-left: 4px solid var(--accent) !important;
  border-radius: var(--r-sm) !important;
  color: var(--text) !important;
  box-shadow: none !important;
  padding: 14px 20px !important;
  font-size: 14px;
}
.woocommerce-error {
  background: rgba(239,68,68,.06) !important;
  border: 1px solid rgba(239,68,68,.2) !important;
  border-left: 4px solid #ef4444 !important;
  border-radius: var(--r-sm) !important;
  color: var(--text) !important;
  box-shadow: none !important;
  padding: 14px 20px !important;
  list-style: none;
  font-size: 14px;
}

/* ── Small button helpers ── */
.ff-btn-sm {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 16px;
  border-radius: var(--r-sm);
  font-size: 13px;
  font-weight: 600;
  border: 1.5px solid var(--border);
  background: var(--card);
  color: var(--text);
  cursor: pointer;
  text-decoration: none;
  font-family: var(--font);
  transition: all .2s;
}
.ff-btn-sm:hover { border-color: var(--text); color: var(--text); }
.ff-btn-sm--fill {
  background: var(--text);
  color: #fff !important;
  border-color: var(--text);
}
.ff-btn-sm--fill:hover { opacity: .85; }

/* ── Responsive ── */
@media (max-width: 600px) {
  .ff-checkout-page { padding: 20px 0 60px; }
  .ff-page-header__inner { flex-wrap: wrap; }
  .ff-steps { display: none; }
  .ff-cart-item { grid-template-columns: 56px 1fr auto; gap: 12px; padding: 12px 16px; }
  .ff-cart-item__img { width: 56px; height: 56px; }
  /* 24 px je Seite sind auf einem 360-px-Schirm ein Siebtel der Breite —
     und hier steht nichts als ein Eingabefeld und zwei Schalter. */
  .ff-cart-actions { flex-direction: column; align-items: stretch; padding: 12px 14px; }
  /* Feld und Schalter bleiben in EINER Zeile. Untereinander waren es drei
     Bloecke ueber die halbe Kartenhoehe, obwohl "Anwenden" neben dem Feld
     bequem Platz hat — das Feld nimmt, was uebrig bleibt. */
  .ff-coupon { flex-direction: row; align-items: stretch; }
  .ff-coupon input[type="text"] { width: auto; flex: 1 1 auto; min-width: 0; }
  .ff-coupon .ff-btn-sm { flex: 0 0 auto; white-space: nowrap; }
}

/* ── Express Payment Buttons (Stripe / Apple Pay / Google Pay) ── */
/* ── Express-Zahlarten in der Zusammenfassung ──
   Stripe (Apple Pay, Google Pay, Amazon Pay, Link) und PayPal setzen ihre
   Knoepfe per JavaScript in eigene Container direkt unter "Weiter zur Kasse".
   Beschriftung deshalb an den Stripe-Container haengen statt an einen eigenen
   Block. :has(*) reichte nicht: Stripe haengt auch ohne verfuegbare Wallets
   Kindknoten ein, und die Mindesthoehe unten blies deren leere iframes auf.
   Die Klasse ff-express-da setzt cart.php erst, wenn ein iframe wirklich
   Hoehe hat. */
.woocommerce-cart #wc-stripe-express-checkout-element:not(.ff-express-da) { margin-top: 0 !important; }
.woocommerce-cart #wc-stripe-express-checkout-element.ff-express-da::before {
  content: 'Express Checkout';
  display: block;
  text-align: center;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text3);
  margin: 18px 0 12px;
  padding-top: 18px;
  border-top: 1px solid var(--border);
}

/* Einheitliche Knopfhoehe — aber NUR als Mindestmass.
   Ein max-height hatte PayPal zerschnitten: dort stehen mehrere Knoepfe
   ("Mit PayPal zahlen", "Spaeter bezahlen", "SEPA") in EINEM Container,
   dessen Gesamthoehe damit auf die eines einzelnen Knopfes gedeckelt wurde. */
/* ALLES hier gilt NUR fuer den Warenkorb.
   In der Kasse stehen dieselben Knoepfe nebeneinander in einer Reihe statt
   untereinander in der schmalen Spalte — eine erzwungene Mindesthoehe und
   ein margin-top zwischen den Elementen haben dort das Raster verzogen
   (Apple Pay gestaucht und gegen die Nachbarn versetzt). */
/* Nur der Container, nicht jedes iframe: Stripe haengt auch einen 8 px hohen
   Steuerrahmen ein, den die Mindesthoehe zu einem leeren 44-px-Streifen aufblies. */
.woocommerce-cart #wc-stripe-express-checkout-element.ff-express-da .wc-stripe-express-checkout-element {
  min-height: 44px !important;
}
.woocommerce-cart #ppc-button-ppcp-gateway .paypal-buttons { margin: 0 !important; }

/* Gleichmaessige Abstaende zwischen den untereinander stehenden Knoepfen */
.woocommerce-cart #wc-stripe-express-checkout-element > * + *,
.woocommerce-cart #ppc-button-ppcp-gateway > * + * { margin-top: 8px !important; }
.woocommerce-cart #ppc-button-ppcp-gateway { margin-top: 8px; }

.woocommerce-cart #wc-stripe-express-checkout-element #wc-stripe-payment-request-button-instance,
.woocommerce-cart #wc-stripe-express-checkout-element .wc-stripe-payment-request-button { border-radius: var(--r-sm) !important; }
.woocommerce-cart #wc-stripe-express-checkout-element .wc-stripe-payment-request-button-separator { display: none; }

/* Zusammenfassung im Warenkorb: die Karte bringt KEINE eigene Polsterung mehr.
   cart_totals, der Kasse-Knopf und die Zahlungsknoepfe liefern ihre Abstaende
   selbst — die zusaetzlichen 24 px der Karte kamen obendrauf und haben die
   vollbreiten Knoepfe eingeklemmt. Nur die rechte Spalte, die Artikelkarte
   links behaelt ihre Polsterung. */
.woocommerce-cart .ff-cart-summe .ff-card__body { padding: 0; }
/* ... mit zwei Ausnahmen. Beide bringen keinen eigenen Rand mit und
   klebten deshalb an der Kartenkante: die Vertrauenszeile ganz unten und
   der Ratenzahlungs-Hinweis darueber. Sie holen sich ihren Abstand selbst,
   statt ihn der ganzen Karte zurueckzugeben — sonst waeren die vollbreiten
   Knoepfe wieder eingeklemmt. */
.woocommerce-cart .ff-cart-summe .ff-card__body > .ff-trust-row:last-child { padding-bottom: 20px; }
/* ── Die beiden Ratenangebote ueber dem Kasse-Knopf ──────────────────────
   Klarna (unseres) und PayPal (dessen Plugin) haengen am selben Haken und
   stehen untereinander. Sie sollen als EIN Block wirken: enger Abstand
   untereinander, deutlicher Abstand zum Knopf darunter. Ohne das klebten
   sie an den Summenzeilen und der Knopf stand in einer grossen Luecke. */
.woocommerce-cart .wc-proceed-to-checkout { padding-top: 14px; }
.woocommerce-cart .wc-proceed-to-checkout > .ff-bnpl { margin: 0 0 6px; }
.woocommerce-cart .wc-proceed-to-checkout > .ppcp-messages { margin: 0 0 6px; }
.woocommerce-cart .wc-proceed-to-checkout > .ppcp-messages:empty { display: none; margin: 0; }
/* Der Knopf bekommt seinen Abstand von hier, nicht von den Nachrichten —
   so bleibt er gleich, ob eine, beide oder keine der Zeilen erscheint. */
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button { margin-top: 14px !important; }

/* ── Checkout order review thumbnail row ── */
.woocommerce-checkout-review-order table.woocommerce-checkout-review-order-table td {
  vertical-align: middle;
  padding: 12px 0;
}
/* Hier stand: .product-name { display: flex; align-items: center; }
   Das stammte aus dem frueheren Thumbnail-Layout (Bild neben dem Namen in
   derselben Zelle) und ist seit dem Umbau der Artikelzeile nicht nur
   ueberfluessig, sondern schaedlich: sobald ein <td> display:flex (oder
   block) bekommt, ist es keine Tabellenzelle mehr. Der Browser wickelt es
   dann in eine anonyme Zelle — und dabei faellt das colspan="2" weg. Die
   Zelle bekam deshalb nur die Breite der ersten Spalte.
   Die Zelle bleibt jetzt eine echte Tabellenzelle; das Layout darin macht
   .ff-co-item selbst. */

/* ── Flag dropdown scrollbar ── */
.ff-flag-dropdown div::-webkit-scrollbar { width: 4px; }
.ff-flag-dropdown div::-webkit-scrollbar-track { background: transparent; }
.ff-flag-dropdown div::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }

/* ═══════════════════════════════════════════════════════════════════════
   DAMINA MODAL SYSTEM — migrated & adapted to FF-Wheels CSS tokens
   ═══════════════════════════════════════════════════════════════════════ */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Base modal overlay */
.dm-modal {
  display: none; position: fixed; inset: 0; z-index: 999999;
  background: rgba(0,0,0,0.5); backdrop-filter: blur(6px);
  align-items: center; justify-content: center;
}
.dm-modal.is-open { display: flex; }
.dm-modal__backdrop { position: absolute; inset: 0; }

/* Modal content box */
.dm-modal__content {
  position: relative; background: var(--card, #fff);
  border-radius: var(--r, 16px); border: 1px solid var(--border, rgba(0,0,0,.07));
  max-width: 640px; width: 90%; max-height: 88vh; overflow-y: auto;
  box-shadow: 0 24px 60px rgba(0,0,0,.18); animation: fadeInUp 0.28s ease; z-index: 1;
}

/* Modal header */
.dm-modal__header {
  display: flex; align-items: center; gap: 16px;
  padding: 20px 24px; border-bottom: 1px solid var(--border, rgba(0,0,0,.08));
  position: sticky; top: 0; background: var(--card, #fff); z-index: 2;
}
.dm-modal__header-img {
  width: 56px; height: 56px; border-radius: 10px; overflow: hidden;
  flex-shrink: 0; background: var(--bg, #f5f5f7);
  display: flex; align-items: center; justify-content: center;
}
.dm-modal__header-img img { width: 100%; height: 100%; object-fit: contain; }
.dm-modal__header-text { flex: 1; min-width: 0; }
.dm-modal__close {
  width: 32px; height: 32px; border-radius: 8px; border: none;
  background: transparent; cursor: pointer; display: flex; align-items: center;
  justify-content: center; color: var(--text2, #6E6E73); font-size: 20px;
  transition: background .2s; flex-shrink: 0;
}
.dm-modal__close:hover { background: var(--bg, #f5f5f7); color: var(--text, #1D1D1F); }

/* Zoll / size tabs */
.dm-modal__tabs {
  display: flex; gap: 4px; padding: 0 24px;
  border-bottom: 1px solid var(--border, rgba(0,0,0,.08));
  overflow-x: auto; position: sticky; top: 97px; background: var(--card, #fff); z-index: 2;
}
.dm-modal__tabs::-webkit-scrollbar { height: 0; }
.dm-modal__tab {
  padding: 14px 16px; font-size: 13px; font-weight: 700;
  color: var(--text2, #6E6E73); border-bottom: 2px solid transparent;
  cursor: pointer; white-space: nowrap; transition: all .2s;
  background: none; border-top: none; border-left: none; border-right: none;
  font-family: inherit;
}
.dm-modal__tab.is-active, .dm-modal__tab:hover {
  color: var(--text, #1D1D1F); border-bottom-color: var(--text, #1D1D1F);
}

/* Modal body */
.dm-modal__body { padding: 24px; }

/* ── Gutachten: PCD badge, filter chips, PDF links ── */
.dm-gutachten-pcd-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 14px; font-size: 12px; font-weight: 700;
  background: var(--bg, #f5f5f7); border-radius: 8px; color: var(--text, #1D1D1F);
  letter-spacing: .04em; margin-bottom: 12px;
}
.dm-gutachten-filters {
  display: flex; flex-direction: row; gap: 14px; margin-bottom: 14px; flex-wrap: wrap; align-items: center;
}
.dm-gutachten-filter-group { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.dm-gutachten-filter-label {
  font-size: 11px; font-weight: 700; color: var(--text2, #6E6E73);
  text-transform: uppercase; letter-spacing: .05em; margin-right: 2px;
}
.dm-gutachten-filter-chip {
  padding: 5px 12px; font-size: 12px; font-weight: 600; font-family: inherit;
  border: 1.5px solid var(--border, rgba(0,0,0,.1)); border-radius: 8px;
  background: var(--card, #fff); color: var(--text, #1D1D1F); cursor: pointer;
  transition: all .15s;
}
.dm-gutachten-filter-chip:hover { border-color: rgba(0,0,0,.22); }
.dm-gutachten-filter-chip.is-active {
  background: var(--text, #1D1D1F); color: #fff; border-color: var(--text, #1D1D1F);
}
.dm-gutachten-link-grid { display: flex; flex-direction: column; gap: 6px; }
.dm-gutachten-link {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px; border-radius: 10px;
  background: var(--bg, #f5f5f7); border: 1px solid var(--border, rgba(0,0,0,.06));
  text-decoration: none; color: var(--text, #1D1D1F);
  font-size: 13px; font-weight: 600; transition: all .15s;
}
.dm-gutachten-link:hover {
  background: var(--card, #fff); border-color: var(--border);
  box-shadow: 0 2px 10px rgba(0,0,0,.06);
}
.dm-gutachten-link__icon { font-size: 20px !important; color: #bf0711; flex-shrink: 0; }
.dm-gutachten-link span:nth-child(2) { flex: 1; }

/* Fahrzeugdialog (HSN/TSN, Kaskade, Badge) → assets/css/fahrzeug-dialog.css */

/* ── Qty stepper input: prevent WooCommerce/theme overrides ── */
.ff-cart-item__qty input.ff-qty-input,
.ff-cart-item__qty--sm input.ff-qty-input {
  width: 36px !important;
  min-width: 36px !important;
  max-width: 48px !important;
  flex: 0 0 36px !important;
  color: #1D1D1F !important;
  -webkit-text-fill-color: #1D1D1F !important;
  background: transparent !important;
  opacity: 1 !important;
  line-height: normal !important;
  padding: 0 !important;
  text-indent: 0 !important;
  font-size: 13px !important;
  visibility: visible !important;
  overflow: visible !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   WOOCOMMERCE NOTICES — Bento-styled, contained in site layout
   ═══════════════════════════════════════════════════════════════════════ */

/* Wrapper that keeps notices inside the .fx grid */
.ff-wc-notices-wrap {
  width: 100%;
  background: var(--bg, #f5f5f7);
  padding: 16px 0 0;
}

/* Reset WooCommerce's default full-bleed notice styles */
.woocommerce-notices-wrapper,
.woocommerce-error,
.woocommerce-message,
.woocommerce-info {
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  background: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  list-style: none !important;
  width: auto !important;
  float: none !important;
  clear: none !important;
}

/* Base notice pill style */
.woocommerce-notices-wrapper .woocommerce-message,
.woocommerce-notices-wrapper .woocommerce-info,
.woocommerce-notices-wrapper .woocommerce-error,
.ff-wc-notices-wrap .woocommerce-message,
.ff-wc-notices-wrap .woocommerce-info,
.ff-wc-notices-wrap .woocommerce-error {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 12px 16px !important;
  border-radius: 12px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  font-family: var(--font, 'Inter', sans-serif) !important;
  margin: 0 0 10px !important;
  line-height: 1.4 !important;
  border-left: 3px solid !important;
  background: var(--card, #fff) !important;
  box-shadow: 0 1px 6px rgba(0,0,0,.05) !important;
  list-style: none !important;
}

/* Success / updated */
.ff-wc-notices-wrap .woocommerce-message,
.woocommerce-notices-wrapper .woocommerce-message {
  border-color: #22c55e !important;
  color: #15803d !important;
}
.ff-wc-notices-wrap .woocommerce-message::before,
.woocommerce-notices-wrapper .woocommerce-message::before {
  font-family: 'Material Symbols Rounded', sans-serif !important;
  content: 'check_circle' !important;
  font-size: 18px !important;
  flex-shrink: 0 !important;
  font-weight: 300 !important;
  font-variation-settings: 'FILL' 1, 'wght' 300, 'GRAD' 0, 'opsz' 24 !important;
}

/* Info */
.ff-wc-notices-wrap .woocommerce-info,
.woocommerce-notices-wrapper .woocommerce-info {
  border-color: #3b82f6 !important;
  color: #1d4ed8 !important;
}
.ff-wc-notices-wrap .woocommerce-info::before,
.woocommerce-notices-wrapper .woocommerce-info::before {
  font-family: 'Material Symbols Rounded', sans-serif !important;
  content: 'info' !important;
  font-size: 18px !important;
  flex-shrink: 0 !important;
  font-variation-settings: 'FILL' 1, 'wght' 300, 'GRAD' 0, 'opsz' 24 !important;
}

/* Error */
.ff-wc-notices-wrap .woocommerce-error,
.woocommerce-notices-wrapper .woocommerce-error {
  border-color: #ef4444 !important;
  color: #b91c1c !important;
}
.ff-wc-notices-wrap .woocommerce-error::before,
.woocommerce-notices-wrapper .woocommerce-error::before {
  font-family: 'Material Symbols Rounded', sans-serif !important;
  content: 'error' !important;
  font-size: 18px !important;
  flex-shrink: 0 !important;
  font-variation-settings: 'FILL' 1, 'wght' 300, 'GRAD' 0, 'opsz' 24 !important;
}

/* Links inside notices (e.g. "Undo") */
.ff-wc-notices-wrap .woocommerce-message a,
.ff-wc-notices-wrap .woocommerce-info a,
.ff-wc-notices-wrap .woocommerce-error a,
.woocommerce-notices-wrapper .woocommerce-message a,
.woocommerce-notices-wrapper .woocommerce-info a,
.woocommerce-notices-wrapper .woocommerce-error a {
  margin-left: auto !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  color: inherit !important;
  opacity: .75 !important;
  font-size: 12px !important;
  white-space: nowrap !important;
}
.ff-wc-notices-wrap a.button,
.woocommerce-notices-wrapper a.button {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  box-shadow: none !important;
}

/* ═══════════════════════════════════════════════════════════
   QTY INPUT — force dark color against white-body inheritance
   ═══════════════════════════════════════════════════════════ */
.ff-cart-item__qty input,
.ff-cart-item__qty input.ff-qty-input,
.ff-cart-item__qty--sm input,
.ff-cart-item__qty--sm input.ff-qty-input {
  color: #1D1D1F !important;
  -webkit-text-fill-color: #1D1D1F !important;
  opacity: 1 !important;
}

/* ═══════════════════════════════════════════════════════════
   WC NOTICES — constrained inside .fx container
   ═══════════════════════════════════════════════════════════ */

/* The notices-wrapper is inside the cart page — limit its width + reset WC styles */
.ff-checkout-page .woocommerce-notices-wrapper,
.woocommerce-cart .woocommerce-notices-wrapper,
.woocommerce-checkout .woocommerce-notices-wrapper {
  max-width: var(--fx-max, 1180px) !important;
  margin: 0 auto !important;
  padding: 16px var(--fx-pad, 24px) 0 !important;
  box-sizing: border-box !important;
}

/* Individual notice pills */
.woocommerce-notices-wrapper .woocommerce-message,
.woocommerce-notices-wrapper .woocommerce-info,
.woocommerce-notices-wrapper .woocommerce-error li,
.woocommerce-notices-wrapper ul.woocommerce-error {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 13px 16px !important;
  margin: 0 0 10px !important;
  border-radius: 12px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  font-family: var(--font, 'Inter', sans-serif) !important;
  list-style: none !important;
  background: var(--card, #fff) !important;
  box-shadow: 0 1px 8px rgba(0,0,0,.06) !important;
  border: none !important;
  border-left: 3px solid !important;
  color: var(--text, #1D1D1F) !important;
  -webkit-text-fill-color: var(--text, #1D1D1F) !important;
}

.woocommerce-notices-wrapper .woocommerce-message {
  border-color: #22c55e !important;
}
.woocommerce-notices-wrapper .woocommerce-info {
  border-color: #3b82f6 !important;
}
.woocommerce-notices-wrapper ul.woocommerce-error,
.woocommerce-notices-wrapper .woocommerce-error li {
  border-color: #ef4444 !important;
}

/* Remove WC's own ::before icons — we rely on text */
.woocommerce-notices-wrapper .woocommerce-message::before,
.woocommerce-notices-wrapper .woocommerce-info::before,
.woocommerce-notices-wrapper .woocommerce-error::before {
  display: none !important;
}

/* Links / buttons inside notices */
.woocommerce-notices-wrapper .woocommerce-message a.restore-item,
.woocommerce-notices-wrapper .woocommerce-message a.button,
.woocommerce-notices-wrapper .woocommerce-info a.button {
  margin-left: auto !important;
  background: transparent !important;
  border: 1px solid var(--border, rgba(0,0,0,.12)) !important;
  border-radius: 8px !important;
  padding: 5px 12px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  color: var(--text, #1D1D1F) !important;
  -webkit-text-fill-color: var(--text, #1D1D1F) !important;
  white-space: nowrap !important;
  box-shadow: none !important;
}

/* ── Notices outer wrapper: aligns to content width ── */
.ff-notices-outer { background: var(--bg, #f5f5f7); padding: 12px 0 0; }
.ff-notices-outer .fx { display: block; }
.ff-notices-outer .woocommerce-notices-wrapper { width: 100%; }
.ff-notices-outer .woocommerce-notices-wrapper:empty { display: none; }

/* ═══════════════════════════════════════════════════════════════════════
   KOMPLETTRAD BUNDLE — Cart / MiniCart / Checkout
   ═══════════════════════════════════════════════════════════════════════ */

/* Bundle title badge */
.ff-bundle-title {
  font-size: 14px; font-weight: 700; color: var(--text);
  display: block; line-height: 1.3;
}
.ff-bundle-badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px; border-radius: 5px;
  background: rgba(184,134,11,.08);
  font-size: 10px; font-weight: 700; letter-spacing: .04em;
  color: var(--accent, #B8860B); text-transform: uppercase;
  margin-bottom: 5px;
}

/* WooCommerce item data list — bundle breakdown */
.woocommerce-cart-form .woocommerce-cart-item__data,
.cart_item .wc-item-meta,
.woocommerce-checkout-review-order .wc-item-meta,
.widget_shopping_cart_content .wc-item-meta {
  list-style: none !important;
  margin: 8px 0 0 !important;
  padding: 0 !important;
}
.woocommerce-cart-form .woocommerce-cart-item__data dt,
.cart_item .wc-item-meta dt,
.woocommerce-checkout-review-order .wc-item-meta dt,
.widget_shopping_cart_content .wc-item-meta dt {
  display: none !important; /* hidden, info shown inline in value */
}
.woocommerce-cart-form .woocommerce-cart-item__data dd,
.cart_item .wc-item-meta dd,
.woocommerce-checkout-review-order .wc-item-meta dd,
.widget_shopping_cart_content .wc-item-meta dd {
  margin: 0 0 4px !important;
  padding: 0 !important;
}

/* Bundle sub-row (each .wc-item-meta li) */
.ff-cart-bundle-row {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 10px; border-radius: 8px;
  background: var(--bg, #f5f5f7);
  font-size: 11px; line-height: 1.4;
  margin-bottom: 4px;
}
.ff-cart-bundle-row__icon {
  width: 22px; height: 22px; border-radius: 6px;
  background: var(--card, #fff);
  border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; font-size: 12px;
}
.ff-cart-bundle-row__label {
  flex: 1; color: var(--text2); font-weight: 500;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ff-cart-bundle-row__price {
  font-weight: 700; color: var(--text); flex-shrink: 0;
  font-size: 11px;
}
.ff-cart-bundle-row--included .ff-cart-bundle-row__price { color: #1B8A3A; }
.ff-cart-bundle-row--rdks .ff-cart-bundle-row__price    { color: var(--accent, #B8860B); }

/* Override WC item data to use our bundle rows */
.ff-bundle-meta-list {
  list-style: none; margin: 8px 0 0; padding: 0;
  display: flex; flex-direction: column; gap: 3px;
}
.ff-bundle-meta-list li {
  display: flex; align-items: center; gap: 8px;
  padding: 5px 9px; border-radius: 7px;
  background: var(--bg, #f5f5f7);
  font-size: 11px; line-height: 1.3; color: var(--text2);
}
.ff-bundle-meta-list li strong {
  font-weight: 600; color: var(--text); min-width: 60px;
}

/* WooCommerce default item_data dl → override to row layout */
.woocommerce-cart .cart-collaterals table.shop_table .cart_item td.product-name dl.variation,
.woocommerce-cart .cart_item td.product-name dl,
.woocommerce-checkout-review-order .product-name dl {
  margin-top: 8px;
}
.woocommerce-cart .cart_item td.product-name dl dt,
.woocommerce-checkout-review-order .product-name dl dt {
  font-size: 10px; font-weight: 700; color: var(--text2);
  text-transform: uppercase; letter-spacing: .04em;
  margin: 4px 0 1px;
}
.woocommerce-cart .cart_item td.product-name dl dd,
.woocommerce-checkout-review-order .product-name dl dd {
  font-size: 11px; color: var(--text); margin: 0 0 2px;
  padding: 4px 8px; background: var(--bg); border-radius: 6px;
  display: inline-block;
}

/* Qty label "pro Satz" hint */
.ff-bundle-qty-hint {
  font-size: 10px; color: var(--text3); margin-top: 3px;
  display: block;
}

/* ═══════════════════════════════════════════════════════
   BUNDLE POSITIONS — Cart + Checkout
   ═══════════════════════════════════════════════════════ */
.ff-cart-bundle {
  flex-wrap: wrap;
}
.ff-bundle-positions {
  display: flex; flex-direction: column; gap: 2px;
  margin-top: 8px; padding: 8px 0 4px 12px;
  border-left: 2.5px solid var(--accent, #B8860B);
}

/* Single position row */
.ff-bundle-pos {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px; border-radius: 9px;
  background: var(--bg, #f5f5f7);
  transition: background .15s;
}
.ff-bundle-pos:hover {
  background: rgba(0,0,0,.04);
}

/* Icon container */
.ff-bundle-pos__icon {
  width: 28px; height: 28px; border-radius: 8px;
  background: rgba(0,0,0,.04);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.ff-bundle-pos__icon .material-symbols-rounded {
  color: var(--text3, #86868B);
}

/* Body = title + meta row */
.ff-bundle-pos__body {
  flex: 1; min-width: 0;
  overflow: hidden;
}
.ff-bundle-pos__title,
.ff-bundle-pos__label {
  font-size: 12px; font-weight: 600;
  color: var(--text, #1D1D1F); line-height: 1.3;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  display: block;
}
.ff-bundle-pos__meta {
  display: flex; flex-wrap: wrap; gap: 4px 8px;
  margin-top: 2px;
}
.ff-bundle-pos__sku {
  font-size: 10px; font-weight: 600;
  color: var(--text3); letter-spacing: .02em;
  padding: 1px 6px; border-radius: 4px;
  background: rgba(0,0,0,.04);
}
.ff-bundle-pos__detail {
  font-size: 10px; color: var(--text3);
}

/* Price */
.ff-bundle-pos__price {
  font-size: 12px; font-weight: 700;
  color: var(--text, #1D1D1F);
  flex-shrink: 0; white-space: nowrap;
}

/* Variant: inclusive / green */
.ff-bundle-pos--ok {
  background: rgba(27, 138, 58, .04);
}
.ff-bundle-pos--ok .ff-bundle-pos__icon {
  background: rgba(27, 138, 58, .08);
}

/* Variant: RDKS / accent */
.ff-bundle-pos--accent {
  background: rgba(184, 134, 11, .04);
}
.ff-bundle-pos--accent .ff-bundle-pos__icon {
  background: rgba(184, 134, 11, .08);
}

/* Checkout-column variant — more compact.
   Der linke Einzug traegt die Klammer-Linie der Gruppe, kostet aber Breite;
   in der schmalen Spalte reichen dafuer 8px. */
.ff-bundle-positions--co {
  padding: 6px 0 2px 8px;
  gap: 2px;
}
.ff-bundle-positions--co .ff-bundle-pos {
  padding: 6px 8px;
  gap: 8px;
}
/* Beschreibungszeile (Groesse/ET/Lochkreis bzw. Reifenmasse) darf umbrechen,
   statt die Karte aufzuweiten. */
.ff-bundle-positions--co .ff-bundle-pos__sku {
  white-space: normal;
  line-height: 1.35;
}
.ff-bundle-positions--co .ff-bundle-pos__icon {
  width: 22px; height: 22px; border-radius: 6px;
}
.ff-bundle-positions--co .ff-bundle-pos__icon .material-symbols-rounded { font-size: 13px; }
.ff-bundle-positions--co .ff-bundle-pos__title,
.ff-bundle-positions--co .ff-bundle-pos__label { font-size: 11px; }
.ff-bundle-positions--co .ff-bundle-pos__sku { font-size: 9px; }
.ff-bundle-positions--co .ff-bundle-pos__price { font-size: 11px; }

/* ═══════════════════════════════════════════════════════
   MINI-CART BUNDLE POSITIONS
   ═══════════════════════════════════════════════════════ */
.ff-mc-bundle-positions {
  display: flex; flex-direction: column; gap: 1px;
  margin-bottom: 6px; padding-left: 8px;
  border-left: 2px solid var(--accent, #B8860B);
}

/* Single minicart position row */
.ff-mc-pos {
  display: flex; align-items: center; gap: 6px;
  padding: 4px 8px; border-radius: 6px;
  background: var(--bg, #f5f5f7);
  min-width: 0; overflow: hidden;
}

/* Icon */
.ff-mc-pos__icon {
  font-size: 12px; color: var(--text3, #86868B);
  flex-shrink: 0; width: 16px; text-align: center;
}

/* Body */
.ff-mc-pos__body {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; gap: 1px;
  overflow: hidden;
}
.ff-mc-pos__title {
  font-size: 10px; font-weight: 600;
  color: var(--text, #1D1D1F);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  display: block;
}
.ff-mc-pos__sku {
  font-size: 9px; font-weight: 500;
  color: var(--text3); white-space: nowrap;
  padding: 0 4px; border-radius: 3px;
  background: rgba(0,0,0,.03);
  display: inline-block;
}

/* Price */
.ff-mc-pos__price {
  font-size: 10px; font-weight: 700;
  color: var(--text, #1D1D1F);
  flex-shrink: 0; white-space: nowrap;
}

/* Minicart variants */
.ff-mc-pos--ok  { background: rgba(27, 138, 58, .04); }
.ff-mc-pos--accent { background: rgba(184, 134, 11, .04); }


/* ═══════════════════════════════════════════════
   Warenkorb: Zusammenfassung (WooCommerce cart-totals)
   ───────────────────────────────────────────────
   Das Template dafuer kommt von WooCommerce und erbt die Optik der grossen
   .shop_table (Rahmen, Kopfzeile in Versalien, 14/16px Zellenpadding). In der
   schmalen rechten Spalte wirkt das viel zu wuchtig und die Gesamtsumme lief
   aus der Karte heraus. Hier auf dieselbe Zeilenoptik wie die Kassen-
   Zusammenfassung (.ff-summary-row) gebracht.
   ═══════════════════════════════════════════════ */
.woocommerce-cart .cart_totals h2 { display: none; }

/* Beschriftung NICHT doppelt.
   WooCommerce baut die Summentabelle als "shop_table_responsive": jede
   Zelle traegt die Beschriftung ein zweites Mal in 'data-title', und
   woocommerce-smallscreen.css schreibt sie unter 768 px per ::before davor
   ("Zwischensumme: 1.142,92 €"). Gedacht ist das fuer den Fall, dass die
   Kopfspalte auf schmalen Schirmen ausgeblendet wird.

   Hier wird sie aber nicht ausgeblendet: unsere Zeilen sind Flex-Zeilen mit
   sichtbarem <th> links und Betrag rechts. Beides zusammen ergab
   "Zwischensumme  Zwischensumme: 1.142,92 €" — jede Zeile doppelt
   beschriftet.

   Die eigene Beschriftung bleibt, die eingeblendete faellt weg. */
.woocommerce-cart .cart_totals table.shop_table tr td::before { content: none; }

.woocommerce-cart .cart_totals table.shop_table {
  border: none;
  border-radius: 0;
  margin: 0;
  table-layout: fixed;
  width: 100%;
}
.woocommerce-cart .cart_totals table.shop_table thead { display: none; }
.woocommerce-cart .cart_totals table.shop_table tr {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--border, rgba(0,0,0,.09));
}
.woocommerce-cart .cart_totals table.shop_table tr:last-child { border-bottom: none; }

.woocommerce-cart .cart_totals table.shop_table th,
.woocommerce-cart .cart_totals table.shop_table td {
  display: block;
  padding: 0;
  border: none;
  background: none;
  font-size: 14px;
  line-height: 1.4;
  vertical-align: baseline;
}
.woocommerce-cart .cart_totals table.shop_table th {
  flex: 0 1 auto;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text2, #6E6E73);
  white-space: normal;
}
.woocommerce-cart .cart_totals table.shop_table td {
  flex: 1 1 auto;
  min-width: 0;
  text-align: right;
  font-weight: 600;
  color: var(--text, #1D1D1F);
  overflow-wrap: break-word;
}
.woocommerce-cart .cart_totals table.shop_table td p { margin: 0; }

/* Gesamtsumme hervorheben — wie .ff-summary-row--total in der Kasse */
.woocommerce-cart .cart_totals table.shop_table tr.order-total th {
  font-size: 15px;
  font-weight: 700;
  color: var(--text, #1D1D1F);
}
.woocommerce-cart .cart_totals table.shop_table tr.order-total td {
  font-size: 22px;
  font-weight: 800;
}
.woocommerce-cart .cart_totals table.shop_table tr.order-total .includes_tax,
.woocommerce-cart .cart_totals table.shop_table .includes_tax {
  display: block;
  margin-top: 2px;
  font-size: 12px;
  font-weight: 500;
  color: var(--text3, #86868B);
}

/* Versandliste (Liefermethoden + Rechner) kompakt halten */
.woocommerce-cart .cart_totals .woocommerce-shipping-methods,
.woocommerce-cart .cart_totals ul#shipping_method {
  margin: 0;
  padding: 0;
  list-style: none;
  text-align: right;
}
.woocommerce-cart .cart_totals ul#shipping_method li { margin: 0 0 4px; }
.woocommerce-cart .cart_totals ul#shipping_method li:last-child { margin-bottom: 0; }
.woocommerce-cart .cart_totals .woocommerce-shipping-destination {
  margin: 6px 0 0;
  font-size: 12px;
  font-weight: 500;
  color: var(--text3, #86868B);
}
.woocommerce-cart .cart_totals .shipping-calculator-button {
  font-size: 12px;
  font-weight: 600;
  color: var(--text2, #6E6E73);
  text-decoration: underline;
}

/* ═══════════════════════════════════════════════
   Kasse — Nachbesserungen
   ═══════════════════════════════════════════════ */

/* ── Firmenname: standardmaessig eingeklappt ──
   Das Feld bekommt in functions.php die Klasse .ff-company-field, der Toggle in
   form-checkout.php schaltet .is-visible. Die zugehoerige Regel fehlte, deshalb
   stand dort dauerhaft ein leeres, unbeschriftetes Eingabefeld. */
.woocommerce-checkout .ff-company-field { display: none; }
.woocommerce-checkout .ff-company-field.is-visible { display: block; }
#ff-show-company:hover { color: var(--text) !important; }

/* ── Textarea wie die uebrigen Felder ──
   Das Theme stylt nur input/select; die Bestellhinweise blieben im
   Browser-Default (eckig, weiss, 7px Padding, frei skalierbar). */
.woocommerce-checkout textarea,
.woocommerce-checkout .form-row textarea,
.woocommerce-checkout textarea#order_comments,
.woocommerce-checkout .woocommerce textarea {
  width: 100%;
  min-height: 96px;
  padding: 12px 16px;
  border: 1px solid rgba(0, 0, 0, .04);
  border-radius: 14px;
  background: #F5F5F7;
  font-family: inherit;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text, #1D1D1F);
  box-sizing: border-box;
  resize: vertical;
  transition: background .2s, border-color .2s;
}
.woocommerce-checkout textarea:focus,
.woocommerce-checkout textarea#order_comments:focus {
  outline: none;
  background: #fff;
  border-color: rgba(0, 0, 0, .18);
}
.woocommerce-checkout textarea::placeholder { color: var(--text3, #86868B); }

/* ── Checkbox-Labels sind Fliesstext, keine Feldbeschriftungen ──
   Die Feldregel (.woocommerce-checkout .woocommerce label) setzt 12px,
   VERSALIEN und Sperrung — auf der Germanized-Einwilligung sah das aus wie
   eine Fehlermeldung. */
.woocommerce-checkout label.checkbox,
.woocommerce-checkout .wc-gzd-checkbox-placeholder label,
.woocommerce-checkout .woocommerce label.checkbox,
.woocommerce-checkout .woocommerce .wc-gzd-checkbox-placeholder label,
.woocommerce-checkout .woocommerce-form__label-for-checkbox,
.woocommerce-checkout .woocommerce .woocommerce-form__label-for-checkbox {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: normal;
  text-transform: none;
  color: var(--text2, #6E6E73);
  cursor: pointer;
}
.woocommerce-checkout .wc-gzd-checkbox-placeholder {
  margin: 0 0 16px;
  padding: 14px 16px;
  border: 1px solid var(--border, rgba(0,0,0,.09));
  border-radius: 14px;
  background: #FAFAFA;
}
.woocommerce-checkout .wc-gzd-checkbox-placeholder input[type="checkbox"] {
  flex: 0 0 auto;
  width: 17px;
  height: 17px;
  margin: 1px 0 0;
  accent-color: #1D1D1F;
  cursor: pointer;
}
.woocommerce-checkout .wc-gzd-checkbox-placeholder a {
  color: var(--text, #1D1D1F);
  font-weight: 600;
  text-decoration: underline;
}
.woocommerce-checkout .wc-gzd-checkbox-placeholder .required {
  color: #C0392B;
  text-decoration: none;
}

/* Zahlungsartenliste (min-width, Umbruch): in woo-style.css zusammengefuehrt */

/* ── Spezifitaets-Nachzieher ──
   woo-style.css und Germanized' layout-styles.css werden nach dieser Datei
   geladen und gewinnen sonst bei gleicher Spezifitaet. */
/* Hinweis: .woocommerce-checkout haengt am <form>, nicht am <body> — deshalb
   hier ohne body-Praefix, dafuer mit der ID fuer ausreichende Spezifitaet. */
.woocommerce-checkout textarea#order_comments,
.woocommerce textarea#order_comments,
textarea#order_comments {
  background: #F5F5F7;
}
.woocommerce-checkout textarea#order_comments:focus,
textarea#order_comments:focus { background: #fff; }

.woocommerce-checkout #order_review .wc-gzd-checkbox-placeholder p.form-row label,
.woocommerce-checkout #order_review .wc-gzd-checkbox-placeholder label,
.woocommerce-checkout #order_review .wc-gzd-checkbox-placeholder p.form-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0;
  padding: 0;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: normal;
  text-transform: none;
  color: var(--text2, #6E6E73);
}
.woocommerce-checkout #order_review .wc-gzd-checkbox-placeholder p.form-row { display: block; }

/* Radio-Mindestbreite der Zahlarten: in woo-style.css zusammengefuehrt */

/* ═══════════════════════════════════════════════════════
   Beratungs-Box im Warenkorb
   ───────────────────────────────────────────────────────
   Bewusst ruhiger als die Karten darueber: heller Grund, kein Rahmen in
   Signalfarbe, kein konkurrierender Vollflaechen-Knopf. Sie steht unter
   dem Warenkorb und soll ein Angebot sein, keine Huerde vor der Kasse.
   ═══════════════════════════════════════════════════════ */
/* Raster statt Flex-Zeile: die Bewertungszeile muss am Schreibtisch unter
   dem Text stehen (linksbuendig zu ihm) und auf dem Telefon neben den
   Gesichtern. Mit Flex ginge das nur, indem man sie zweimal ausgibt. */
.ff-berat {
  display: grid;
  /* Drei Spalten, und die Note steht UNTER dem Text — nicht als vierte
     Spalte daneben. Als eigene Spalte nahm sie mit ihrem 'nowrap' rund
     230 px weg, dazu die Schalter rund 330: fuer die Ueberschrift blieben
     etwa 200 px, und "Noch eine Frage zu deiner Zusammenstellung?" lief
     ueber drei Zeilen, waehrend daneben Platz frei war. Unter dem Text
     kostet sie keine Breite und steht linksbuendig zu ihm. */
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas:
    "koepfe text  aktionen"
    "koepfe trust aktionen";
  align-items: center;
  column-gap: 16px;
  row-gap: 10px;
  /* Abstand nach oben liefert das Raster (row-gap) — ein eigener
     Aussenrand kaeme dort obendrauf. */
  padding: 18px 20px;
  border: 1px solid var(--border);
  border-radius: var(--r);
  background: var(--card);
}
.ff-berat__köpfe   { grid-area: koepfe; }
.ff-berat__text    { grid-area: text; }
.ff-berat__trust   { grid-area: trust; }
.ff-berat__aktionen{ grid-area: aktionen; }
.ff-berat__köpfe { display: flex; flex-shrink: 0; }
.ff-berat__kopf {
  width: 40px; height: 40px; border-radius: 50%;
  margin-left: -10px; /* leichte Ueberlappung — wirkt als Gruppe */
  border: 2px solid var(--card);
  background: var(--bg);
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 700; color: var(--text2);
  overflow: hidden;
}
.ff-berat__kopf:first-child { margin-left: 0; }
.ff-berat__kopf img { width: 100%; height: 100%; object-fit: cover; }
.ff-berat__text { min-width: 0; align-self: end; }
/* Bewertungszeile im Beratungsbanner — dezent, dritte Zeile unter dem Text.
   Bewusst kein eigener Kasten und keine grossen Sterne: sie belegt das
   Angebot darueber, sie wirbt nicht daneben. */
.ff-berat__trust { margin: 0; }
/* Linksbuendig unter dem Text, mit etwas Luft dazwischen. */
.ff-berat__trust { justify-self: start; align-self: start; margin: 2px 0 0; white-space: nowrap; }
.ff-berat__trust .ff-gtrust {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; color: var(--text2); text-decoration: none;
  /* Rahmen und Abstaende stammen aus der Kopfzeile, wo die Zeile neben dem
     Logo an einer Trennlinie haengt. Hier steht sie frei. */
  margin: 0; padding: 0; border: none; align-self: auto;
}
.ff-berat__trust .ff-gtrust:hover { color: var(--text); }
.ff-berat__trust .ff-gtrust__note { font-weight: 700; color: var(--text); }
.ff-berat__trust .ff-gtrust__zahl { color: var(--text3); }

.ff-berat__titel { margin: 0 0 3px; font-size: 14px; font-weight: 700; color: var(--text); }
.ff-berat__sub   { margin: 0; font-size: 12.5px; line-height: 1.45; color: var(--text2); }
.ff-berat__aktionen { display: flex; gap: 8px; flex-shrink: 0; flex-wrap: wrap; }
.ff-berat__btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 9px 14px; border-radius: var(--r-sm);
  border: 1.5px solid var(--border); background: var(--card);
  font-family: var(--font); font-size: 13px; font-weight: 600; color: var(--text);
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: border-color .15s, background .15s;
}
.ff-berat__btn:hover { border-color: var(--text3); }
.ff-berat__btn--primär { background: var(--text); border-color: var(--text); color: #fff; }
.ff-berat__btn--primär:hover { opacity: .88; }
.ff-berat__btn .material-symbols-rounded { font-size: 17px; }

/* Dialog */
.ff-berat-ov { position: fixed; inset: 0; z-index: 9998; background: rgba(0,0,0,.45); }
.ff-berat-dlg {
  position: fixed; z-index: 9999; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: min(440px, calc(100vw - 32px));
  max-height: min(88dvh, 720px); overflow-y: auto;
  background: var(--card); border-radius: var(--r);
  padding: 24px; box-shadow: 0 20px 60px rgba(0,0,0,.22);
}
.ff-berat-dlg__zu {
  position: absolute; top: 12px; right: 12px;
  width: 30px; height: 30px; border-radius: 50%;
  border: 1px solid var(--border); background: var(--bg);
  font-size: 17px; line-height: 1; color: var(--text2); cursor: pointer;
}
.ff-berat-dlg__titel { margin: 0 0 4px; font-size: 17px; font-weight: 800; color: var(--text); }
.ff-berat-dlg__sub   { margin: 0 0 16px; font-size: 13px; line-height: 1.5; color: var(--text2); }
.ff-berat-dlg label {
  display: block; margin-bottom: 12px;
  font-size: 12px; font-weight: 600; color: var(--text2);
}
.ff-berat-dlg label span { font-weight: 400; opacity: .7; }
.ff-berat-dlg input, .ff-berat-dlg textarea {
  width: 100%; box-sizing: border-box; margin-top: 5px;
  padding: 10px 12px; border: 1.5px solid var(--border);
  border-radius: var(--r-sm); background: var(--bg);
  font-family: var(--font); font-size: 14px; color: var(--text);
}
.ff-berat-dlg input:focus, .ff-berat-dlg textarea:focus { outline: none; border-color: var(--text); }
.ff-berat-dlg textarea { resize: vertical; }
.ff-berat-dlg #ff-berat-send { width: 100%; padding: 12px; }
.ff-berat-dlg__fehler { margin: 0 0 10px; font-size: 12.5px; color: #dc2626; }
.ff-berat-dlg__ok { text-align: center; padding: 8px 0; }
.ff-berat-dlg__ok .material-symbols-rounded { font-size: 40px; color: #1B8A3A; }
.ff-berat-dlg__ok p { margin: 8px 0 12px; font-size: 14px; font-weight: 600; color: var(--text); }
.ff-berat-dlg__ok a { font-size: 13px; color: var(--text2); }

/* Geteilte Konfiguration */
.ff-konfig-pos { display: flex; gap: 12px; align-items: flex-start; padding: 12px 0; border-bottom: 1px solid var(--border); }
.ff-konfig-pos:last-of-type { border-bottom: none; }
.ff-konfig-pos__img { width: 52px; height: 52px; object-fit: contain; border-radius: 10px; border: 1px solid var(--border); background: var(--bg); flex-shrink: 0; }
.ff-konfig-pos__body { flex: 1 1 auto; min-width: 0; font-size: 13px; color: var(--text); }
.ff-konfig-pos__meta { font-size: 12px; color: var(--text2); margin-top: 2px; }
.ff-konfig-pos__preis { font-weight: 700; white-space: nowrap; }
.ff-konfig-summe { display: flex; justify-content: space-between; align-items: baseline; margin-top: 14px; padding-top: 14px; border-top: 2px solid var(--text); font-size: 16px; }

@media (max-width: 640px) {
  /* Auf dem Telefon stehen Gesichter und Note nebeneinander in der ersten
     Zeile — der Platz rechts neben den drei Koepfen war sonst leer —,
     darunter Text und Schalter ueber die volle Breite. */
  .ff-berat {
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas:
      "koepfe   trust"
      "text     text"
      "aktionen aktionen";
    align-items: center;
    padding: 16px;
    column-gap: 12px;
    row-gap: 10px;
  }
  .ff-berat__trust { justify-self: start; align-self: center; margin: 0; }
  .ff-berat__aktionen { width: 100%; }
  .ff-berat__btn { flex: 1 1 auto; }
  .ff-berat-dlg { padding: 20px; }
}

/* ── Leerer Warenkorb ── */
.ff-cart-leer { text-align: center; padding: 64px 24px; }
.ff-cart-leer__icon {
  font-size: 48px; color: var(--text2); display: block; margin-bottom: 16px;
}
.ff-cart-leer__titel {
  font-size: 18px; font-weight: 700; color: var(--text); margin: 0 0 8px;
}
.ff-cart-leer__text {
  font-size: 14px; color: var(--text2); margin: 0 0 24px;
}
.ff-cart-leer__aktionen {
  display: flex; flex-wrap: wrap; gap: 10px; justify-content: center;
}
@media (max-width: 480px) {
  .ff-cart-leer { padding: 48px 16px; }
  .ff-cart-leer__aktionen .btn { width: 100%; justify-content: center; }
}


/* ── FAQ im Warenkorb ───────────────────────────────────────────────
   Nutzt das Akkordeon der Startseite (homepage.css ist hier ohnehin
   geladen). Angepasst wird nur, was der andere Ort verlangt: der
   Abschnitt sitzt in einem bereits gesetzten Raster, braucht also keine
   eigene Randbreite, und die Karte darf schmaler atmen als auf einer
   Startseite, die nichts anderes zu tun hat. */
.ff-faq--warenkorb { padding: 32px 0 8px; }
.ff-faq--warenkorb .ff-faq__card { padding: 28px 32px; }
.ff-faq--warenkorb .ff-faq__grid { gap: 32px; grid-template-columns: .5fr 1fr; }
.ff-faq--warenkorb .ff-faq__header .t-h2 { font-size: 22px; }
.ff-faq--warenkorb .ff-faq__header .t-body { font-size: 13px; }
.ff-faq--warenkorb .ff-faq__q { padding: 15px 0; font-size: 13.5px; }
/* Die Antworten hier sind laenger als auf der Startseite (RDKS, Eintragung);
   200 px haetten sie unten abgeschnitten. */
.ff-faq--warenkorb .ff-faq__item.is-open .ff-faq__a { max-height: 420px; }

@media (max-width: 860px) {
  .ff-faq--warenkorb { padding: 24px 0 4px; }
  .ff-faq--warenkorb .ff-faq__card { padding: 22px; }
  .ff-faq--warenkorb .ff-faq__grid { grid-template-columns: 1fr; gap: 14px; }
  .ff-faq--warenkorb .ff-faq__header .t-body { display: none; }
}


/* ═══════════════════════════════════════════════════════════════════
   Telefon — fuenf Stellen, an denen Platz verschenkt wurde
   ═══════════════════════════════════════════════════════════════════ */

/* ── Warenkorb: Bild ueber die Position statt daneben ──
   72 px Bild plus 16 px Abstand sind auf einem 360-px-Schirm fast ein
   Viertel der Breite — und die Position darunter traegt Felge, Reifen und
   Montage in eigenen Karten, die genau diese Breite brauchen. Das Bild
   rueckt deshalb in die erste Zeile, neben Preis und Loeschen, und der
   Inhalt bekommt die volle Breite darunter. */
@media (max-width: 600px) {
  .ff-cart-item {
    grid-template-columns: 56px 1fr;
    grid-template-areas:
      "bild preis"
      "info info";
    align-items: start;
    gap: 10px 12px;
  }
  .ff-cart-item__img   { grid-area: bild; }
  .ff-cart-item__right { grid-area: preis; justify-self: end; text-align: right; }
  .ff-cart-item__info  { grid-area: info; }
}

/* ── Kasse: Abstaende zusammennehmen ──
   Aussen 16 px Seitenrand, dann 14 px Kartenrand, dazu 14 px zwischen jedem
   Feld und ein Grossbuchstaben-Etikett mit eigenem Abstand darueber: in der
   Summe blieb fuer den Inhalt weniger Platz als fuer den Rand darum. Die
   Felder bleiben gut treffbar (44 px Hoehe), alles andere rueckt zusammen. */
@media (max-width: 600px) {
  .ff-checkout-page { padding: 14px 0 44px; }
  .woocommerce-checkout .ff-card__header { padding: 12px 14px; gap: 10px; }
  .woocommerce-checkout .ff-card__body   { padding: 14px 12px; }
  .woocommerce-checkout .woocommerce .form-row { margin-bottom: 10px; }
  .woocommerce-checkout .woocommerce label { margin-bottom: 4px; font-size: 11px; }
  /* 16 px sind hier kein Geschmack, sondern Pflicht: Safari auf dem iPhone
     zoomt beim Antippen in JEDES Feld, dessen Schrift kleiner als 16 px
     ist. Danach steht die Seite verschoben, und der Nutzer muss von Hand
     zurueckzoomen — bei 14 px passierte das in der ganzen Kasse.
     Bewusst nicht ueber 'maximum-scale' im Viewport geloest: das nimmt
     allen das Zoomen, auch denen, die es brauchen. */
  .woocommerce-checkout .woocommerce input[type="text"],
  .woocommerce-checkout .woocommerce input[type="email"],
  .woocommerce-checkout .woocommerce input[type="tel"],
  .woocommerce-checkout .woocommerce input[type="number"],
  .woocommerce-checkout .woocommerce input[type="password"],
  .woocommerce-checkout .woocommerce select,
  .woocommerce-checkout .woocommerce textarea,
  .woocommerce-cart .ff-coupon input[type="text"] {
    font-size: 16px;
    padding: 10px 12px;
  }
  .woocommerce-checkout .ff-card { margin-bottom: 14px; }
}

/* ── Schrittanzeige im Bildkopf ──
   Drei Beschriftungen plus Trenner passen auf einem Telefon nicht in eine
   Zeile. Statt einer festen Kuerzung bleibt die Beschriftung des Schritts
   stehen, auf dem man GERADE ist — die anderen sind als Kreis mit Zahl
   (erledigt: Haken) weiterhin sichtbar und abzaehlbar.
   Bewusst kein Haken fuer "Bestaetigung": der Schritt ist noch nicht
   erledigt, und ein Haken davor wuerde genau das behaupten. */
@media (max-width: 700px) {
  .ff-vsteps { gap: 5px !important; font-size: 11px !important; }
  .ff-vstep__label { display: none; }
  .ff-vstep.is-aktiv .ff-vstep__label { display: inline; }
}
/* Unter 480 px stiess "Zurück zum Shop" an die Schrittanzeige (390 px:
   Text bis 181 px, Schritte ab 179 px). Der Pfeil bleibt, der Text
   steht im aria-label des Links. */
@media (max-width: 480px) {
  .woocommerce-cart .kfg__viz-steps .kfg__viz-step-label,
  .woocommerce-checkout .kfg__viz-steps .kfg__viz-step-label { display: none; }
}


/* ═══════════════════════════════════════════════════════════════════
   iPhone: kein Hineinzoomen beim Antippen eines Feldes
   ═══════════════════════════════════════════════════════════════════
   Safari auf iOS zoomt in JEDES Eingabefeld, dessen Schrift kleiner als
   16 px ist — danach steht die Seite verschoben, und man muss von Hand
   zurueckzoomen. In Warenkorb und Kasse traf das fast jedes Feld: Formular
   14 px, Gutschein 13 px, Mengenfeld 13/14 px, Suchfeld im Fahrzeugdialog
   13 px, Beratungsdialog 14 px.

   Hier zentral und vollstaendig statt an acht Einzelstellen — wer spaeter
   ein Feld hinzufuegt, ist damit von selbst richtig.

   Der naheliegende Gegenweg waere 'maximum-scale=1' im Viewport. Der nimmt
   aber ALLEN das Zoomen, auch denen, die es zum Lesen brauchen. Die
   Schriftgroesse zu erhoehen kostet nichts und ist ausserdem besser lesbar.

   Nur bis 768 px: am Schreibtisch bleibt die feinere Typografie. */
@media (max-width: 768px) {
  .woocommerce-cart input[type="text"],
  .woocommerce-cart input[type="email"],
  .woocommerce-cart input[type="tel"],
  .woocommerce-cart input[type="number"],
  .woocommerce-cart input[type="search"],
  .woocommerce-cart select,
  .woocommerce-cart textarea,
  /* Die Felder der Kasse ausdruecklich MIT '.woocommerce' im Selektor: die
     Regel, die ihnen 14 px gibt, steht genau so da. Mit einer Klasse
     weniger waere sie schwaecher und die 14 px blieben zwischen 601 und
     768 px stehen — Spezifitaet schlaegt Reihenfolge. */
  .woocommerce-checkout .woocommerce input[type="text"],
  .woocommerce-checkout .woocommerce input[type="email"],
  .woocommerce-checkout .woocommerce input[type="tel"],
  .woocommerce-checkout .woocommerce input[type="number"],
  .woocommerce-checkout .woocommerce input[type="password"],
  .woocommerce-checkout .woocommerce input[type="search"],
  .woocommerce-checkout .woocommerce select,
  .woocommerce-checkout .woocommerce textarea,
  .woocommerce-checkout textarea,
  .woocommerce-checkout .form-row textarea,
  .woocommerce-checkout textarea#order_comments,
  .woocommerce-checkout input[type="text"],
  .woocommerce-checkout input[type="email"],
  .woocommerce-checkout input[type="tel"],
  .woocommerce-checkout input[type="number"],
  .woocommerce-checkout input[type="password"],
  .woocommerce-checkout input[type="search"],
  .woocommerce-checkout select,
  .ff-berat-dlg input,
  .ff-berat-dlg textarea,
  .ff-modal-ss__search input,
  .dm-modal input {
    font-size: 16px;
  }
  /* Das Mengenfeld bringt sein eigenes !important mit (es wehrt sich gegen
     WooCommerce) — hier muss die Regel gleichziehen, sonst bleibt genau
     dieses eine Feld bei 13 px und zoomt weiter. */
  .ff-cart-item__qty input.ff-qty-input,
  .ff-cart-item__qty--sm input.ff-qty-input { font-size: 16px !important; }
}

/* ── Express-Zahlarten in der Kasse: eine Zeile ueber beiden Spalten ──
   form-checkout.php ruft woocommerce_checkout_before_customer_details vor dem
   Raster auf. Stripe blendet Knoepfe und Trenner selbst ein (display:none, bis
   eine Wallet bereitsteht) — ohne Wallet bleibt die Zeile ohne Hoehe. */
.ff-checkout-express { display: flex; flex-direction: column; }
.ff-checkout-express #wc-stripe-express-checkout-element { margin: 0 !important; }
.ff-checkout-express #wc-stripe-express-checkout-button-separator {
  margin: 20px 0 24px !important;
  font-size: 0;
  text-align: center;
  background:
    linear-gradient(var(--border), var(--border)) left center / calc(50% - 44px) 1px no-repeat,
    linear-gradient(var(--border), var(--border)) right center / calc(50% - 44px) 1px no-repeat;
}
.ff-checkout-express #wc-stripe-express-checkout-button-separator::before {
  content: "oder";
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text3);
}

/* Danke-Seite: Zusammenfassung (Summen, Adressen, Aktionen) statt WooCommerce-Tabelle */
.ff-thankyou__summe { width: 100%; margin-bottom: 24px; text-align: left; }
.ff-thankyou__summen { margin: 0; padding: 4px 20px 8px; }
.ff-thankyou__summen-zeile { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px solid rgba(0,0,0,.06); font-size: 14px; }
.ff-thankyou__summen-zeile:last-child { border-bottom: 0; }
.ff-thankyou__summen dt { margin: 0; color: rgba(0,0,0,.5); }
.ff-thankyou__summen dd { margin: 0; font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
.ff-thankyou__summen-zeile.is-gesamt dt, .ff-thankyou__summen-zeile.is-gesamt dd { color: #1d1d1f; font-weight: 800; font-size: 15px; }
.ff-thankyou__summen dd small, .ff-thankyou__summen dd .includes_tax { display: block; font-weight: 500; font-size: 12px; color: rgba(0,0,0,.5); }
.ff-thankyou__adressen { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px 24px; padding: 16px 20px; border-top: 1px solid rgba(0,0,0,.06); }
.ff-thankyou__adresse-titel { margin: 0 0 6px; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: rgba(0,0,0,.5); }
.ff-thankyou__adressen address { font-style: normal; font-size: 14px; line-height: 1.55; color: #1d1d1f; }
.ff-thankyou__aktionen { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 20px 18px; }

/* Fahrzeug fehlt: Knopf im Warenkorb + Abschnitt in der Kasse (inc/kasse-fahrzeug.php) */
.dm-hsn-edit-btn.ff-fz-hinzu, .ff-fz-hinzu { width: auto; height: auto; display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px; border: 1px dashed rgba(217,119,6,.55); background: rgba(217,119,6,.07); color: #b45309; font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; }
.dm-hsn-edit-btn.ff-fz-hinzu:hover, .ff-fz-hinzu:hover { color: #b45309; border-color: rgba(217,119,6,.55); background: rgba(217,119,6,.13); }
.ff-fz-hinzu__warum { font-weight: 500; opacity: .8; }
@media (max-width: 480px) { .ff-fz-hinzu__warum { display: none; } }
.ff-kasse-fahrzeug { margin-top: 24px; }
.ff-kasse-fahrzeug__fuer { margin: 0 0 12px; font-size: 13px; color: rgba(0,0,0,.5); }
.ff-kasse-fahrzeug__ohne { display: flex; gap: 8px; align-items: flex-start; margin-top: 4px; font-size: 13px; color: rgba(0,0,0,.55); cursor: pointer; }
.ff-kasse-fahrzeug__ohne input { margin-top: 3px; }