- Anpassungen für ShopThemeOne

5 files changed, 202 insertions, 121 deletions

diff --git a/views/css/smartcheckout.css b/views/css/smartcheckout.css
index 5415dbd..156e2ae 100644
--- a/views/css/smartcheckout.css
+++ b/views/css/smartcheckout.css
@@ -10,8 +10,16 @@
  *
  * Die wenigen Werte liegen als Custom Properties auf .wpsg_smartcheckout und können im
  * Theme überschrieben werden, ohne dass eine Regel angefasst werden muss.
+ *
+ * Alle Größen rechnen über --sc-u (Standard 1rem). Themes, die die Schriftgröße von html
+ * verändern (z.B. Bootstrap 3 mit 10px), setzen hier nur --sc-u auf einen festen Wert.
  */
 
+.wpsg_smartcheckout,
+.wpsg_smartcheckout_after {
+	--sc-u:1rem;
+}
+
 .wpsg_smartcheckout {
 	--sc-line:rgba(127, 127, 127, 0.35);
 	--sc-line-soft:rgba(127, 127, 127, 0.2);
@@ -19,11 +27,11 @@
 	--sc-accent:currentColor;
 	--sc-error:#b3261e;
 	--sc-radius:3px;
-	--sc-gap:2rem;
+	--sc-gap:calc(2 * var(--sc-u, 1rem));
 }
 
 .wpsg_smartcheckout [v-cloak], .wpsg_smartcheckout[v-cloak] { display:none; }
-.wpsg_smartcheckout_noscript { padding:1rem; border-left:3px solid var(--sc-error, #b3261e); margin-bottom:1.5rem; }
+.wpsg_smartcheckout_noscript { padding:var(--sc-u, 1rem); border-left:3px solid var(--sc-error, #b3261e); margin-bottom:calc(1.5 * var(--sc-u, 1rem)); }
 
 .wpsg_smartcheckout * { box-sizing:border-box; }
 
@@ -32,145 +40,147 @@ html body.content-style-boxed .entry-content .wpsg_smartcheckout.alignwide,
 html body.content-style-boxed .entry-content .wpsg_smartcheckout_after.alignwide { margin-left:0; margin-right:0; width:auto; max-width:100%; }
 
 /* Layout */
-.wpsg_smartcheckout .sc_layout { display:grid; grid-template-columns:minmax(0, 1fr) 21rem; gap:var(--sc-gap); align-items:start; }
+.wpsg_smartcheckout .sc_layout { display:grid; grid-template-columns:minmax(0, 1fr) calc(21 * var(--sc-u, 1rem)); gap:var(--sc-gap); align-items:start; }
 .wpsg_smartcheckout_single .sc_layout { grid-template-columns:minmax(0, 1fr); }
 .wpsg_smartcheckout .sc_main { display:flex; flex-direction:column; min-width:0; }
-.wpsg_smartcheckout .sc_side { position:sticky; top:1.5rem; }
+.wpsg_smartcheckout .sc_side { position:sticky; top:calc(1.5 * var(--sc-u, 1rem)); }
 .wpsg_smartcheckout_single .sc_side { position:static; }
 .wpsg_smartcheckout .sc_layout.sc_busy { opacity:0.6; pointer-events:none; transition:opacity 0.15s ease-out; }
 
 /* Die Schritte werden nur durch eine Linie getrennt, nicht durch gerahmte Kästen */
 .wpsg_smartcheckout .sc_box { padding:var(--sc-gap) 0; border-top:1px solid var(--sc-line-soft); }
 .wpsg_smartcheckout .sc_box:first-child { padding-top:0; border-top:0; }
-.wpsg_smartcheckout .sc_title { margin:0 0 1.25rem 0; font-size:1.05rem; line-height:1.3; }
-.wpsg_smartcheckout .sc_step { margin-right:0.5rem; font-weight:400; opacity:0.5; }
+.wpsg_smartcheckout .sc_title { margin:0 0 calc(1.25 * var(--sc-u, 1rem)) 0; font-size:calc(1.05 * var(--sc-u, 1rem)); line-height:1.3; }
+.wpsg_smartcheckout .sc_step { margin-right:calc(0.5 * var(--sc-u, 1rem)); font-weight:400; opacity:0.5; }
 
 /* Meldungen */
-.wpsg_smartcheckout .sc_messages { display:flex; flex-direction:column; gap:0.5rem; margin-bottom:var(--sc-gap); }
+.wpsg_smartcheckout .sc_messages { display:flex; flex-direction:column; gap:calc(0.5 * var(--sc-u, 1rem)); margin-bottom:var(--sc-gap); }
 .wpsg_smartcheckout .sc_messages:empty { display:none; margin:0; }
-.wpsg_smartcheckout .sc_message { padding:0.6rem 0.9rem; border-left:3px solid var(--sc-line); background:var(--sc-flat); }
+.wpsg_smartcheckout .sc_message { padding:calc(0.6 * var(--sc-u, 1rem)) calc(0.9 * var(--sc-u, 1rem)); border-left:3px solid var(--sc-line); background:var(--sc-flat); }
 .wpsg_smartcheckout .sc_message_error { border-left-color:var(--sc-error); }
 .wpsg_smartcheckout .sc_message_message { border-left-color:#5a9e3d; }
 
 /* Leerer Warenkorb */
-.wpsg_smartcheckout .sc_empty { padding:2.5rem 0; }
+.wpsg_smartcheckout .sc_empty { padding:calc(2.5 * var(--sc-u, 1rem)) 0; }
 
 /* Warenkorbpositionen: jede Position steht in einem eigenen Rahmen, damit Produktvariablen und Hinweise erkennbar zum Produkt gehören */
-.wpsg_smartcheckout .sc_products { display:flex; flex-direction:column; gap:0.75rem; }
-.wpsg_smartcheckout .sc_product { display:grid; grid-template-columns:auto minmax(0, 1fr) auto auto; gap:1rem; align-items:start; padding:1rem; border:1px solid var(--sc-line-soft); border-radius:var(--sc-radius); }
+.wpsg_smartcheckout .sc_products { display:flex; flex-direction:column; gap:calc(0.75 * var(--sc-u, 1rem)); }
+.wpsg_smartcheckout .sc_product { display:grid; grid-template-columns:auto minmax(0, 1fr) auto auto; gap:var(--sc-u, 1rem); align-items:start; padding:var(--sc-u, 1rem); border:1px solid var(--sc-line-soft); border-radius:var(--sc-radius); }
 .wpsg_smartcheckout .sc_product_image img { display:block; width:56px; height:56px; object-fit:cover; border-radius:var(--sc-radius); }
 .wpsg_smartcheckout .sc_product_name { font-weight:600; }
 .wpsg_smartcheckout .sc_product_desc,
 .wpsg_smartcheckout .sc_product_extra,
-.wpsg_smartcheckout .sc_product_tax { font-size:0.85rem; opacity:0.7; margin-top:0.2rem; }
+.wpsg_smartcheckout .sc_product_tax { font-size:calc(0.85 * var(--sc-u, 1rem)); opacity:0.7; margin-top:calc(0.2 * var(--sc-u, 1rem)); }
 
 /* Eingabefelder der Module (z.B. Produktvariablen) als eigene Zeile über alle Spalten der Position, innerhalb des Rahmens durch eine Linie abgesetzt */
-.wpsg_smartcheckout .sc_product_fields { grid-column:1 / -1; display:flex; flex-direction:column; gap:1rem; min-width:0; padding-top:0.75rem; border-top:1px solid var(--sc-line-soft); font-size:0.85rem; }
+.wpsg_smartcheckout .sc_product_fields { grid-column:1 / -1; display:flex; flex-direction:column; gap:var(--sc-u, 1rem); min-width:0; padding-top:calc(0.75 * var(--sc-u, 1rem)); border-top:1px solid var(--sc-line-soft); font-size:calc(0.85 * var(--sc-u, 1rem)); }
 
 /* Upload zum Produkt (wpsg_mod_orderupload) an der Warenkorbposition
  *
  * Das Ziel wird nach dem Hochladen vom Modul per Script neu befüllt, die Regeln hängen deshalb am
  * klassischen Markup (ul, input[type=button]). Die Spezifität liegt über den Button-Regeln der Themes.
  */
-.wpsg_smartcheckout .sc_upload { display:flex; flex-direction:column; gap:0.4rem; }
-.wpsg_smartcheckout .sc_upload_label { font-size:0.8rem; opacity:0.7; }
-.wpsg_smartcheckout .sc_upload_target { display:flex; flex-wrap:wrap; align-items:center; gap:0.5rem; }
-.wpsg_smartcheckout .sc_upload_target ul { flex:1 1 100%; display:flex; flex-direction:column; gap:0.3rem; margin:0; padding:0; list-style:none; }
-.wpsg_smartcheckout .sc_upload_target li { display:flex; align-items:center; gap:0.5rem; margin:0; padding:0.35rem 0.6rem; border:1px solid var(--sc-line-soft); border-radius:var(--sc-radius); }
+.wpsg_smartcheckout .sc_upload { display:flex; flex-direction:column; gap:calc(0.4 * var(--sc-u, 1rem)); }
+.wpsg_smartcheckout .sc_upload_label { font-size:calc(0.8 * var(--sc-u, 1rem)); opacity:0.7; }
+.wpsg_smartcheckout .sc_upload_target { display:flex; flex-wrap:wrap; align-items:center; gap:calc(0.5 * var(--sc-u, 1rem)); }
+.wpsg_smartcheckout .sc_upload_target ul { flex:1 1 100%; display:flex; flex-direction:column; gap:calc(0.3 * var(--sc-u, 1rem)); margin:0; padding:0; list-style:none; }
+.wpsg_smartcheckout .sc_upload_target li { display:flex; align-items:center; gap:calc(0.5 * var(--sc-u, 1rem)); margin:0; padding:calc(0.35 * var(--sc-u, 1rem)) calc(0.6 * var(--sc-u, 1rem)); border:1px solid var(--sc-line-soft); border-radius:var(--sc-radius); }
 .wpsg_smartcheckout .sc_upload_target li > a:first-child { flex:1 1 auto; min-width:0; overflow-wrap:anywhere; color:inherit; }
-.wpsg_smartcheckout .sc_upload_target .size { font-size:0.8rem; opacity:0.7; }
+.wpsg_smartcheckout .sc_upload_target .size { font-size:calc(0.8 * var(--sc-u, 1rem)); opacity:0.7; }
 .wpsg_smartcheckout .sc_upload_target .removeLink { flex:0 0 auto; display:flex; opacity:0.7; }
 .wpsg_smartcheckout .sc_upload_target .removeLink:hover { opacity:1; }
 .wpsg_smartcheckout .sc_upload_target .removeLink img { display:block; width:16px; height:16px; }
-.wpsg_smartcheckout .sc_upload_target input[type="file"] { flex:1 1 14rem; min-width:0; }
-.wpsg_smartcheckout .sc_upload_target input[type="button"] { flex:0 0 auto; min-height:0; margin:0; padding:0.5rem 0.9rem; border:1px solid var(--sc-line); border-radius:var(--sc-radius); background:none; color:inherit; font:inherit; font-size:0.9rem; line-height:1.2; text-transform:none; letter-spacing:normal; box-shadow:none; cursor:pointer; }
+.wpsg_smartcheckout .sc_upload_target input[type="file"] { flex:1 1 calc(14 * var(--sc-u, 1rem)); min-width:0; }
+.wpsg_smartcheckout .sc_upload_target input[type="button"] { flex:0 0 auto; min-height:0; margin:0; padding:calc(0.5 * var(--sc-u, 1rem)) calc(0.9 * var(--sc-u, 1rem)); border:1px solid var(--sc-line); border-radius:var(--sc-radius); background:none; color:inherit; font:inherit; font-size:calc(0.9 * var(--sc-u, 1rem)); line-height:1.2; text-transform:none; letter-spacing:normal; box-shadow:none; cursor:pointer; }
 .wpsg_smartcheckout .sc_upload_target input[type="button"]:hover { background:var(--sc-flat); }
 /* Der Upload startet direkt nach der Auswahl (smartcheckout.js, startUpload), der Button des Moduls wird nicht gebraucht */
 .wpsg_smartcheckout .sc_upload_target [data-sc-autoupload] { display:none; }
 
 /* Bestellupload (wpsg_mod_orderupload) als eigener Block unter den Kundendaten, Liste und Dateiauswahl wie beim Upload zum Produkt */
-.wpsg_smartcheckout .sc_orderupload .sc_title { margin-bottom:1rem; }
+.wpsg_smartcheckout .sc_orderupload .sc_title { margin-bottom:var(--sc-u, 1rem); }
 .wpsg_smartcheckout .sc_orderupload .sc_hint { margin-top:0; }
-.wpsg_smartcheckout .sc_orderupload .sc_upload { font-size:0.85rem; }
-.wpsg_smartcheckout .sc_upload_message { flex:1 1 100%; padding:0.35rem 0.6rem; border-left:3px solid var(--sc-line); background:var(--sc-flat); }
+.wpsg_smartcheckout .sc_orderupload .sc_upload { font-size:calc(0.85 * var(--sc-u, 1rem)); }
+.wpsg_smartcheckout .sc_upload_message { flex:1 1 100%; padding:calc(0.35 * var(--sc-u, 1rem)) calc(0.6 * var(--sc-u, 1rem)); border-left:3px solid var(--sc-line); background:var(--sc-flat); }
 .wpsg_smartcheckout .sc_upload_message_error { border-left-color:var(--sc-error); }
 .wpsg_smartcheckout .sc_upload_message_message { border-left-color:#5a9e3d; }
 .wpsg_smartcheckout .sc_upload_wait { flex:1 1 100%; opacity:0.7; }
 
 /* Dateiauswahl im gesamten Checkout (Upload zum Produkt, Bestellupload) in der Optik der übrigen Felder */
-.wpsg_smartcheckout input[type="file"] { max-width:100%; color:inherit; font:inherit; font-size:0.85rem; }
-.wpsg_smartcheckout input[type="file"]::file-selector-button { margin-right:0.6rem; padding:0.45rem 0.8rem; border:1px solid var(--sc-line); border-radius:var(--sc-radius); background:none; color:inherit; font:inherit; cursor:pointer; }
+.wpsg_smartcheckout input[type="file"] { max-width:100%; color:inherit; font:inherit; font-size:calc(0.85 * var(--sc-u, 1rem)); }
+.wpsg_smartcheckout input[type="file"]::file-selector-button { margin-right:calc(0.6 * var(--sc-u, 1rem)); padding:calc(0.45 * var(--sc-u, 1rem)) calc(0.8 * var(--sc-u, 1rem)); border:1px solid var(--sc-line); border-radius:var(--sc-radius); background:none; color:inherit; font:inherit; cursor:pointer; }
 .wpsg_smartcheckout input[type="file"]::file-selector-button:hover { background:var(--sc-flat); }
 
 /* Produktvariablen an der Warenkorbposition */
-.wpsg_smartcheckout .sc_pvars { display:flex; flex-direction:column; gap:0.6rem; }
-.wpsg_smartcheckout .sc_pvar { display:flex; flex-direction:column; gap:0.25rem; }
-.wpsg_smartcheckout .sc_pvar_label { font-size:0.8rem; opacity:0.7; }
-.wpsg_smartcheckout .sc_pvar_input { width:100%; padding:0.4rem 0.6rem; border:1px solid var(--sc-line); border-radius:var(--sc-radius); background:none; color:inherit; font:inherit; }
+.wpsg_smartcheckout .sc_pvars { display:flex; flex-direction:column; gap:calc(0.6 * var(--sc-u, 1rem)); }
+.wpsg_smartcheckout .sc_pvar { display:flex; flex-direction:column; gap:calc(0.25 * var(--sc-u, 1rem)); }
+.wpsg_smartcheckout .sc_pvar_label { font-size:calc(0.8 * var(--sc-u, 1rem)); opacity:0.7; }
+.wpsg_smartcheckout .sc_pvar_input { width:100%; padding:calc(0.4 * var(--sc-u, 1rem)) calc(0.6 * var(--sc-u, 1rem)); border:1px solid var(--sc-line); border-radius:var(--sc-radius); background:none; color:inherit; font:inherit; }
 .wpsg_smartcheckout textarea.sc_pvar_input { resize:vertical; }
-.wpsg_smartcheckout .sc_pvar_check { display:flex; align-items:flex-start; gap:0.5rem; cursor:pointer; }
-.wpsg_smartcheckout .sc_pvar_check input[type="checkbox"] { flex:0 0 auto; margin:0.15rem 0 0 0; }
+.wpsg_smartcheckout .sc_pvar_check { display:flex; align-items:flex-start; gap:calc(0.5 * var(--sc-u, 1rem)); cursor:pointer; }
+.wpsg_smartcheckout .sc_pvar_check input[type="checkbox"] { flex:0 0 auto; margin:calc(0.15 * var(--sc-u, 1rem)) 0 0 0; }
 .wpsg_smartcheckout .sc_pvar.sc_invalid .sc_pvar_input { border-color:var(--sc-error); }
 .wpsg_smartcheckout .sc_pvar.sc_invalid .sc_pvar_label,
 .wpsg_smartcheckout .sc_pvar.sc_invalid .sc_pvar_check { color:var(--sc-error); opacity:1; }
 .wpsg_smartcheckout .sc_product_price { text-align:right; white-space:nowrap; }
 .wpsg_smartcheckout .sc_product_price_total { font-weight:600; }
-.wpsg_smartcheckout .sc_product_price_single { font-size:0.8rem; opacity:0.7; }
+.wpsg_smartcheckout .sc_product_price_single { font-size:calc(0.8 * var(--sc-u, 1rem)); opacity:0.7; }
 
 /* Mengenwahl */
-.wpsg_smartcheckout .sc_product_amount { display:flex; flex-direction:column; align-items:center; gap:0.35rem; }
+.wpsg_smartcheckout .sc_product_amount { display:flex; flex-direction:column; align-items:center; gap:calc(0.35 * var(--sc-u, 1rem)); }
 .wpsg_smartcheckout .sc_stepper { display:inline-flex; align-items:stretch; border:1px solid var(--sc-line); border-radius:var(--sc-radius); overflow:hidden; }
-.wpsg_smartcheckout .sc_stepper_btn { border:0; background:none; width:1.9rem; cursor:pointer; font:inherit; line-height:1; color:inherit; }
+.wpsg_smartcheckout .sc_stepper_btn { border:0; background:none; width:calc(1.9 * var(--sc-u, 1rem)); cursor:pointer; font:inherit; line-height:1; color:inherit; }
 .wpsg_smartcheckout .sc_stepper_btn:disabled { cursor:default; opacity:0.4; }
-.wpsg_smartcheckout .sc_stepper_input { width:2.8rem; border:0; text-align:center; padding:0.4rem 0; background:none; color:inherit; font:inherit; }
-.wpsg_smartcheckout .sc_stepper_static { display:inline-block; padding:0.4rem 0.9rem; }
-.wpsg_smartcheckout .sc_remove { border:0; background:none; padding:0; font-size:0.8rem; opacity:0.7; text-decoration:underline; cursor:pointer; color:inherit; }
+.wpsg_smartcheckout .sc_stepper_input { width:calc(2.8 * var(--sc-u, 1rem)); border:0; text-align:center; padding:calc(0.4 * var(--sc-u, 1rem)) 0; background:none; color:inherit; font:inherit; }
+.wpsg_smartcheckout .sc_stepper_static { display:inline-block; padding:calc(0.4 * var(--sc-u, 1rem)) calc(0.9 * var(--sc-u, 1rem)); }
+.wpsg_smartcheckout .sc_remove { border:0; background:none; padding:0; font-size:calc(0.8 * var(--sc-u, 1rem)); opacity:0.7; text-decoration:underline; cursor:pointer; color:inherit; }
 
 /* Warenkorbteaser: angelehnt an die Warenkorbpositionen, aber zurückhaltender */
-.wpsg_smartcheckout .sc_teaser { padding-top:1rem; border-top:1px solid var(--sc-line-soft); }
-.wpsg_smartcheckout .sc_teaser_title { margin-bottom:0.5rem; font-size:0.85rem; opacity:0.7; }
-.wpsg_smartcheckout .sc_teaser_item { display:flex; align-items:center; gap:0.75rem 1rem; flex-wrap:wrap; padding:0.5rem 0; font-size:0.9rem; }
+.wpsg_smartcheckout .sc_teaser { padding-top:var(--sc-u, 1rem); border-top:1px solid var(--sc-line-soft); }
+.wpsg_smartcheckout .sc_teaser_title { margin-bottom:calc(0.5 * var(--sc-u, 1rem)); font-size:calc(0.85 * var(--sc-u, 1rem)); opacity:0.7; }
+.wpsg_smartcheckout .sc_teaser_item { display:flex; align-items:center; gap:calc(0.75 * var(--sc-u, 1rem)) var(--sc-u, 1rem); flex-wrap:wrap; padding:calc(0.5 * var(--sc-u, 1rem)) 0; font-size:calc(0.9 * var(--sc-u, 1rem)); }
 .wpsg_smartcheckout .sc_teaser_image img { display:block; width:40px; height:40px; object-fit:cover; border-radius:var(--sc-radius); }
-.wpsg_smartcheckout .sc_teaser_body { flex:1 1 10rem; min-width:0; }
-.wpsg_smartcheckout .sc_teaser_price { font-size:0.8rem; opacity:0.7; }
-.wpsg_smartcheckout .sc_teaser_action { display:flex; align-items:center; gap:0.5rem; }
-.wpsg_smartcheckout .sc_teaser_amount { width:2.8rem; padding:0.45rem 0; border:1px solid var(--sc-line); border-radius:var(--sc-radius); text-align:center; background:none; color:inherit; font:inherit; }
+.wpsg_smartcheckout .sc_teaser_body { flex:1 1 calc(10 * var(--sc-u, 1rem)); min-width:0; }
+.wpsg_smartcheckout .sc_teaser_price { font-size:calc(0.8 * var(--sc-u, 1rem)); opacity:0.7; }
+.wpsg_smartcheckout .sc_teaser_action { display:flex; align-items:center; gap:calc(0.5 * var(--sc-u, 1rem)); }
+.wpsg_smartcheckout .sc_teaser_amount { width:calc(2.8 * var(--sc-u, 1rem)); padding:calc(0.45 * var(--sc-u, 1rem)) 0; border:1px solid var(--sc-line); border-radius:var(--sc-radius); text-align:center; background:none; color:inherit; font:inherit; }
 
 /* Gutschein */
-.wpsg_smartcheckout .sc_voucher { margin-top:1.5rem; }
-.wpsg_smartcheckout .sc_voucher_label { display:block; margin-bottom:0.35rem; font-size:0.85rem; opacity:0.7; }
-.wpsg_smartcheckout .sc_voucher_row { display:flex; gap:0.5rem; flex-wrap:wrap; }
-.wpsg_smartcheckout .sc_voucher_input { flex:1 1 12rem; min-width:0; }
-.wpsg_smartcheckout .sc_voucher_list { margin-top:0.75rem; display:flex; flex-direction:column; gap:0.4rem; }
-.wpsg_smartcheckout .sc_voucher_item { display:flex; align-items:center; gap:0.75rem; flex-wrap:wrap; font-size:0.9rem; }
+.wpsg_smartcheckout .sc_voucher { margin-top:calc(1.5 * var(--sc-u, 1rem)); }
+.wpsg_smartcheckout .sc_voucher_label { display:block; margin-bottom:calc(0.35 * var(--sc-u, 1rem)); font-size:calc(0.85 * var(--sc-u, 1rem)); opacity:0.7; }
+.wpsg_smartcheckout .sc_voucher_row { display:flex; gap:calc(0.5 * var(--sc-u, 1rem)); flex-wrap:wrap; }
+.wpsg_smartcheckout .sc_voucher_input { flex:1 1 calc(12 * var(--sc-u, 1rem)); min-width:0; }
+.wpsg_smartcheckout .sc_voucher_list { margin-top:calc(0.75 * var(--sc-u, 1rem)); display:flex; flex-direction:column; gap:calc(0.4 * var(--sc-u, 1rem)); }
+.wpsg_smartcheckout .sc_voucher_item { display:flex; align-items:center; gap:calc(0.75 * var(--sc-u, 1rem)); flex-wrap:wrap; font-size:calc(0.9 * var(--sc-u, 1rem)); }
 .wpsg_smartcheckout .sc_voucher_code { font-weight:600; }
 .wpsg_smartcheckout .sc_voucher_partial { opacity:0.7; }
 .wpsg_smartcheckout .sc_voucher_value { margin-left:auto; }
 
 /* Formularfelder */
-.wpsg_smartcheckout .sc_fields { display:grid; grid-template-columns:repeat(12, 1fr); gap:0.9rem; }
-.wpsg_smartcheckout .sc_field { display:flex; flex-direction:column; gap:0.3rem; grid-column:span 12; min-width:0; }
+.wpsg_smartcheckout .sc_fields { display:grid; grid-template-columns:repeat(12, 1fr); gap:calc(0.9 * var(--sc-u, 1rem)); }
+.wpsg_smartcheckout .sc_field { display:flex; flex-direction:column; gap:calc(0.3 * var(--sc-u, 1rem)); grid-column:span 12; min-width:0; }
 .wpsg_smartcheckout .sc_field_half { grid-column:span 6; }
 .wpsg_smartcheckout .sc_field_wide { grid-column:span 8; }
 .wpsg_smartcheckout .sc_field_narrow { grid-column:span 4; }
-.wpsg_smartcheckout .sc_label { font-size:0.85rem; opacity:0.7; }
-.wpsg_smartcheckout .sc_required { color:var(--sc-error); margin-left:0.15rem; }
+.wpsg_smartcheckout .sc_label { font-size:calc(0.85 * var(--sc-u, 1rem)); opacity:0.7; }
+.wpsg_smartcheckout .sc_required { color:var(--sc-error); margin-left:calc(0.15 * var(--sc-u, 1rem)); }
 .wpsg_smartcheckout .sc_input,
 .wpsg_smartcheckout .sc_voucher_input,
-.wpsg_smartcheckout .sc_textarea { width:100%; padding:0.55rem 0.7rem; border:1px solid var(--sc-line); border-radius:var(--sc-radius); background:none; color:inherit; font:inherit; }
+.wpsg_smartcheckout .sc_textarea { width:100%; padding:calc(0.55 * var(--sc-u, 1rem)) calc(0.7 * var(--sc-u, 1rem)); border:1px solid var(--sc-line); border-radius:var(--sc-radius); background:none; color:inherit; font:inherit; }
 .wpsg_smartcheckout .sc_textarea { resize:vertical; }
 /* Auswahlfelder mit eigenem Pfeil: der Hintergrund der Felder wird zurückgesetzt, damit verschwindet ein vom Theme gezeichneter Pfeil */
 #wpsg_smartcheckout select.sc_input,
 #wpsg_smartcheckout select.sc_pvar_input,
-#wpsg_smartcheckout .sc_modul_extra select { -webkit-appearance:none; appearance:none; padding-right:2rem; background-color:transparent; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%237f7f7f' stroke-width='1.6'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 0.7rem center; background-size:0.7rem auto; cursor:pointer; }
-.wpsg_smartcheckout .sc_hint { margin-top:1rem; font-size:0.8rem; opacity:0.7; }
+#wpsg_smartcheckout .sc_modul_extra select,
+#wpsg_smartcheckout .sc_choice_hint select,
+#wpsg_smartcheckout .sc_choice_extra select { -webkit-appearance:none; appearance:none; padding-right:calc(2 * var(--sc-u, 1rem)); background-color:transparent; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%237f7f7f' stroke-width='1.6'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right calc(0.7 * var(--sc-u, 1rem)) center; background-size:calc(0.7 * var(--sc-u, 1rem)) auto; cursor:pointer; }
+.wpsg_smartcheckout .sc_hint { margin-top:var(--sc-u, 1rem); font-size:calc(0.8 * var(--sc-u, 1rem)); opacity:0.7; }
 .wpsg_smartcheckout .sc_modul_login:empty,
 .wpsg_smartcheckout .sc_modul_customer:empty,
 .wpsg_smartcheckout .sc_modul_payment:empty { display:none; }
 .wpsg_smartcheckout .sc_modul_basket,
 .wpsg_smartcheckout .sc_modul_customer,
 .wpsg_smartcheckout .sc_modul_payment,
-.wpsg_smartcheckout .sc_modul_sum { margin-top:1rem; }
+.wpsg_smartcheckout .sc_modul_sum { margin-top:var(--sc-u, 1rem); }
 .wpsg_smartcheckout .sc_modul_sum:empty { display:none; }
 
 /* Modulblöcke vor dem Abschluss (Bestellvariablen, gesonderte Lieferadresse, …)
@@ -181,55 +191,84 @@ html body.content-style-boxed .entry-content .wpsg_smartcheckout_after.alignwide
  * EinSeitenCheckouts gebracht.
  */
 .wpsg_smartcheckout .sc_modul_extra > div + div { margin-top:var(--sc-gap); }
-.wpsg_smartcheckout .sc_modul_extra h2 { margin:0 0 1.25rem 0; padding:0; font-size:1.05rem; line-height:1.3; }
+.wpsg_smartcheckout .sc_modul_extra h2 { margin:0 0 calc(1.25 * var(--sc-u, 1rem)) 0; padding:0; font-size:calc(1.05 * var(--sc-u, 1rem)); line-height:1.3; }
 .wpsg_smartcheckout .sc_modul_extra .wpsg_spacer,
 .wpsg_smartcheckout .sc_modul_extra .wpsg_clear { display:none; }
-.wpsg_smartcheckout .sc_modul_extra .wpsg_inner { display:flex; flex-direction:column; gap:0.9rem; }
-.wpsg_smartcheckout .sc_modul_extra .wpsg_checkoutblock { display:flex; flex-direction:column; gap:0.3rem; }
-.wpsg_smartcheckout .sc_modul_extra label { font-size:0.85rem; opacity:0.7; }
-.wpsg_smartcheckout .sc_modul_extra .wpsg_required { color:var(--sc-error); margin-left:0.15rem; }
+.wpsg_smartcheckout .sc_modul_extra .wpsg_inner { display:flex; flex-direction:column; gap:calc(0.9 * var(--sc-u, 1rem)); }
+.wpsg_smartcheckout .sc_modul_extra .wpsg_checkoutblock { display:flex; flex-direction:column; gap:calc(0.3 * var(--sc-u, 1rem)); }
+.wpsg_smartcheckout .sc_modul_extra label { font-size:calc(0.85 * var(--sc-u, 1rem)); opacity:0.7; }
+.wpsg_smartcheckout .sc_modul_extra .wpsg_required { color:var(--sc-error); margin-left:calc(0.15 * var(--sc-u, 1rem)); }
 .wpsg_smartcheckout .sc_modul_extra input[type="text"],
 .wpsg_smartcheckout .sc_modul_extra input[type="tel"],
 .wpsg_smartcheckout .sc_modul_extra input[type="email"],
 .wpsg_smartcheckout .sc_modul_extra input[type="number"],
 .wpsg_smartcheckout .sc_modul_extra select,
-.wpsg_smartcheckout .sc_modul_extra textarea { width:100%; padding:0.55rem 0.7rem; border:1px solid var(--sc-line); border-radius:var(--sc-radius); background:none; color:inherit; font:inherit; }
+.wpsg_smartcheckout .sc_modul_extra textarea { width:100%; padding:calc(0.55 * var(--sc-u, 1rem)) calc(0.7 * var(--sc-u, 1rem)); border:1px solid var(--sc-line); border-radius:var(--sc-radius); background:none; color:inherit; font:inherit; }
 .wpsg_smartcheckout .sc_modul_extra .wpsg_error { border-color:var(--sc-error); }
 
 /* Ankreuzfelder: Kästchen und Text stehen in einer Zeile, der Text bleibt bei einem Umbruch bündig */
-.wpsg_smartcheckout .sc_modul_extra .wpsg_mod_ordervars_check label { display:flex; align-items:flex-start; gap:0.5rem; opacity:1; cursor:pointer; }
+.wpsg_smartcheckout .sc_modul_extra .wpsg_mod_ordervars_check label { display:flex; align-items:flex-start; gap:calc(0.5 * var(--sc-u, 1rem)); opacity:1; cursor:pointer; }
 .wpsg_smartcheckout .sc_modul_extra .wpsg_mod_ordervars_check label > input[type="checkbox"] { flex:0 0 auto; width:auto; margin:0; }
 .wpsg_smartcheckout .sc_modul_extra .wpsg_mod_ordervars_text { flex:1 1 auto; min-width:0; }
 
 /* Versand- und Zahlungsauswahl */
-.wpsg_smartcheckout .sc_choices { display:flex; flex-direction:column; gap:0.5rem; }
-.wpsg_smartcheckout .sc_choice { --sc-choice-radio:1rem; --sc-choice-gap:0.6rem; display:flex; flex-direction:column; gap:0.3rem; padding:0.8rem 0.9rem; border:1px solid var(--sc-line-soft); border-radius:var(--sc-radius); cursor:pointer; }
+.wpsg_smartcheckout .sc_choices { display:flex; flex-direction:column; gap:calc(0.5 * var(--sc-u, 1rem)); }
+.wpsg_smartcheckout .sc_choice { --sc-choice-radio:var(--sc-u, 1rem); --sc-choice-gap:calc(0.6 * var(--sc-u, 1rem)); display:flex; flex-direction:column; gap:calc(0.3 * var(--sc-u, 1rem)); padding:calc(0.8 * var(--sc-u, 1rem)) calc(0.9 * var(--sc-u, 1rem)); border:1px solid var(--sc-line-soft); border-radius:var(--sc-radius); cursor:pointer; }
 .wpsg_smartcheckout .sc_choice_active { border-color:var(--sc-accent); background:var(--sc-flat); }
 /* Kopfzeile: Radio, Logo, Bezeichnung und Preis auf einer Linie */
 .wpsg_smartcheckout .sc_choice_head { display:flex; align-items:center; gap:var(--sc-choice-gap); min-width:0; }
 .wpsg_smartcheckout .sc_choice_head input[type="radio"] { flex:0 0 auto; width:var(--sc-choice-radio); height:var(--sc-choice-radio); margin:0; }
 /* Feste Breite, damit die Bezeichnungen bei unterschiedlich breiten Logos bündig untereinander stehen */
-.wpsg_smartcheckout .sc_choice_logo { flex:0 0 auto; width:4.5rem; height:22px; object-fit:contain; object-position:left center; }
+.wpsg_smartcheckout .sc_choice_logo { flex:0 0 auto; width:calc(4.5 * var(--sc-u, 1rem)); height:22px; object-fit:contain; object-position:left center; }
 .wpsg_smartcheckout .sc_choice_name { flex:1 1 auto; min-width:0; font-weight:600; }
 .wpsg_smartcheckout .sc_choice_price { flex:0 0 auto; margin-left:auto; white-space:nowrap; }
 /* Beschreibung und Zusatzangaben darunter, bündig mit Logo bzw. Bezeichnung */
 .wpsg_smartcheckout .sc_choice_hint,
-.wpsg_smartcheckout .sc_choice_extra { padding-left:calc(var(--sc-choice-radio) + var(--sc-choice-gap)); font-size:0.85rem; }
+.wpsg_smartcheckout .sc_choice_extra { padding-left:calc(var(--sc-choice-radio) + var(--sc-choice-gap)); font-size:calc(0.85 * var(--sc-u, 1rem)); }
 .wpsg_smartcheckout .sc_choice_hint { opacity:0.7; }
+.wpsg_smartcheckout .sc_choice_head { cursor:pointer; }
+
+/*
+ * Eingabefelder im Hinweis einer Versand- oder Zahlungsart (z.B. Kreditkarte, Lastschrift)
+ *
+ * Das Markup kommt aus den Modulen (Label mit Text und Feld), es wird hier auf die Optik der übrigen Felder gebracht.
+ * Hinweise mit Feldern werden nicht gedämpft, die vorangestellten Umbrüche und Clear-Elemente entfallen.
+ */
+.wpsg_smartcheckout .sc_choice_hint:has(input, select, textarea) { opacity:1; }
+.wpsg_smartcheckout .sc_choice_hint:has(input, select, textarea) > br,
+.wpsg_smartcheckout .sc_choice_hint .wpsg_clear { display:none; }
+.wpsg_smartcheckout .sc_choice_hint label,
+.wpsg_smartcheckout .sc_choice_extra label { display:block; margin:0; font-size:calc(0.85 * var(--sc-u, 1rem)); font-weight:inherit; }
+.wpsg_smartcheckout .sc_choice_hint input:not([type="radio"]):not([type="checkbox"]):not([type="hidden"]),
+.wpsg_smartcheckout .sc_choice_hint select,
+.wpsg_smartcheckout .sc_choice_hint textarea,
+.wpsg_smartcheckout .sc_choice_extra input:not([type="radio"]):not([type="checkbox"]):not([type="hidden"]),
+.wpsg_smartcheckout .sc_choice_extra select { display:block; width:100%; margin:calc(0.3 * var(--sc-u, 1rem)) 0 0 0; padding:calc(0.5 * var(--sc-u, 1rem)) calc(0.65 * var(--sc-u, 1rem)); border:1px solid var(--sc-line); border-radius:var(--sc-radius); background-color:transparent; color:inherit; font:inherit; font-size:var(--sc-u, 1rem); line-height:1.3; box-shadow:none; }
+.wpsg_smartcheckout .sc_choice_hint .wpsg_error,
+.wpsg_smartcheckout .sc_choice_extra .wpsg_error { border-color:var(--sc-error); }
+.wpsg_smartcheckout .sc_choice_hint .wpsg_required { color:var(--sc-error); margin-left:calc(0.15 * var(--sc-u, 1rem)); }
+
+/* Kreditkarte: zweispaltig, Monat und Jahr der Gültigkeit nebeneinander */
+.wpsg_smartcheckout .sc_choice_hint .wpsg_mod_creditcard { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:calc(0.75 * var(--sc-u, 1rem)) var(--sc-u, 1rem); max-width:calc(34 * var(--sc-u, 1rem)); margin-top:calc(0.6 * var(--sc-u, 1rem)); }
+.wpsg_smartcheckout .sc_choice_hint .wpsg_mod_creditcard_field:has(select + select) { grid-column:1 / -1; }
+.wpsg_smartcheckout .sc_choice_hint .wpsg_mod_creditcard label:has(select + select) { display:flex; flex-wrap:wrap; align-items:center; }
+.wpsg_smartcheckout .sc_choice_hint .wpsg_mod_creditcard label:has(select + select) select { display:inline-block; width:auto; min-width:calc(5.5 * var(--sc-u, 1rem)); margin:0 0 0 calc(0.5 * var(--sc-u, 1rem)); }
+.wpsg_smartcheckout .sc_choice_hint .wpsg_mandatoryfield_hint { grid-column:1 / -1; font-size:calc(0.8 * var(--sc-u, 1rem)); opacity:0.7; }
+
 
 /* Zusammenfassung */
-.wpsg_smartcheckout .sc_summary { position:relative; padding:1.25rem; border:1px solid var(--sc-line-soft); border-radius:var(--sc-radius); }
+.wpsg_smartcheckout .sc_summary { position:relative; padding:calc(1.25 * var(--sc-u, 1rem)); border:1px solid var(--sc-line-soft); border-radius:var(--sc-radius); }
 .wpsg_smartcheckout_single .sc_side { margin-top:var(--sc-gap); }
-.wpsg_smartcheckout .sc_sum_rows { display:flex; flex-direction:column; gap:0.4rem; }
-.wpsg_smartcheckout .sc_sum_row { display:flex; justify-content:space-between; gap:1rem; align-items:baseline; font-size:0.95rem; }
+.wpsg_smartcheckout .sc_sum_rows { display:flex; flex-direction:column; gap:calc(0.4 * var(--sc-u, 1rem)); }
+.wpsg_smartcheckout .sc_sum_row { display:flex; justify-content:space-between; gap:var(--sc-u, 1rem); align-items:baseline; font-size:calc(0.95 * var(--sc-u, 1rem)); }
 .wpsg_smartcheckout .sc_sum_value { white-space:nowrap; }
 .wpsg_smartcheckout .sc_sum_note,
-.wpsg_smartcheckout .sc_sum_hint { font-size:0.8rem; opacity:0.7; }
-.wpsg_smartcheckout .sc_sum_hint { margin-top:0.75rem; }
-.wpsg_smartcheckout .sc_sum_total { margin-top:0.5rem; padding-top:0.6rem; border-top:1px solid var(--sc-line); font-size:1.05rem; font-weight:600; }
+.wpsg_smartcheckout .sc_sum_hint { font-size:calc(0.8 * var(--sc-u, 1rem)); opacity:0.7; }
+.wpsg_smartcheckout .sc_sum_hint { margin-top:calc(0.75 * var(--sc-u, 1rem)); }
+.wpsg_smartcheckout .sc_sum_total { margin-top:calc(0.5 * var(--sc-u, 1rem)); padding-top:calc(0.6 * var(--sc-u, 1rem)); border-top:1px solid var(--sc-line); font-size:calc(1.05 * var(--sc-u, 1rem)); font-weight:600; }
 
 /* Zusatzzeilen der Module (z.B. Gesamtgewicht) bringen das Markup der klassischen Zusammenfassung mit, sie erscheinen gedämpft wie die Hinweise */
-.wpsg_smartcheckout .sc_modul_sum .overview_sum_row { display:flex; justify-content:space-between; gap:1rem; align-items:baseline; font-size:0.8rem; opacity:0.7; }
+.wpsg_smartcheckout .sc_modul_sum .overview_sum_row { display:flex; justify-content:space-between; gap:var(--sc-u, 1rem); align-items:baseline; font-size:calc(0.8 * var(--sc-u, 1rem)); opacity:0.7; }
 .wpsg_smartcheckout .sc_modul_sum .overview_sum_row .title,
 .wpsg_smartcheckout .sc_modul_sum .overview_sum_row .value { width:auto; margin:0; font-weight:normal; }
 .wpsg_smartcheckout .sc_modul_sum .overview_sum_row .value { white-space:nowrap; }
@@ -237,14 +276,14 @@ html body.content-style-boxed .entry-content .wpsg_smartcheckout_after.alignwide
 
 /* Bestellbedingungen und AGB */
 .wpsg_smartcheckout .sc_modul_conditions,
-.wpsg_smartcheckout .sc_agb { margin-top:1.1rem; font-size:0.85rem; }
-.wpsg_smartcheckout .sc_modul_conditions .wpsg_agb + .wpsg_agb { margin-top:0.6rem; }
+.wpsg_smartcheckout .sc_agb { margin-top:calc(1.1 * var(--sc-u, 1rem)); font-size:calc(0.85 * var(--sc-u, 1rem)); }
+.wpsg_smartcheckout .sc_modul_conditions .wpsg_agb + .wpsg_agb { margin-top:calc(0.6 * var(--sc-u, 1rem)); }
 /* Die Module setzen den Text als losen Textknoten ins label — Flex würde ihn zerreißen */
 .wpsg_smartcheckout .sc_modul_conditions label,
-.wpsg_smartcheckout .sc_agb label { display:block; position:relative; padding-left:1.5rem; cursor:pointer; }
+.wpsg_smartcheckout .sc_agb label { display:block; position:relative; padding-left:calc(1.5 * var(--sc-u, 1rem)); cursor:pointer; }
 .wpsg_smartcheckout .sc_modul_conditions label > input[type="checkbox"],
-.wpsg_smartcheckout .sc_agb label > input[type="checkbox"] { position:absolute; left:0; top:0.15rem; margin:0; }
-.wpsg_smartcheckout .sc_modul_conditions .wpsg_mod_ordercondition_hint { max-height:9rem; overflow-y:auto; margin-top:0.5rem; padding:0.6rem; border:1px solid var(--sc-line-soft); border-radius:var(--sc-radius); }
+.wpsg_smartcheckout .sc_agb label > input[type="checkbox"] { position:absolute; left:0; top:calc(0.15 * var(--sc-u, 1rem)); margin:0; }
+.wpsg_smartcheckout .sc_modul_conditions .wpsg_mod_ordercondition_hint { max-height:calc(9 * var(--sc-u, 1rem)); overflow-y:auto; margin-top:calc(0.5 * var(--sc-u, 1rem)); padding:calc(0.6 * var(--sc-u, 1rem)); border:1px solid var(--sc-line-soft); border-radius:var(--sc-radius); }
 
 /* Fehlerhafte Eingaben */
 .wpsg_smartcheckout .sc_field.sc_invalid .sc_input,
@@ -254,39 +293,39 @@ html body.content-style-boxed .entry-content .wpsg_smartcheckout_after.alignwide
 .wpsg_smartcheckout .sc_agb.sc_invalid { outline:1px solid var(--sc-error); outline-offset:4px; }
 
 /* Buttons erben Schrift und Farbe des Themes und bleiben bewusst schlicht */
-.wpsg_smartcheckout .sc_button { display:inline-flex; align-items:center; justify-content:center; padding:0.65rem 1.1rem; border:1px solid var(--sc-accent); border-radius:var(--sc-radius); background:none; color:inherit; font:inherit; cursor:pointer; }
+.wpsg_smartcheckout .sc_button { display:inline-flex; align-items:center; justify-content:center; padding:calc(0.65 * var(--sc-u, 1rem)) calc(1.1 * var(--sc-u, 1rem)); border:1px solid var(--sc-accent); border-radius:var(--sc-radius); background:none; color:inherit; font:inherit; cursor:pointer; }
 .wpsg_smartcheckout .sc_button:hover { background:var(--sc-flat); }
 .wpsg_smartcheckout .sc_button:disabled { opacity:0.5; cursor:default; }
-.wpsg_smartcheckout .sc_button_secondary { padding:0.5rem 0.9rem; border-color:var(--sc-line); font-size:0.9rem; }
-.wpsg_smartcheckout .sc_button_order { width:100%; margin-top:1.1rem; font-weight:600; }
+.wpsg_smartcheckout .sc_button_secondary { padding:calc(0.5 * var(--sc-u, 1rem)) calc(0.9 * var(--sc-u, 1rem)); border-color:var(--sc-line); font-size:calc(0.9 * var(--sc-u, 1rem)); }
+.wpsg_smartcheckout .sc_button_order { width:100%; margin-top:calc(1.1 * var(--sc-u, 1rem)); font-weight:600; }
 
 /* Ladeanzeige */
-.wpsg_smartcheckout .sc_spinner { position:absolute; top:1.25rem; right:1.25rem; }
-.wpsg_smartcheckout .sc_spinner_dot { display:block; width:0.9rem; height:0.9rem; border:2px solid var(--sc-line); border-top-color:var(--sc-accent); border-radius:50%; animation:wpsg_sc_spin 0.7s linear infinite; }
+.wpsg_smartcheckout .sc_spinner { position:absolute; top:calc(1.25 * var(--sc-u, 1rem)); right:calc(1.25 * var(--sc-u, 1rem)); }
+.wpsg_smartcheckout .sc_spinner_dot { display:block; width:calc(0.9 * var(--sc-u, 1rem)); height:calc(0.9 * var(--sc-u, 1rem)); border:2px solid var(--sc-line); border-top-color:var(--sc-accent); border-radius:50%; animation:wpsg_sc_spin 0.7s linear infinite; }
 
 /* Layer beim Abschicken der Bestellung über der gesamten Seite */
-.wpsg_smartcheckout .sc_submitting { position:fixed; top:0; left:0; right:0; bottom:0; z-index:100001; display:flex; align-items:center; justify-content:center; padding:1rem; background-color:rgba(255, 255, 255, 0.75); cursor:wait; }
-.wpsg_smartcheckout .sc_submitting_inner { display:flex; align-items:center; gap:0.75rem; padding:1rem 1.25rem; border:1px solid var(--sc-line-soft); border-radius:var(--sc-radius); background-color:#FFFFFF; color:#1d1d1d; box-shadow:0 4px 20px rgba(0, 0, 0, 0.08); }
-.wpsg_smartcheckout .sc_submitting .sc_spinner_dot { width:1.2rem; height:1.2rem; }
+.wpsg_smartcheckout .sc_submitting { position:fixed; top:0; left:0; right:0; bottom:0; z-index:100001; display:flex; align-items:center; justify-content:center; padding:var(--sc-u, 1rem); background-color:rgba(255, 255, 255, 0.75); cursor:wait; }
+.wpsg_smartcheckout .sc_submitting_inner { display:flex; align-items:center; gap:calc(0.75 * var(--sc-u, 1rem)); padding:var(--sc-u, 1rem) calc(1.25 * var(--sc-u, 1rem)); border:1px solid var(--sc-line-soft); border-radius:var(--sc-radius); background-color:#FFFFFF; color:#1d1d1d; box-shadow:0 4px 20px rgba(0, 0, 0, 0.08); }
+.wpsg_smartcheckout .sc_submitting .sc_spinner_dot { width:calc(1.2 * var(--sc-u, 1rem)); height:calc(1.2 * var(--sc-u, 1rem)); }
 .wpsg_smartcheckout .sc_label_hidden,
 .wpsg_smartcheckout .sc_visuallyhidden { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
 
 /* GARAN-Gewährleistungslabel */
 
-.wpsg_smartcheckout .sc_garan { text-align:center; margin:1rem 0; }
+.wpsg_smartcheckout .sc_garan { text-align:center; margin:var(--sc-u, 1rem) 0; }
 .wpsg_smartcheckout .sc_garan img { display:block; max-width:100%; height:auto; }
-.wpsg_smartcheckout .sc_product_garan { margin-top:0.5rem; }
-.wpsg_smartcheckout .wpsg_product_garan_wrap { margin-bottom:0.5rem; }
+.wpsg_smartcheckout .sc_product_garan { margin-top:calc(0.5 * var(--sc-u, 1rem)); }
+.wpsg_smartcheckout .wpsg_product_garan_wrap { margin-bottom:calc(0.5 * var(--sc-u, 1rem)); }
 .wpsg_smartcheckout .sc_garan_zoom { display:inline-block; padding:0; border:0; background:none; cursor:zoom-in; }
 .wpsg_smartcheckout .sc_garan_zoom:focus-visible { outline:2px solid currentColor; outline-offset:2px; }
 .wpsg_smartcheckout .sc_garan_lightbox { cursor:zoom-out; }
 .wpsg_smartcheckout .sc_garan_lightbox .sc_garan_popup_inner { cursor:default; }
-.wpsg_smartcheckout .sc_garan_popup { position:fixed; top:0; left:0; right:0; bottom:0; z-index:100000; display:flex; align-items:center; justify-content:center; padding:1rem; background-color:rgba(0, 0, 0, 0.6); }
-.wpsg_smartcheckout .sc_garan_popup_inner { display:flex; flex-direction:column; max-width:600px; max-height:100%; padding:1rem; text-align:center; background-color:#FFFFFF; }
+.wpsg_smartcheckout .sc_garan_popup { position:fixed; top:0; left:0; right:0; bottom:0; z-index:100000; display:flex; align-items:center; justify-content:center; padding:var(--sc-u, 1rem); background-color:rgba(0, 0, 0, 0.6); }
+.wpsg_smartcheckout .sc_garan_popup_inner { display:flex; flex-direction:column; max-width:600px; max-height:100%; padding:var(--sc-u, 1rem); text-align:center; background-color:#FFFFFF; }
 .wpsg_smartcheckout .sc_garan_popup_image { min-height:0; overflow-y:auto; }
 .wpsg_smartcheckout .sc_garan_popup_image img { max-width:100%; height:auto; }
-.wpsg_smartcheckout .sc_garan_popup_inner .sc_button { flex:0 0 auto; margin-top:1rem; }
-.wpsg_smartcheckout .sc_product_revocation { margin-top:0.5rem; }
+.wpsg_smartcheckout .sc_garan_popup_inner .sc_button { flex:0 0 auto; margin-top:var(--sc-u, 1rem); }
+.wpsg_smartcheckout .sc_product_revocation { margin-top:calc(0.5 * var(--sc-u, 1rem)); }
 
 @keyframes wpsg_sc_spin {
 	to { transform:rotate(360deg); }
@@ -304,10 +343,11 @@ html body.content-style-boxed .entry-content .wpsg_smartcheckout_after.alignwide
 }
 
 @media (max-width: 600px) {
-	.wpsg_smartcheckout .sc_summary { padding:1rem; }
-	.wpsg_smartcheckout .sc_product { padding:0.75rem; }
+	.wpsg_smartcheckout .sc_choice_hint .wpsg_mod_creditcard { grid-template-columns:minmax(0, 1fr); }
+	.wpsg_smartcheckout .sc_summary { padding:var(--sc-u, 1rem); }
+	.wpsg_smartcheckout .sc_product { padding:calc(0.75 * var(--sc-u, 1rem)); }
 	/* Ohne Produktbild bliebe im Raster eine leere Spalte stehen, deshalb hier Flex */
-	.wpsg_smartcheckout .sc_product { display:flex; flex-wrap:wrap; align-items:center; gap:0.75rem 1rem; }
+	.wpsg_smartcheckout .sc_product { display:flex; flex-wrap:wrap; align-items:center; gap:calc(0.75 * var(--sc-u, 1rem)) var(--sc-u, 1rem); }
 	.wpsg_smartcheckout .sc_product_image { flex:0 0 auto; }
 	.wpsg_smartcheckout .sc_product_body { flex:1 1 60%; min-width:0; }
 	.wpsg_smartcheckout .sc_product_fields { flex:1 1 100%; }
@@ -317,3 +357,24 @@ html body.content-style-boxed .entry-content .wpsg_smartcheckout_after.alignwide
 	.wpsg_smartcheckout .sc_field_wide,
 	.wpsg_smartcheckout .sc_field_narrow { grid-column:span 12; }
 }
+
+/*
+ * Theme "wpshopgermany" (Bootstrap 3)
+ *
+ * Bootstrap setzt html { font-size:10px }, alle Größen des Checkouts würden damit zu klein. Die Modultemplates
+ * des Themes (z.B. Bestellvariablen) bringen Bootstrap-Raster und eigene Auswahlfelder (sto_select) mit, deren
+ * Script im SmartCheckout nicht läuft.
+ */
+body.wp-theme-wpshopgermany .wpsg_smartcheckout,
+body.wp-theme-wpshopgermany .wpsg_smartcheckout_after { --sc-u:15px; }
+body.wp-theme-wpshopgermany .wpsg_smartcheckout label { max-width:none; margin-bottom:0; font-weight:inherit; }
+body.wp-theme-wpshopgermany .wpsg_smartcheckout .sc_title { letter-spacing:normal; }
+body.wp-theme-wpshopgermany .wpsg_smartcheckout .sc_modul_extra .row { margin-left:0; margin-right:0; }
+body.wp-theme-wpshopgermany .wpsg_smartcheckout .sc_modul_extra .row { margin-bottom:0; }
+body.wp-theme-wpshopgermany .wpsg_smartcheckout .sc_modul_extra .row + .row { margin-top:calc(0.9 * var(--sc-u)); }
+body.wp-theme-wpshopgermany .wpsg_smartcheckout .sc_modul_extra [class*="col-"] { float:none; width:auto; padding-left:0; padding-right:0; }
+body.wp-theme-wpshopgermany .wpsg_smartcheckout .sc_modul_extra .sto_col_label { margin-bottom:calc(0.3 * var(--sc-u)); }
+body.wp-theme-wpshopgermany .wpsg_smartcheckout .sc_modul_extra .sto_col_label label { font-size:calc(0.85 * var(--sc-u)); opacity:0.7; }
+body.wp-theme-wpshopgermany .wpsg_smartcheckout .sto_select select { display:block; }
+body.wp-theme-wpshopgermany .wpsg_smartcheckout .sto_select .click,
+body.wp-theme-wpshopgermany .wpsg_smartcheckout .sto_select .layer { display:none; }
diff --git a/views/js/smartcheckout.js b/views/js/smartcheckout.js
index df7721a..44cee1b 100644
--- a/views/js/smartcheckout.js
+++ b/views/js/smartcheckout.js
@@ -149,6 +149,22 @@
 			}, // hasError(name)
 
 			/**
+			 * Wählt eine Versand- oder Zahlungsart beim Klick in ihren Block (auch in Hinweis oder Eingabefelder)
+			 *
+			 * Das label umfasst nur die Kopfzeile, damit Eingabefelder im Hinweis (z.B. Kreditkarte) kein
+			 * verschachteltes label bilden. Der Klick auf das Radio selbst läuft über v-model und @change.
+			 */
+			selectChoice: function(type, id, event) {
+
+				if (event && event.target && typeof event.target.closest === 'function' && event.target.closest('.sc_choice_head') !== null) return;
+				if (this.form[type] === id) return;
+
+				this.form[type] = id;
+				this.refresh();
+
+			}, // selectChoice(type, id, event)
+
+			/**
 			 * Erhöht oder verringert die Menge einer Position
 			 */
 			changeAmount: function(product, diff) {
diff --git a/views/mods/mod_creditcard/paymenthint.phtml b/views/mods/mod_creditcard/paymenthint.phtml
index bfece1b..4542906 100644
--- a/views/mods/mod_creditcard/paymenthint.phtml
+++ b/views/mods/mod_creditcard/paymenthint.phtml
@@ -28,7 +28,7 @@
 	<div class="wpsg_mod_creditcard_inhaber wpsg_mod_creditcard_field">

 		<label>

 			<?php echo __('Inhaber', 'wpsg'); ?><span class="wpsg_required">*</span>:

-			<input class="<?php echo ((in_array("mod_creditcard_inhaber", (array)$this->view['error']))?'wpsg_error':''); ?>" type="text" name="wpsg_mod_creditcard[inhaber]" value="<?php echo wpsg_hspc($this->view['wpsg_mod_creditcard']['inhaber']); ?>" />

+			<input class="<?php echo ((in_array("mod_creditcard_inhaber", (array)$this->view['error']))?'wpsg_error':''); ?>" type="text" autocomplete="cc-name" name="wpsg_mod_creditcard[inhaber]" value="<?php echo wpsg_hspc($this->view['wpsg_mod_creditcard']['inhaber']); ?>" />

 		</label>

 	</div>

 	<div class="wpsg_clear"></div>

@@ -36,7 +36,7 @@
 	<div class="wpsg_mod_creditcard_knr wpsg_mod_creditcard_field">

 		<label>

 			<?php echo __('Kartennummer', 'wpsg'); ?><span class="wpsg_required">*</span>:

-			<input class="<?php echo ((in_array("mod_creditcard_knr", (array)$this->view['error']))?'wpsg_error':''); ?>" type="text" id="wpsg_mod_creditcard_knr" name="wpsg_mod_creditcard[knr]" value="<?php echo wpsg_hspc($this->view['wpsg_mod_creditcard']['knr']); ?>" />

+			<input class="<?php echo ((in_array("mod_creditcard_knr", (array)$this->view['error']))?'wpsg_error':''); ?>" type="text" inputmode="numeric" autocomplete="cc-number" maxlength="23" id="wpsg_mod_creditcard_knr" name="wpsg_mod_creditcard[knr]" value="<?php echo wpsg_hspc($this->view['wpsg_mod_creditcard']['knr']); ?>" />

 		</label>

 	</div>

 	<div class="wpsg_clear"></div>

@@ -44,7 +44,7 @@
 	<div class="wpsg_mod_creditcard_knr wpsg_mod_creditcard_field">

 		<label>

 			<?php echo __('Prüfziffer', 'wpsg'); ?><span class="wpsg_required">*</span>:

-			<input class="<?php echo ((in_array("mod_creditcard_pruefz", (array)$this->view['error']))?'wpsg_error':''); ?>" type="text" name="wpsg_mod_creditcard[pruefz]" value="<?php echo wpsg_hspc($this->view['wpsg_mod_creditcard']['pruefz']); ?>" />

+			<input class="<?php echo ((in_array("mod_creditcard_pruefz", (array)$this->view['error']))?'wpsg_error':''); ?>" type="text" inputmode="numeric" autocomplete="cc-csc" maxlength="3" name="wpsg_mod_creditcard[pruefz]" value="<?php echo wpsg_hspc($this->view['wpsg_mod_creditcard']['pruefz']); ?>" />

 		</label>

 	</div>

 	<div class="wpsg_clear"></div>

diff --git a/views/mods/mod_smartcheckout/checkout.phtml b/views/mods/mod_smartcheckout/checkout.phtml
index 068d49b..6bae4ca 100644
--- a/views/mods/mod_smartcheckout/checkout.phtml
+++ b/views/mods/mod_smartcheckout/checkout.phtml
@@ -254,18 +254,19 @@
 
 					<div class="sc_choices" :class="{ 'sc_invalid': hasError('shipping') }">
 
-						<label class="sc_choice" v-for="item in state.shipping.list" :key="item.id" :class="{ 'sc_choice_active': form.shipping === item.id }">
+						<?php /* Das label umfasst nur die Kopfzeile, Hinweise der Module können eigene Eingabefelder enthalten */ ?>
+						<div class="sc_choice" v-for="item in state.shipping.list" :key="item.id" :class="{ 'sc_choice_active': form.shipping === item.id }" @click="selectChoice('shipping', item.id, $event)">
 
 							<?php /* Radio, Logo und Bezeichnung auf einer Zeile, die Beschreibung darunter */ ?>
-							<span class="sc_choice_head">
+							<label class="sc_choice_head">
 								<input type="radio" name="wpsg[checkout][shipping]" :value="item.id" v-model="form.shipping" @change="refresh" />
 								<img class="sc_choice_logo" v-if="item.logo" :src="item.logo" :alt="item.name" />
 								<span class="sc_choice_name">{{ item.name }}</span>
 								<span class="sc_choice_price" v-if="item.price">{{ item.price }}</span>
-							</span>
-							<span class="sc_choice_hint" v-if="item.hint" v-html="item.hint"></span>
+							</label>
+							<div class="sc_choice_hint" v-if="item.hint" v-html="item.hint"></div>
 
-						</label>
+						</div>
 
 					</div>
 
@@ -277,19 +278,20 @@
 
 					<div class="sc_choices" :class="{ 'sc_invalid': hasError('payment') }">
 
-						<label class="sc_choice" v-for="item in state.payment.list" :key="item.id" :class="{ 'sc_choice_active': form.payment === item.id }">
+						<?php /* Das label umfasst nur die Kopfzeile, Hinweise der Module können eigene Eingabefelder enthalten (z.B. Kreditkarte) */ ?>
+						<div class="sc_choice" v-for="item in state.payment.list" :key="item.id" :class="{ 'sc_choice_active': form.payment === item.id }" @click="selectChoice('payment', item.id, $event)">
 
 							<?php /* Radio, Logo und Bezeichnung auf einer Zeile, Beschreibung und Zusatzangaben darunter */ ?>
-							<span class="sc_choice_head">
+							<label class="sc_choice_head">
 								<input type="radio" name="wpsg[checkout][payment]" :value="item.id" v-model="form.payment" @change="refresh" />
 								<img class="sc_choice_logo" v-if="item.logo" :src="item.logo" :alt="item.name" />
 								<span class="sc_choice_name">{{ item.name }}</span>
 								<span class="sc_choice_price" v-if="item.price">{{ item.price }}</span>
-							</span>
-							<span class="sc_choice_hint" v-if="item.hint" v-html="item.hint"></span>
-							<span class="sc_choice_extra" v-if="item.extra" v-html="item.extra"></span>
+							</label>
+							<div class="sc_choice_hint" v-if="item.hint" v-html="item.hint"></div>
+							<div class="sc_choice_extra" v-if="item.extra" v-html="item.extra"></div>
 
-						</label>
+						</div>
 
 					</div>
 
diff --git a/views/mods/mod_basketteaser/smartcheckout.phtml b/views/mods/mod_smartcheckout/product_suggestions.phtml
index 712098c..78acea5 100644
--- a/views/mods/mod_basketteaser/smartcheckout.phtml
+++ b/views/mods/mod_smartcheckout/product_suggestions.phtml
@@ -1,19 +1,21 @@
 <?php
 
 	/**
-	 * Template für die Warenkorbteaserprodukte im SmartCheckout
+	 * Kompakte Liste vorgeschlagener Produkte unter den Warenkorbpositionen (Warenkorbteaser, Zubehör)
 	 *
-	 * Das Mengenfeld hat bewusst keinen Namen: es wird so bei den Aktualisierungen des
-	 * Checkouts nicht mitgeschickt. Erst der Button überträgt die Menge unter
-	 * wpsg_mod_basketteaser_row[ID] (siehe onModuleClick in smartcheckout.js).
+	 * Das Mengenfeld hat bewusst keinen Namen: es wird bei den Aktualisierungen des Checkouts nicht
+	 * mitgeschickt. Erst der Button überträgt die Menge unter <send_name>[<ID>] (siehe onModuleClick in
+	 * smartcheckout.js). Befüllt über \wpsgSmartcheckout\State::renderSuggestions().
 	 */
 
+	$view = $this->view['wpsg_smartcheckout_suggestions'];
+
 ?>
 <div class="sc_teaser">
 
-	<div class="sc_teaser_title"><?php echo esc_html__('Das könnte Sie auch interessieren', 'wpsg'); ?></div>
+	<div class="sc_teaser_title"><?php echo esc_html($view['title']); ?></div>
 
-	<?php foreach ($this->view['wpsg_mod_basketteaser']['products'] as $p) { ?>
+	<?php foreach ($view['products'] as $p) { ?>
 	<div class="sc_teaser_item" data-sc-item>
 
 		<?php if ($p['image'] !== '') { ?>
@@ -35,7 +37,7 @@
 
 		<div class="sc_teaser_action">
 			<input type="text" inputmode="numeric" class="sc_teaser_amount" value="1" data-sc-amount aria-label="<?php echo esc_attr__('Menge', 'wpsg'); ?>" />
-			<button type="button" class="sc_button sc_button_secondary" data-sc-send="wpsg_mod_basketteaser_row[<?php echo intval($p['id']); ?>]"><?php echo esc_html__('Hinzufügen', 'wpsg'); ?></button>
+			<button type="button" class="sc_button sc_button_secondary" data-sc-send="<?php echo esc_attr($view['send_name'].'['.intval($p['id']).']'); ?>"><?php echo esc_html__('Hinzufügen', 'wpsg'); ?></button>
 		</div>
 
 	</div>