/*
 * commerce.css — Reskin der WooCommerce-Transaktionsstrecke (temporär).
 * Nur geladen auf Warenkorb / Kasse / Mein Konto (siehe commerce-styles.php).
 * Token-getrieben (--ketex-*), keine GM-internen Klassen, nur additives Styling
 * (nie ein Ausblenden von Pflichtausgaben).
 *
 * Live-Stand ketex-dev (2026-07-05, Task 8, live gegen echtes DOM verifiziert):
 * Warenkorb + Kasse laufen als WooCommerce-BLOCK-Cart/-Checkout (nicht klassischer
 * Shortcode). German Market liefert die Compliance block-nativ (Button-Lösung
 * „Zahlungspflichtig bestellen" + AGB/Datenschutz-Pflicht + MwSt-/Versand-Ausweis).
 * §1/§2 stylen daher die BLOCK-Optik in Ketex-Look (Karten, Terrakotta, Lora).
 * §4 Mein Konto = klassisch (WC hat kein Block-Konto) → dauerhaft.
 * Kein Side-Cart via Salesman (hat kein solches Modul); Side-Cart läuft separat
 * über den WC-Mini-Cart-Block (§5).
 * `!important` bewusst nur dort, wo WC-Block-Framework-Defaults (theme.json/Core,
 * hohe Spezifität/Inline) sonst gewinnen — nicht gegen bestehende Ketex-Settings.
 *
 * ── WEGWERF (Block-Neubau beim GM-Rauswurf): §1 Warenkorb · §2 Kasse · §3 Danke · §5 Side-Cart
 * ── DAUERHAFT (überlebt GM-Rauswurf):        §4 Mein Konto
 */

/* Gemeinsame Basis für alle drei Flächen.
 * WICHTIG: Die Block-Cart/-Checkout-Seiten laufen full-bleed (kein Content-Max
 * am Wrapper) → auf breiten Viewports (≥1400px) läuft die Summen-Spalte aus dem
 * Rahmen. Wir begrenzen den echten Wrapper auf die Site-Content-Breite,
 * zentriert mit Gutter wie der Header-Inner.
 * Der Wrapper hieß bis zur Frontend-Verselbstständigung .page-content und kam
 * aus Hello Elementors template-parts/single.php. Seit Slice 1 rendert das
 * eigene page.php, der Wrapper heißt .ketex-page__content — und die Variante
 * „flush" (page-shell.php) hält das Grundgerüst hier bewusst maßlos, damit
 * genau diese Regel die Breite bestimmt und keine zwei Container greifen. */
.woocommerce-cart .ketex-page__content,
.woocommerce-checkout .ketex-page__content,
.woocommerce-account .ketex-page__content {
    max-width: var(--ketex-content-max);
    margin-inline: auto;
    padding-inline: clamp(16px, 4vw, 40px);
    padding-top: 40px;
    box-sizing: border-box;
    color: var(--ketex-text);
}

/* Cremefarbener Vitrine-BG VOLLBREIT: auf die Body-Klasse (volle Viewport-Breite),
   NICHT auf das 1400px-begrenzte .ketex-page__content — sonst bleiben die Gutter weiß. */
body.woocommerce-cart,
body.woocommerce-checkout,
body.woocommerce-account {
    background: var(--ketex-bg);
}

/* Content-Links Terrakotta — ohne Buttons (sonst Terrakotta-auf-Terrakotta) und
   ohne Produktnamen (bleiben dunkel). Behebt Default-Blau auf der ganzen Strecke.
   `.wp-block-button__link` gehört zwingend in jede dieser Ausnahmelisten: die
   Cross-Sell-Kacheln unter dem Warenkorb rendern „Details ansehen" als
   `a.wp-block-button__link.add_to_cart_button` — OHNE `wp-element-button`. Ohne
   den Ausschluss schlägt diese Regel (Spezifität 0,4,2) den Button-Weißton aus
   theme.json (`:where(…)`, Spezifität 0) und der Text verschwand terrakotta auf
   terrakotta — auf /warenkorb/ und /kasse/ real gemessen. */
.woocommerce-cart .ketex-page__content a:not(.wc-block-components-button):not(.wp-element-button):not(.wp-block-button__link):not(.wc-block-components-product-name),
.woocommerce-checkout .ketex-page__content a:not(.wc-block-components-button):not(.wp-element-button):not(.wp-block-button__link):not(.wc-block-components-product-name),
.woocommerce-account .woocommerce-MyAccount-content a:not(.wc-block-components-button):not(.wp-element-button):not(.wp-block-button__link):not(.button),
.woocommerce-account .woocommerce-form a {
  color: var(--ketex-primary);
}
.woocommerce-cart .ketex-page__content a:hover:not(.wc-block-components-button):not(.wp-element-button):not(.wp-block-button__link),
.woocommerce-checkout .ketex-page__content a:hover:not(.wc-block-components-button):not(.wp-element-button):not(.wp-block-button__link) {
  color: var(--ketex-secondary);
}

/* Primär-CTAs (Block-Buttons) einheitlich Terrakotta.
   „Weiter zur Kasse" + „Zahlungspflichtig bestellen" (Button-Lösung — nur Optik,
   Text/Funktion unangetastet). */
.woocommerce-cart .wc-block-components-button.contained,
.woocommerce-checkout .wc-block-components-button.contained,
.woocommerce-checkout .wc-block-components-checkout-place-order-button {
  background: var(--ketex-primary);
  border-radius: 8px;
  font-weight: 700;
  min-height: 52px;
}
/* Hover: verdunkeln auf #9E3B26 — konsistent mit dem Single-Product-ATC-Button
   (global.css:598). Keine konkurrierende WC-Hover-Regel (CSSOM-verifiziert) →
   ohne !important, selbe Selektor-Struktur + :hover gewinnt per Spezifität. */
.woocommerce-cart .wc-block-components-button.contained:hover,
.woocommerce-checkout .wc-block-components-button.contained:hover,
.woocommerce-checkout .wc-block-components-checkout-place-order-button:hover {
  background: #9E3B26;
}

/* §1 Warenkorb (Block-Cart) ────────────────────────────────── Wegwerf */
/* Headings in Lora */
.woocommerce-cart .wp-block-woocommerce-cart h2,
.woocommerce-cart .wc-block-cart__totals-title {
  font-family: var(--ketex-font-title);
  font-weight: var(--ketex-title-weight);
  color: var(--ketex-text);
}
.woocommerce-cart .wc-block-cart__totals-title {
  font-size: var(--ketex-title-section);
  text-transform: none;
  letter-spacing: 0;
  text-align: left;
  margin-bottom: 8px;
  padding-top: 0;
}
/* Gesamtsumme-Zeile: Label als Sektionstitel (Lora, 400) statt DM-Sans-500;
   der €-Wert bleibt DM Sans + Terrakotta, aber leichter (400 statt 500) — prominent
   durch Farbe, nicht durch Fettdruck. */
.wc-block-components-totals-footer-item .wc-block-components-totals-item__label {
  font-family: var(--ketex-font-title);
  font-weight: var(--ketex-title-weight);
  font-size: var(--ketex-title-card);
}
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
  font-family: var(--ketex-font-title);
  font-weight: var(--ketex-title-weight);
}
/* Positionen als weiße Karte, Summen als cremefarbene Karte (Zwei-Panel-Look) */
.woocommerce-cart .wc-block-cart__main {
  background: #fff;
  border: 1px solid var(--ketex-border);
  border-radius: 12px;
  padding: 8px 24px 24px;
}
.woocommerce-cart .wc-block-cart__sidebar {
  background: var(--ketex-bg-soft);
  border: 1px solid var(--ketex-border);
  border-radius: 12px;
  padding: 24px;
}
/* Produktnamen: Markenfarbe statt Blau, fett, Hover Terrakotta */
.wc-block-components-product-name { color: var(--ketex-text) !important; font-family: var(--ketex-font-title) !important; font-weight: var(--ketex-title-weight) !important; font-size: var(--ketex-title-card-sm) !important; text-decoration: none; }
/* Sweep2 KEEP (lasttragend, verifiziert): Terrakotta-Hover-Farbe; ungeflaggt gewinnt WC-Block-Hover (dunkel) */
a.wc-block-components-product-name:hover { color: var(--ketex-primary) !important; }
.wc-block-cart-item__image img { border-radius: 8px; }
/* Item-Zeilen: weiche Trennlinien + Luft */
.wc-block-cart-items__row { border-bottom: 1px solid var(--ketex-border); }
.wc-block-cart-items__row:last-child { border-bottom: 0; }
.wc-block-cart-items__row td { padding-top: 20px; padding-bottom: 20px; }
/* Summen-Zeilen + Endsumme */
.wc-block-components-totals-item { color: var(--ketex-text); }
.wc-block-components-totals-footer-item { border-top: 1px solid var(--ketex-border); }
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value { color: var(--ketex-primary); }
/* Free-Shipping-Bar (Salesman) an Marke angleichen — weicher BG, Terrakotta-Fill.
   Das Plugin setzt margin-right:-34px (full-bleed-Intent) → auf Mobil Overflow → klemmen. */
.marketpress-salesman-fsn {
  background: var(--ketex-bg-soft);
  border: 1px solid var(--ketex-border);
  border-radius: 10px;
  margin-left: 0;
  margin-right: 0;
  width: auto;
  max-width: 100%;
  box-sizing: border-box;
}
.marketpress-salesman-fsn .bar,
.marketpress-salesman-fsn .current { background: var(--ketex-primary); }
/* Bonus-Punkte-Notice (klassische WC-Notice) wird on load per JS fokussiert
   (tabindex=-1, document.activeElement) → mit Keyboard-Modality zeigt der Browser
   sonst den blauen :focus-visible-Default-Ring (rgb(0,95,204)). Markenkonform
   einfärben statt entfernen (a11y). Muster wie global.css:1479. */
.woocommerce-message:focus-visible {
  outline: 2px solid var(--ketex-primary);
  outline-offset: 2px;
}

/* §2 Kasse (Block-Checkout) ────────────────────────────────── Wegwerf */
/* Abschnitts-/Summen-Titel Lora */
.woocommerce-checkout .wc-block-components-title,
.woocommerce-checkout .wc-block-components-checkout-step__title {
  font-family: var(--ketex-font-title);
  font-weight: var(--ketex-title-weight);
  color: var(--ketex-text);
}
/* Bestellübersicht = Box-Hauptüberschrift (Pendant zu „Warenkorb-Summe"):
   Lora, Section-Größe, 400 — statt DM-Sans-500. */
.woocommerce-checkout .wc-block-components-checkout-order-summary__title-text {
  font-family: var(--ketex-font-title) !important;
  font-weight: var(--ketex-title-weight) !important;
  font-size: var(--ketex-title-section) !important;
}
/* Felder-Spalte als weiße Karte, Bestellübersicht als cremefarbene Karte */
.woocommerce-checkout .wc-block-checkout__main {
  background: #fff;
  border: 1px solid var(--ketex-border);
  border-radius: 12px;
  padding: 28px 32px;
}
.woocommerce-checkout .wc-block-checkout__sidebar {
  background: var(--ketex-bg-soft);
  border: 1px solid var(--ketex-border);
  border-radius: 12px;
  padding: 24px !important;
}
/* Inputs im Ketex-Stil */
.woocommerce-checkout .wc-block-components-text-input input,
.woocommerce-checkout .wc-block-components-text-input textarea {
  border: 1px solid var(--ketex-border) !important;
  border-radius: 8px !important;
  background: #fff !important;
}
.woocommerce-checkout .wc-block-components-text-input input:focus {
  border-color: var(--ketex-primary);
  box-shadow: 0 0 0 1px var(--ketex-primary);
}
/* Endsumme Terrakotta */
.woocommerce-checkout .wc-block-components-totals-footer-item .wc-block-components-totals-item__value { color: var(--ketex-primary); }
/* AGB/Datenschutz-Pflichtblock lesbar abgesetzt — NICHT verstecken (Compliance) */
.woocommerce-checkout .wc-block-checkout__terms { border-top: 1px solid var(--ketex-border); padding-top: 14px; }
/* Login-Prompt „Anmelden" ist eine Aktion, kein Fließtext-Link → sekundärer
   Ghost-Button (Terrakotta-Rahmen, beim Hover gefüllt). */
.wc-block-checkout__login-prompt {
  display: inline-block;
  padding: 6px 16px;
  border: 1px solid var(--ketex-primary);
  border-radius: 8px;
  color: var(--ketex-primary);
  font-family: var(--ketex-font-ui);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: background .15s ease, color .15s ease;
}
/* Hover: gefüllt Terrakotta + weißer Text. !important lasttragend (CSSOM-verifiziert):
   die generische Content-Link-Hover-Regel (.woocommerce-checkout .ketex-page__content a:hover,
   §oben, Spezifität ~0,5,1) setzt color:secondary und WC setzt color:inherit — beide
   schlagen diese spezifische Regel (0,2,0). Kein Ketex-Setting betroffen (File-Header). */
.wc-block-checkout__login-prompt:hover {
  background: var(--ketex-primary) !important;
  color: #fff !important;
}

/* §3 Danke-Seite ───────────────────────────────────────────── Wegwerf */
/* Order-received rendert je nach Stand klassisch ODER als Block — beide additiv. */
.woocommerce-order h2,
.woocommerce-order .wc-block-components-title { font-family: var(--ketex-font-title); font-weight: var(--ketex-title-weight); }
/* Erfolgs-Hinweis als abgesetztes Panel (Lora/Terrakotta) */
.woocommerce-order .woocommerce-notice--success,
.woocommerce-order .woocommerce-thankyou-order-received,
.woocommerce-order .wc-block-order-confirmation-status {
  font-family: var(--ketex-font-title);
  color: var(--ketex-primary);
  background: var(--ketex-bg-soft);
  border: 1px solid var(--ketex-border);
  border-radius: 12px;
  padding: 18px 24px;
  display: block;
  margin-bottom: 24px;
}
/* Bestellübersicht / Bankverbindung / Bestelldetails / Kundendaten = weiße Karten
   auf dem cremefarbenen Seiten-BG (wie Cart/Checkout). */
.woocommerce-order .woocommerce-order-overview,
.woocommerce-order .woocommerce-bacs-bank-details,
.woocommerce-order .woocommerce-order-details,
.woocommerce-order .woocommerce-customer-details {
  background: #fff;
  border: 1px solid var(--ketex-border);
  border-radius: 12px;
  padding: 24px 28px;
  margin-bottom: 24px;
}
.woocommerce-order .woocommerce-order-overview { list-style: none; }

/* §4 Mein Konto ──────────────────────────────────────────── Dauerhaft */
@media (min-width: 768px) {
  .woocommerce-account .woocommerce > .woocommerce-MyAccount-navigation {
    float: left;
    width: 240px;
  }
  .woocommerce-account .woocommerce-MyAccount-content {
    float: right;
    width: calc(100% - 280px);
  }
}
/* Nav + Content teilen sich eine Zeile — border-box, sonst sprengen
   Padding+Border die Container-Breite und der Content bricht um. */
.woocommerce-account .woocommerce-MyAccount-navigation,
.woocommerce-account .woocommerce-MyAccount-content {
  box-sizing: border-box;
}
.woocommerce-account .woocommerce-MyAccount-navigation ul {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 1px solid var(--ketex-border);
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
}
.woocommerce-account .woocommerce-MyAccount-navigation li {
  border-bottom: 1px solid var(--ketex-border);
}
.woocommerce-account .woocommerce-MyAccount-navigation li:last-child { border-bottom: 0; }
.woocommerce-account .woocommerce-MyAccount-navigation li a {
  display: block;
  padding: 14px 18px;
  font-family: var(--ketex-font-ui);
  color: var(--ketex-text);
  text-decoration: none;
}
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a {
  background: var(--ketex-primary);
  color: #fff;
}
.woocommerce-account .woocommerce-MyAccount-content {
  background: #fff;
  border: 1px solid var(--ketex-border);
  border-radius: 12px;
  padding: 28px;
}
.woocommerce-account .woocommerce-MyAccount-content table {
  border-collapse: collapse;
  width: 100%;
}
.woocommerce-account .woocommerce-MyAccount-content table th,
.woocommerce-account .woocommerce-MyAccount-content table td {
  border-top: 1px solid var(--ketex-border);
  padding: 12px;
}
.woocommerce-account .woocommerce-MyAccount-content h2,
.woocommerce-account .woocommerce-MyAccount-content h3 { font-family: var(--ketex-font-title); }

/* Login/Registrierung auf der Konto-Seite (ausgeloggt) */
.woocommerce-account .woocommerce-form-login,
.woocommerce-account .woocommerce-form-register {
  background: var(--ketex-bg-soft);
  border: 1px solid var(--ketex-border);
  border-radius: 12px;
  padding: 24px;
}
.woocommerce-account .woocommerce-form input.input-text {
  border: 1px solid var(--ketex-border);
  border-radius: 8px;
  padding: 12px 14px;
}
/* NUR der Absende-Button — NICHT der Passwort-Anzeigen-Toggle (type=button) o.ä. */
.woocommerce-account .woocommerce-form button[type="submit"] {
  background: var(--ketex-primary);
  color: #fff;
  border-radius: 8px;
  font-family: var(--ketex-font-ui);
  font-weight: 600;
}

/* Eingeloggtes Konto: Aktionen (Ansehen / Erneut kaufen / Herunterladen) sind
   echte WC-.button, bekamen aber KEINE Ketex-Regel → WC-Default-Grau.
   Jetzt gefüllter Primär-Button (analog Absende-Button oben). */
.woocommerce-account .woocommerce-MyAccount-content a.button,
.woocommerce-account .woocommerce-MyAccount-content button.button {
  display: inline-block;
  padding: 10px 20px;
  background: var(--ketex-primary);
  color: #fff;
  border: 1px solid var(--ketex-primary);
  border-radius: 8px;
  font-family: var(--ketex-font-ui);
  font-weight: 600;
  text-decoration: none;
  transition: background .15s ease, border-color .15s ease;
}
.woocommerce-account .woocommerce-MyAccount-content a.button:hover,
.woocommerce-account .woocommerce-MyAccount-content button.button:hover {
  background: var(--ketex-secondary);
  border-color: var(--ketex-secondary);
  color: #fff;
}
/* Adress-„Bearbeiten": war Text-Link (griff die Fließtext-Link-Regel oben) →
   sekundäre Aktion = Ghost-Button (Terrakotta-Rahmen, Hover gefüllt), damit die
   Aktion als Button erkennbar ist, ohne mit den Primär-Buttons zu konkurrieren. */
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Address-title a.edit {
  display: inline-block;
  padding: 8px 18px;
  border: 1px solid var(--ketex-primary);
  border-radius: 8px;
  color: var(--ketex-primary);
  font-family: var(--ketex-font-ui);
  font-weight: 600;
  text-decoration: none;
  transition: background .15s ease, color .15s ease;
}
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Address-title a.edit:hover {
  background: var(--ketex-primary);
  color: #fff;
}

/* §4a Bonuspunkte-Reiter (#197) ─────────────────────────────── Dauerhaft */
.slimwoo-loyalty__balance { font-size: 1.25rem; font-weight: 600; margin: 0 0 1rem; }
.slimwoo-loyalty__result { padding: 1rem; margin: 0 0 1.5rem; border-radius: 6px; }
.slimwoo-loyalty__result--ok { background: var(--ketex-bg-soft); }
.slimwoo-loyalty__result--error { background: #fbe9e7; } /* kein Fehler-Token im Themensatz (global.css:26-31) */
.slimwoo-loyalty__code code { font-size: 1.4rem; letter-spacing: .08em; }
.slimwoo-loyalty__redeem { display: flex; flex-wrap: wrap; gap: .75rem; margin: 0 0 1.5rem; }
.slimwoo-loyalty__redeem p { flex-basis: 100%; margin: 0; }
.slimwoo-loyalty__tier[disabled] { opacity: .5; cursor: not-allowed; }
.slimwoo-loyalty__heading { margin: 1.5rem 0 .5rem; }
.slimwoo-loyalty__coupons { list-style: none; padding: 0; margin: 0 0 1rem; }
.slimwoo-loyalty__history { width: 100%; border-collapse: collapse; }
.slimwoo-loyalty__history th, .slimwoo-loyalty__history td { padding: .5rem .25rem; text-align: left; border-bottom: 1px solid var(--ketex-border); }
.slimwoo-loyalty__points { white-space: nowrap; }
.slimwoo-loyalty__paging { display: flex; justify-content: space-between; margin-top: 1rem; }
@media (max-width: 600px) {
  .slimwoo-loyalty__history thead { display: none; }
  .slimwoo-loyalty__history td { display: block; border: 0; padding: .15rem 0; }
  .slimwoo-loyalty__history tr { display: block; border-bottom: 1px solid var(--ketex-border); padding: .5rem 0; }
}

/* §5 Side-Cart (WC-Mini-Cart-Block, ketex-drawer-Look) ─────── Wegwerf */
/* Platzhalter — wird in dieser Session gegen das reale Mini-Cart-Block-DOM gefüllt. */

/* §6 Preishinweise je Warenkorbzeile (GM-Exit WS4 Slice 2c) ───────────────
   Basisregel gilt für BEIDE Kontexte: Block-Warenkorb (item_data landet als
   eigenes DOM je Eintrag) und Side-Cart (klassischer Pfad über
   woocommerce_mini_cart() in theme/functions.php, Klasse sitzt am <dd>). Die
   Klasse .slimwoo-cart-note allein reicht als Anker. Unser Template rendert
   die Werte weiterhin durch wpautop() (Original-Treue) — die daraus
   entstehende <p>-Marge wird hier zurückgesetzt, damit die Zeile kompakt
   bleibt. */
.slimwoo-cart-note {
  display: block;
  font-size: 0.85em;
  color: var(--ketex-text-muted);
}

.slimwoo-cart-note p {
  margin: 0;
}

/* Nur der Block-Warenkorb rendert mehrere item_data-Einträge inline und
   trennt sie durch ein <span aria-hidden> / </span> INNERHALB des Eintrags.
   Grundpreis und MwSt-Hinweis sind eigenständige Angaben — sie bekommen je
   eine Zeile, der Trenner entfällt. Den Side-Cart betrifft das nicht (dort
   gibt es diesen Trenner nicht). */
.wc-block-components-product-details .slimwoo-cart-note > span[aria-hidden="true"] {
  display: none;
}

/* Side-Cart: KEINE Ausblendung des MwSt-Hinweises.
   Die frühere Regel stützte sich auf German Markets Zeilen-Notiz
   `_gm_line_item_tax` (deren Filter greift nur in den Kontexten cart und
   summary) und übersah GMs zweite Ausgabe. Am 2026-07-26 lokal gemessen
   (German Market aktiv, Cut-Flag aus, woocommerce_mini_cart() mit einem
   Artikel) rendert der Drawer heute sehr wohl eine Pflichtangabe:
   `<div class="wgm-info woocommerce-de_price_taxrate ">Enthält 19% MwSt.</div>`
   — GMs Preis-Suffix, das mit dem Plugin verschwindet (die dazu passende
   Typografie steht in global.css am Selektor .woocommerce-de_price_taxrate).
   Ausgeblendet würde die native Notiz den Drawer nach dem Cut ohne jede
   MwSt-Angabe zurücklassen. */

/* § 356a-Widerrufsstrecke (GM-Exit WS4 Slice 2e) */
.slimwoo-widerruf__intro {
    margin-bottom: 24px;
}

.slimwoo-widerruf__fehler {
    color: var(--ketex-primary);
    font-weight: 600;
    margin-bottom: 16px;
}

/* Honeypot-Ausblendung (.slimwoo-widerruf__honeypot) ist NACH global.css
   gezogen (W8, finale Review): commerce.css laedt nur auf den drei
   WC-Transaktionsseiten UND der in den Optionen hinterlegten Widerrufsseite
   (ketex_commerce_is_styled_page()) — steht der kanonische Shortcode
   (bewusst ungegatet, siehe slimwoo-withdrawal-form.php) auf einer ANDEREN
   Seite, allen voran der von Spec §5.2 vorgesehenen Probeseite vor dem Cut,
   rendert das Koederfeld dort SICHTBAR als Feld „Website" — dasselbe Muster
   wie .ketex-auth-modal__honeypot, das aus demselben Grund schon in
   global.css liegt. */

.slimwoo-widerruf__positionen {
    border: 1px solid var(--ketex-border, #E5E0D8);
    padding: 16px 20px;
    margin-bottom: 24px;
}

.slimwoo-widerruf__position {
    display: flex;
    align-items: center;
    gap: 16px;
    justify-content: space-between;
}

.slimwoo-widerruf__position .input-text {
    max-width: 96px;
}

.slimwoo-widerruf__erfolg {
    border-left: 4px solid var(--ketex-primary);
    padding: 16px 20px;
}