diff options
| author | Roger Rehnelt <noreply@maennchen1.de> | 2026-10-01 18:11:31 +0200 |
|---|---|---|
| committer | Roger Rehnelt <noreply@maennchen1.de> | 2026-10-01 18:11:31 +0200 |
| commit | 89467378cc9f6782105e4fd8ef4a588217333ce2 (patch) | |
| tree | 5243a54ce2c3d8790b212c2b6c27c0024e9972a5 /views/css/wpsg-theme.css | |
| parent | b24f210a30d54ec9c8cba1b594bed0ac1e5e5bb8 (diff) | |
Darstellung: an das Theme angepasst
Neue Einstellung „Darstellung der Shopseiten“ mit der Stildatei wpsg-theme.css: Farben, Schrift, Knöpfe und Felder kommen aus dem Theme, anpassbar über --wpsg-*. Standard für neue Installationen, bestehende Shops bleiben klassisch.
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Diffstat (limited to 'views/css/wpsg-theme.css')
| -rw-r--r-- | views/css/wpsg-theme.css | 604 |
1 files changed, 604 insertions, 0 deletions
diff --git a/views/css/wpsg-theme.css b/views/css/wpsg-theme.css new file mode 100644 index 0000000..f5503f1 --- /dev/null +++ b/views/css/wpsg-theme.css @@ -0,0 +1,604 @@ +@charset "UTF-8"; + +/* + * wpShopGermany, Darstellung „An das Theme angepasst“ + * + * Schrift, Textfarbe, Hintergrund, Knöpfe und Eingabefelder kommen aus dem Theme. Alle Regeln stehen in + * :where() und haben damit die Spezifität 0: Theme, Website-Editor und eigenes CSS gewinnen immer. + * Linien und Flächen sind halbtransparentes Grau und passen zu hellen wie dunklen Themes. + * + * Anpassen über die Variablen --wpsg-* (Liste und Bedeutung: Handbuch „Für Theme-Entwickler“), etwa + * :root { --wpsg-color-accent: #8a2be2; } + * + * Ausnahme: Wenige Aufbauregeln (Breiten in eigenen Bausteinen) haben Klassen-Spezifität, damit allgemeine + * Feldregeln eines Themes das Layout nicht sprengen. Sie sind mit „Aufbau mit Klassen-Spezifität“ markiert. + * + * Die Darstellung „Klassisch“ nutzt css/frontend.css; diese Datei wird dann nicht geladen. + */ + +/* Variablen */ +:where(:root) { + --wpsg-color-background: var(--wp--preset--color--base, #ffffff); + --wpsg-color-foreground: var(--wp--preset--color--contrast, #111111); + --wpsg-color-accent: var(--wp--preset--color--primary, var(--wp--preset--color--contrast, currentColor)); + --wpsg-color-line: rgba(127, 127, 127, 0.35); + --wpsg-color-line-soft: rgba(127, 127, 127, 0.2); + --wpsg-color-surface: rgba(127, 127, 127, 0.08); + --wpsg-color-overlay: rgba(0, 0, 0, 0.6); + --wpsg-color-error: #e12b2b; + --wpsg-color-success: #228732; + --wpsg-color-notice: #a66709; + --wpsg-muted-opacity: 0.7; + --wpsg-radius: 3px; + --wpsg-gap: 1rem; + --wpsg-font-size-small: var(--wp--preset--font-size--small, 0.875em); + --wpsg-field-border: 1px solid var(--wpsg-color-line); + --wpsg-field-padding: 0.6em 0.75em; + --wpsg-field-background: transparent; + --wpsg-button-background: transparent; + --wpsg-button-color: inherit; + --wpsg-button-padding: 0.6em 1.2em; +} + +/* Allgemein */ +:where(.wpsg-flex) { display:flex; } +:where(.wpsg-align-center) { align-items:center; } +:where(.wpsg-gap-2) { gap:0.5rem; } +:where(.wpsg_clear) { clear:both; } +:where(.wpsg_spacer) { width:100%; height:1px; background-color:var(--wpsg-color-line-soft); margin-bottom:var(--wpsg-gap); } +:where(.wpsg_noscroll) { overflow:hidden; } +:where(.wpsg_upper) { vertical-align:top; font-size:60%; } +:where(.wpsg, .wpsg_mod_productindex, .wpsg_productform) :where(*, *::before, *::after) { box-sizing:border-box; } +:where(.wpsg_required) { color:var(--wpsg-color-error); font-weight:bold; } + +/* Shop-Container mit "alignwide" in Themes mit Inhaltskarte (z.B. Kadence "content-style-boxed") */ +:where(body.content-style-boxed .entry-content .wpsg.alignwide) { margin-left:0; margin-right:0; width:auto; max-width:100%; } + +/* Meldungen: Farbe nur am Rand, der Text bleibt in der Schriftfarbe des Themes */ +:where(#wpsg_error, #wpsg_message, #wpsg_notice) { margin:0 0 var(--wpsg-gap) 0; padding:0; } +:where(#wpsg_message, #wpsg_error, #wpsg_notice) :where(li, p) { list-style:none; margin:0 0 0.25rem 0; padding:0.5em 0.75em; border-left:4px solid var(--wpsg-color-line); background-color:var(--wpsg-color-surface); } +:where(#wpsg_message) :where(li, p) { border-left-color:var(--wpsg-color-success); } +:where(#wpsg_notice) :where(li, p) { border-left-color:var(--wpsg-color-notice); } +:where(#wpsg_error) :where(li, p) { border-left-color:var(--wpsg-color-error); } +:where(.wpsg_error) { border-color:var(--wpsg-color-error); } +:where(input.wpsg_error, select.wpsg_error, textarea.wpsg_error) { border:1px solid var(--wpsg-color-error); } +:where(label.wpsg_error) { position:absolute; right:2px; top:-2px; color:var(--wpsg-color-error); } +:where(.wpsg_checkout label.wpsg_error) { background-color:var(--wpsg-color-background); } + +/* + * Eingabefelder: schlichter Rückfall für Themes, die Felder nicht gestalten. + * Gestaltet das Theme input/select/textarea, gewinnt es. + */ +:where(.wpsg, .wpsg_productform, .wpsg_mod_productindex, .wpsg_basket_widget, .wpsg_mod_kundenverwaltung_widget, #wpsg_calc_layer) :where(input[type="text"], input[type="email"], input[type="tel"], input[type="number"], input[type="password"], input[type="date"], input[type="search"], input:not([type]), select, textarea) { + font:inherit; + color:inherit; + padding:var(--wpsg-field-padding); + border:var(--wpsg-field-border); + border-radius:var(--wpsg-radius); + background-color:var(--wpsg-field-background); + max-width:100%; +} +:where(.wpsg, .wpsg_productform, .wpsg_mod_productindex, .wpsg_basket_widget, .wpsg_mod_kundenverwaltung_widget, #wpsg_calc_layer) :where(select) { background-color:var(--wpsg-color-background); color:var(--wpsg-color-foreground); height:auto; } +:where(.wpsg, .wpsg_productform) :where(textarea) { resize:vertical; } + +/* + * Knöpfe: Im Ablauf tragen sie wp-element-button und bekommen den Knopfstil des Themes. Der Rückfall hier + * greift nur, wo weder Theme noch Klasse einen Stil setzen (etwa in überschriebenen Vorlagen): ein Rahmen in + * der Textfarbe, damit er zu jeder Link- und Textfarbe passt. + */ +:where(.wpsg_button, .wpsg_checkoutbutton, .wpsg_orderbutton, .wpsg_overviewbutton, .wpsg_refreshbutton, .wpsg_basketbutton, .wpsg_checkout2button, .wpsg_saveButton, .wpsg_registerButton, .wpsg_add_basket, .wpsg_add_requestlist, .wpsg_mod_request_button_refresh, .wpsg_mod_request_button_submit, .garan_label_popup_confirm):where(:not(.wp-element-button)) { + display:inline-block; + font:inherit; + line-height:1.4; + cursor:pointer; + padding:var(--wpsg-button-padding); + border:1px solid currentColor; + border-radius:var(--wpsg-radius); + background-color:var(--wpsg-button-background); + color:var(--wpsg-button-color); + text-decoration:none; +} +:where(.wpsg_button, .wpsg_checkoutbutton, .wpsg_orderbutton, .wpsg_overviewbutton, .wpsg_refreshbutton, .wpsg_basketbutton, .wpsg_checkout2button, .wpsg_saveButton, .wpsg_registerButton, .wpsg_add_basket, .wpsg_add_requestlist, .wpsg_mod_request_button_refresh, .wpsg_mod_request_button_submit, .garan_label_popup_confirm):where(:not(.wp-element-button)):where(:hover, :focus-visible) { background-color:var(--wpsg-color-surface); } + +/* Warenkorb-Widget */ +:where(.wpsg_basket_widget .wpshopgermany_linktokasse) { float:right; margin-top:var(--wpsg-gap); } +:where(.wpsg_basket_widget table) { width:100%; } +:where(.wpsg_basket_widget table td) { line-height:1.25rem; } +:where(.wpsg_basket_widget table .wpsg_cell_name) { padding-left:0.2rem; } +:where(.wpsg_basket_widget table .wpsg_cell_amount) { text-align:right; padding-right:0.2rem; } +:where(.wpsg_basket_widget table .wpsg_row_summary .wpsg_cell_amount) { font-weight:bold; } +:where(.wpsg_basket_widget .wpsg_tax_note) { font-size:0.75em; } + +/* Warenkorb */ +:where(.basket_product_wrap .basket_product_row) { display:flex; align-items:flex-start; gap:0.75em; border-bottom:1px solid var(--wpsg-color-line-soft); padding-bottom:1em; margin-bottom:1em; } +:where(.basket_product_wrap .basket_product_row .product_shortdesc) { margin-top:0.5em; } +:where(.basket_product_wrap .basket_product_row .productimage) { flex:0 0 auto; max-width:150px; } +:where(.basket_product_wrap .basket_product_row .productimage img, .wpsg_overview .overview_product_row .productimage img) { max-width:100%; height:auto; } +:where(.basket_product_wrap .basket_product_row .product_content) { flex:1 1 auto; min-width:0; display:flex; flex-direction:column; justify-content:space-between; } +:where(.basket_product_wrap .basket_product_row .product_action) { display:flex; flex-wrap:wrap; width:100%; justify-content:space-between; align-items:center; gap:0.25em 0.75em; } +:where(.basket_product_wrap .basket_product_row .product_action div.amount) { flex:0 0 auto; width:7.5em; padding-right:2em; position:relative; margin-top:0.5em; margin-bottom:0.5em; text-align:center; } +:where(.basket_product_wrap .basket_product_row .product_action div.amount input) { width:100%; padding-left:0.25em; padding-right:0.25em; text-align:center; } +:where(.basket_product_wrap .basket_product_row .product_action div.amount .wpsg_basket_removelink) { box-shadow:none; text-decoration:none; border:0; position:absolute; display:flex; right:5px; top:50%; margin-top:-8px; height:16px; width:16px; } +:where(.basket_product_wrap .basket_product_row .product_action .title) { flex:1 1 0%; min-width:0; margin-top:0.3em; margin-bottom:0.3em; overflow-wrap:anywhere; } +:where(.basket_product_wrap .basket_product_row .product_action .price) { flex:0 0 auto; text-align:right; } +:where(.basket_product_wrap .basket_product_row .product_action .price_total) { flex:0 0 auto; font-weight:bold; text-align:right; } +:where(.basket_product_wrap .basket_product_row .product_info) { display:flex; width:100%; justify-content:space-between; align-items:center; gap:0.75em; margin-bottom:0.25rem; } +:where(.basket_product_wrap .basket_product_row .product_upload .wpsg_mod_orderupload_target) { margin-left:15px; flex-grow:1; } +:where(.basket_product_wrap .basket_product_row .product_upload .wpsg_mod_orderupload_target ul) { margin:0; } +:where(.basket_product_wrap .basket_product_row .product_upload .wpsg_mod_orderupload_target li) { display:flex; justify-content:space-between; } +:where(.basket_product_wrap .basket_product_row .product_upload .wpsg_mod_orderupload_target li a.removeLink) { text-decoration:none; box-shadow:none; align-self:center; } +:where(.basket_product_wrap .basket_product_row .product_upload ul li) { list-style:none; } +:where(.basket_product_wrap .basket_product_row .product_info .titlep) { min-width:120px; display:inline-block; margin-top:0.3em; margin-bottom:0.3em; } +:where(.basket_product_wrap .basket_product_row .product_info .title) { display:inline-block; margin-top:0.3em; margin-bottom:0.3em; } +:where(.basket_product_wrap .basket_product_row .product_info .valuel) { width:50%; display:inline-block; text-align:left; } +:where(.basket_product_wrap .basket_product_row .product_info .valuer) { width:50%; display:inline-block; text-align:right; } +:where(.basket_product_wrap .basket_product_row .product_info .fulll) { width:80%; display:inline-block; text-align:left; } +:where(.basket_product_wrap .basket_product_row .product_info .dummyr) { width:19%; display:inline-block; text-align:right; } +:where(.basket_product_wrap .basket_product_row .product_info .dummy) { flex-grow:1; width:90px; } +:where(.basket_product_wrap .basket_product_row .product_info .dummyp) { flex-grow:1; width:110px; } +:where(.basket_sum_wrap .basket_sum_row, .basket_sum_wrap .wpsg_mod_basketteaser_row) { display:flex; width:100%; justify-content:space-between; align-items:center; gap:0.75em; } +:where(.basket_sum_wrap .basket_sum_row) :where(.title, .title2, .titlegs) { flex:1 1 auto; min-width:0; margin-top:0.3em; margin-bottom:0.3em; } +:where(.basket_sum_wrap .basket_sum_voucher .title, .basket_sum_wrap .basket_sum_coupon .title) { display:flex; justify-content:flex-start; align-items:center; } +:where(.basket_sum_wrap .basket_sum_voucher .title a, .basket_sum_wrap .basket_sum_coupon .title a) { margin-right:0.5rem; } +:where(.basket_sum_wrap .basket_sum_row) :where(.value, .sum, .delgs, .colgsr) { flex:0 0 auto; text-align:right; } +:where(.basket_sum_wrap .basket_sum_row) :where(.valuel, .codegsf, .codegsl, .colgsl) { text-align:left; } +:where(.basket_sum_wrap .basket_sum_row .sum) { font-weight:bold; } +:where(.basket_sum_wrap .basket_sum_row:has(.codegsl)) { flex-wrap:wrap; } +:where(.basket_sum_wrap .basket_sum_row .codegs) { flex:1 1 8em; text-align:left; } +:where(.basket_sum_wrap .basket_sum_row .codegsl) { flex:1 1 10em; min-width:0; } +:where(.basket_sum_wrap .basket_sum_row .codegsl input) { width:100%; } +:where(.basket_sum_wrap .basket_sum_row .codegsr) { flex:0 0 auto; text-align:right; } +:where(.basket_sum_wrap .wpsg_mod_basketteaser_row .valuer) { text-align:right; } +:where(.basket_sum_wrap .wpsg_mod_basketteaser_row .valuel) { text-align:left; } +:where(.basket_sum_wrap .wpsg_customerbudget_row .wpsg_customerbudget_error) { width:100%; margin:0; color:var(--wpsg-color-error); font-size:var(--wpsg-font-size-small); font-weight:bold; } +:where(.procent_payship) { display:block; font-size:0.75em; line-height:1.2; opacity:var(--wpsg-muted-opacity); margin-bottom:10px; } +:where(.wpsg_basket .wpsg_cell_gesamtsumme_value) { font-weight:bold; } +:where(.wpsg_basket .set_land, .wpsg_basket .set_shipping) { max-width:100%; } +:where(.wpsg_basket .wpsg_checkoutbutton) { float:right; } +:where(.wpsg_basket .wpsg_refreshbutton, .wpsg_checkout2button, .wpsg_basketbutton) { float:left; } +:where(.wpsg_basket .product_action_printshop .label) { align-self:flex-start; } +:where(.wpsg_basket .product_action_printshop .files ul li) { list-style:none; display:flex; align-items:center; justify-content:flex-end; } +:where(.wpsg_basket .product_action_printshop .files ul li img) { margin-left:5px; cursor:pointer; } + +/* Kasse und Anfrage */ +:where(.wpsg_checkout .wpsg_checkoutblock) { width:100%; clear:both; margin-bottom:2px; position:relative; } +:where(.wpsg_checkout .wpsg_checkoutblock label) { vertical-align:middle; } +:where(.wpsg_checkout .wpsg_checkoutblock) :where(input.wpsg_input_text, input[type="tel"], input[type="fax"], input[type="text"], input[type="email"], input[type="number"], input[type="password"], select) { margin-bottom:5px; width:100%; } +:where(.wpsg_checkout .wpsg_checkoutblock input[type="checkbox"]) { width:auto; margin-right:5px; } +:where(.wpsg_checkout .wpsg_checkoutblock .g-recaptcha) { float:right; margin-top:15px; } +:where(.wpsg_checkout .wpsg_mandatoryfield_hint, .wpsg_checkout2 .wpsg_mandatoryfield_hint) { margin-top:var(--wpsg-gap); } +:where(.wpsg_checkout .wpsg_checkout2button) { float:right; } +:where(.wpsg_checkout .wpsg_mod_ordervars, .wpsg_checkout .wpsg_mod_shippingadress) { margin-bottom:var(--wpsg-gap); } +:where(.wpsg_checkout .wpsg_mod_ordervars_field) { display:inline; } +:where(.wpsg_checkout h2) { padding:10px 0; } +:where(.wpsg_checkout .wpsg_commentblock textarea, .wpsg #wpsg_checkout_comment) { width:100%; height:150px; } +:where(.wpsg_checkout .wpsg_logout_box a) { float:right; padding:0.75em 1em; font-weight:bold; } +:where(.wpsg_checkout, .wpsg_mod_request_requestpage) :where(#wpsg_streetnr.wpsg_checkoutblock, #wpsg_shipping_streetnr.wpsg_checkoutblock) { display:flex; flex-direction:row; width:100%; } +:where(.wpsg_checkout, .wpsg_mod_request_requestpage) :where(#wpsg_streetnr.wpsg_checkoutblock, #wpsg_shipping_streetnr.wpsg_checkoutblock) :where(.street) { flex-grow:1; padding-right:15px; } +:where(.wpsg_checkout, .wpsg_mod_request_requestpage) :where(#wpsg_streetnr.wpsg_checkoutblock, #wpsg_shipping_streetnr.wpsg_checkoutblock) :where(.nr) { flex:0 0 6em; } +:where(.wpsg_checkout, .wpsg_mod_request_requestpage) :where(#wpsg_streetnr.wpsg_checkoutblock, #wpsg_shipping_streetnr.wpsg_checkoutblock) :where(.nr input) { width:100%; } +:where(.wpsg_checkout label[for="wpsg_mod_trustedshops_set"]) { margin:var(--wpsg-gap) 0; display:block; } + +/* Versand- und Zahlungsart */ +:where(.shippay_wrap) { margin-top:2.5rem; width:100%; } +:where(.wpsg_payment .wpsg_payment_textwrap) { margin-top:2.5rem; } +:where(.shippay_wrap .shippay_item_wrap) { position:relative; border-top:1px solid var(--wpsg-color-line-soft); cursor:pointer; padding-left:8px; padding-right:40px; } +:where(.shippay_wrap .shippay_item_wrap:last-child) { border-bottom:1px solid var(--wpsg-color-line-soft); } +:where(.shippay_wrap .shippay_active, .shippay_wrap .shippay_item_wrap:hover) { background-color:var(--wpsg-color-surface); } +:where(.shippay_wrap .shippay_item_wrap .shippay_hint) { display:none; margin-top:-5px; padding-bottom:20px; font-size:var(--wpsg-font-size-small); opacity:var(--wpsg-muted-opacity); } +:where(.shippay_wrap .shippay_active .shippay_hint) { display:block; padding-right:8px; } +:where(.shippay_wrap .shippay_active .shippay_hint .shippay_error) { color:var(--wpsg-color-error); font-weight:bold; } +:where(.shippay_wrap .shippay_item_wrap .wpsg_payship_name) { display:table-cell; vertical-align:middle; height:64px; } +:where(.shippay_wrap .shippay_active .wpsg_payship_name) { font-weight:bold; } +:where(.shippay_wrap .shippay_item_wrap input[type="radio"]) { display:none; } +:where(.shippay_wrap .shippay_item_wrap .shippay_checkmark) { display:none; position:absolute; right:12px; top:22px; width:10px; height:18px; border:solid currentColor; border-width:0 3px 3px 0; transform:rotate(45deg); } +:where(.shippay_wrap .shippay_active .shippay_checkmark) { display:block; } +:where(.shippay_wrap .wpsg_payship_logo) { margin-top:-5px; padding-bottom:10px; } +:where(.wpsg_checkout2 .wpsg_overviewbutton) { float:right; } +:where(.wpsg_checkout2 .wpsg_checkoutbutton) { float:left; } +:where(.wpsg_checkout2 .wpsg_overviewbutton, .wpsg_checkout2 .wpsg_checkoutbutton, .wpsg_overview .garan_label_wrap) { text-align:center; } + +/* Bestellübersicht */ +:where(.wpsg_overview .wpsg_agb) { width:100%; clear:both; margin-bottom:2px; } +:where(.wpsg_overview .shippayment) { margin-top:var(--wpsg-gap); float:right; width:45%; } +:where(.wpsg_overview .anschrift) { margin-top:var(--wpsg-gap); float:left; width:55%; } +:where(.wpsg_overview .subtitle) { font-weight:bold; margin-bottom:0.5rem; } +:where(.wpsg_overview .wpsg_orderbutton) { float:right; } +:where(.wpsg_overview .wpsg_checkoutbutton) { float:left; } +:where(.wpsg_overview .wpsg_table_wrap) { margin:10px 0; } +:where(.wpsg_overview .wpsg_table_wrap table) { width:100%; } +:where(.wpsg_overview .wpsg_table_wrap) :where(.wpsg_cell_menge, .wpsg_cell_mwst) { width:100px; text-align:center; } +:where(.wpsg_overview .wpsg_table_wrap) :where(.wpsg_cell_preis, .wpsg_cell_gesamtpreis, .wpsg_cell_summe_value, .wpsg_cell_shipping_value, .wpsg_cell_payment_value, .wpsg_cell_mwst_value) { text-align:right; } +:where(.wpsg_overview .wpsg_table_wrap .wpsg_cell_gesamt_value) { text-align:right; font-weight:bold; } +:where(.wpsg_overview) :where(.wpsg_cell_weight_value, .wpsg_cell_deliverytime_value, .wpsg_mod_varianten_value) { text-align:right; } +:where(.wpsg_overview .wpsg_overview_productimage) { display:inline; padding-right:0.2rem; vertical-align:baseline; } +:where(.wpsg_overview .einvoice_input) { margin-bottom:2rem; } +:where(.wpsg_overview .wpsg_table_wrap .overview_product_row) { display:flex; align-items:flex-start; gap:0.75em; border-bottom:1px solid var(--wpsg-color-line-soft); padding-bottom:1em; margin-bottom:1em; } +:where(.wpsg_overview .wpsg_table_wrap .overview_product_row .product_shortdesc) { margin-top:0.5em; } +:where(.wpsg_overview .wpsg_table_wrap .overview_product_row .productimage) { flex:0 0 auto; max-width:150px; } +:where(.wpsg_overview .wpsg_table_wrap .overview_product_row .product_content) { flex:1 1 auto; min-width:0; display:flex; flex-direction:column; justify-content:space-between; } +:where(.wpsg_overview .wpsg_table_wrap .overview_product_row .product_action) { display:flex; flex-wrap:wrap; width:100%; justify-content:space-between; align-items:center; gap:0.25em 0.75em; } +:where(.wpsg_overview .wpsg_table_wrap .overview_product_row .product_action div.amount) { width:80px; margin-top:0.5em; margin-bottom:0.5em; text-align:center; } +:where(.wpsg_overview .wpsg_table_wrap .overview_product_row .product_action .title) { flex:1 1 0%; min-width:0; margin-top:0.3em; margin-bottom:0.3em; overflow-wrap:anywhere; } +:where(.wpsg_overview .wpsg_table_wrap .overview_product_row .product_action) :where(.price, .price_total) { flex:0 0 auto; text-align:right; } +:where(.wpsg_overview .wpsg_table_wrap .overview_product_row .product_action .price_total) { font-weight:bold; } +:where(.wpsg_overview .wpsg_table_wrap .overview_product_row .product_info) { display:flex; width:100%; justify-content:space-between; align-items:center; gap:0.75em; } +:where(.wpsg_overview .wpsg_table_wrap .overview_product_row .product_info .titlep) { min-width:120px; display:inline-block; margin-top:0.3em; margin-bottom:0.3em; } +:where(.wpsg_overview .wpsg_table_wrap .overview_product_row .product_info .title) { display:inline-block; margin-top:0.3em; margin-bottom:0.3em; } +:where(.wpsg_overview .wpsg_table_wrap .overview_product_row .product_info .valuel) { width:50%; display:inline-block; text-align:left; } +:where(.wpsg_overview .wpsg_table_wrap .overview_product_row .product_info .valuer) { width:50%; display:inline-block; text-align:right; } +:where(.wpsg_overview .wpsg_table_wrap .overview_product_row .product_info .fulll) { width:80%; display:inline-block; text-align:left; } +:where(.wpsg_overview .wpsg_table_wrap .overview_product_row .product_info .dummyr) { width:19%; display:inline-block; text-align:right; } +:where(.overview_sum_wrap .overview_sum_row) { display:flex; width:100%; justify-content:space-between; align-items:center; gap:0.75em; } +:where(.overview_sum_wrap .overview_sum_row) :where(.title, .title2, .titlegs) { flex:1 1 auto; min-width:0; margin-top:0.3em; margin-bottom:0.3em; } +:where(.overview_sum_wrap .overview_sum_row) :where(.value, .sum, .delgs, .codegsr, .colgsr) { flex:0 0 auto; text-align:right; } +:where(.overview_sum_wrap .overview_sum_row) :where(.valuel, .codegs, .codegsl, .colgsl) { text-align:left; } +:where(.overview_sum_wrap .overview_sum_row .sum) { font-weight:bold; } + +/* Fortschritt der Kasse */ +:where(.wpsg_progress) { display:block; padding:0; margin:30px 0 100px 0; width:100%; } +:where(.wpsg_progress)::after { content:" "; display:block; width:100%; height:10px; border:1px solid var(--wpsg-color-line); background-color:var(--wpsg-color-surface); } +:where(.wpsg_progress span.step) { width:25%; display:block; float:left; list-style:none; position:relative; } +:where(.wpsg_progress span.step > .text) { margin-top:30px; text-align:center; width:100%; display:block; } +:where(.wpsg_progress span.step > .dot) { position:absolute; z-index:2; background-color:var(--wpsg-color-line); width:20px; height:20px; left:50%; top:0; margin-left:-14px; margin-top:-4px; border-radius:10px; } +:where(.wpsg_progress span.step)::before { content:" "; display:block; position:absolute; z-index:2; left:50%; margin-left:-20px; margin-top:-10px; width:30px; height:30px; border-radius:25px; border:1px solid var(--wpsg-color-line); background-color:var(--wpsg-color-background); } +:where(.wpsg_progress span.current, .wpsg_progress span.done)::before { background-color:var(--wpsg-color-accent); border-color:var(--wpsg-color-accent); } +:where(.wpsg_progress span.current > .dot, .wpsg_progress span.done > .dot) { background-color:var(--wpsg-color-background); } +:where(.wpsg_progress span.current, .wpsg_progress span.done)::after { content:" "; display:block; position:absolute; top:0; width:100%; height:10px; background-color:var(--wpsg-color-accent); opacity:0.5; } +:where(.wpsg_progress span.current)::after { width:50%; } + +/* Kundenkonto */ +:where(.wpsg_profil .wpsg_pwdvergessen_link) { line-height:30px; } +:where(.wpsg_profil .wpsg_mod_kundenverwaltung_login, .wpsg_checkout .wpsg_mod_kundenverwaltung_login) { float:right; } +:where(.wpsg_profil .wpsg_saveButton) { float:right; } +:where(#wpsg_pwd_info) { display:none; width:100%; padding:1.5rem; border:1px solid var(--wpsg-color-line); border-radius:var(--wpsg-radius); background-color:var(--wpsg-color-background); color:var(--wpsg-color-foreground); } +:where(#wpsg_pwd_info ul li) { margin:10px 20px; display:block; } +:where(.invalid) { padding-left:22px; line-height:24px; color:var(--wpsg-color-error); } +:where(.valid) { padding-left:22px; line-height:24px; color:var(--wpsg-color-success); } +:where(.wpsg_mod_kundenverwaltung_order .wpsg_mod_kundenverwaltung_producttable) { margin-top:var(--wpsg-gap); margin-bottom:2rem; } +:where(.wpsg_mod_kundenverwaltung_order table) { width:100%; } +:where(.wpsg_mod_kundenverwaltung_order table) :where(td, th) { text-align:left; } +:where(.wpsg_mod_kundenverwaltung_order .wpsg_box) { border-bottom:1px solid var(--wpsg-color-line); padding-bottom:var(--wpsg-gap); margin-bottom:var(--wpsg-gap); } +:where(.wpsg_mod_kundenverwaltung_widget) :where(input[type="text"], input[type="password"]) { width:100%; margin-bottom:0.5rem; } +:where(.wpsg_mod_kundenverwaltung_widget input[type="submit"]) { float:right; } + +/* Abo-Produkte */ +:where(.wpsg_mod_abo_order_product_wrap .wpsg_mod_abo_order_product) { border-bottom:1px solid var(--wpsg-color-line-soft); padding-bottom:15px; margin-bottom:15px; } +:where(.wpsg_mod_abo_order_product_wrap .wpsg_mod_abo_order_product .link_wrap) { display:inline-block; margin-left:10px; } +:where(.wpsg_mod_abo_order_product_wrap .wpsg_mod_abo_order_product .link_wrap)::before { content:'['; margin-right:5px; display:inline-block; } +:where(.wpsg_mod_abo_order_product_wrap .wpsg_mod_abo_order_product .link_wrap)::after { content:']'; margin-left:5px; display:inline-block; } +:where(.wpsg_mod_abo_order_product_wrap .wpsg_mod_abo_order_product) :where(.status_activ, .duration_running) { color:var(--wpsg-color-success); } +:where(.wpsg_mod_abo_order_product_wrap .wpsg_mod_abo_order_product) :where(.status_inactiv, .duration_expired) { color:var(--wpsg-color-error); } +:where(.wpsg_mod_abo_order_product_wrap .wpsg_mod_abo_order_product .duration_inextension) { color:var(--wpsg-color-notice); } +:where(.wpsg_mod_abo_order_product_wrap .wpsg_mod_abo_order_product .value) { margin-left:10px; } +:where(.wpsg_mod_abo_order_product_wrap .wpsg_mod_abo_order_product .image) { float:left; margin-right:15px; } +:where(.wpsg_mod_abo_order_product_wrap .wpsg_mod_abo_order_product .label) { float:left; width:15rem; } + +/* Produkt */ +:where(.wpsg_productform) { position:relative; } +:where(.wpsg_productform img) { max-width:100%; height:auto; } +:where(.wpsg_productform .wpsg_produkt_wrapper .wpsg_productimages) { float:left; margin-right:0.75em; } +:where(.wpsg_productform .wpsg_produkt_produktbilder) { max-width:200px; } +:where(.wpsg_productform .wpsg_produkt_wrapper .wpsg_produkt_preishinweis) { font-size:0.75em; } +:where(.wpsg_productform .wpsg_produkt_wrapper .wpsg_mod_productview_oldprice, .product_wrap .productdetails .oldprice) { text-decoration:line-through; } +:where(.wpsg_productform .wpsg_produkt_wrapper .wpsg_mod_productview_price) { font-weight:bold; } +:where(.wpsg_productform .wpsg_produkt_wrapper) :where(.wpsg_produkt_shortdescription, .wpsg_product_only_store, .wpsg_mod_productvariants_product_wrap) { margin-top:0.75em; margin-bottom:0.75em; } +:where(.wpsg_productform .wpsg_produkt_wrapper .wpsg_mod_productvariants_product_wrap select) { width:100%; } +:where(.wpsg_productform .wpsg_produkt_wrapper .wpsg_product_informationarea) { margin-top:1.5em; margin-bottom:1.5em; } +:where(.wpsg_productform label) { display:block; font-weight:bold; margin-bottom:0.5em; } +:where(.wpsg_productform .wpsg_mod_productvars) { display:flex; flex-direction:column; gap:0.75em; margin-top:0.75em; margin-bottom:0.75em; } +:where(.wpsg_productform .wpsg_mod_productvars_row) { display:flex; flex-direction:column; gap:0.3em; } +:where(.wpsg_productform .wpsg_produkt_wrapper .wpsg_mod_productvars_label) { font-weight:normal; font-size:0.9em; opacity:var(--wpsg-muted-opacity); } +:where(.wpsg_productform .wpsg_mod_productvars_input) { width:100%; } +:where(.wpsg_productform .wpsg_produkt_wrapper .wpsg_mod_productvars_check) { display:flex; align-items:center; gap:0.5em; font-weight:normal; cursor:pointer; } +:where(.wpsg_productform .wpsg_mod_productvars_check input[type="checkbox"]) { flex:0 0 auto; margin:0; } +:where(.wpsg_productform .wpsg_mod_productvars .wpsg_required) { margin-left:0.15em; } +:where(.wpsg_productform .wpsg_produkt_wrapper .wpsg_product_buttonarea) { margin-top:var(--wpsg-gap); } +:where(.wpsg_produkt_add_basket_wrapper) { display:flex; flex-wrap:wrap; align-items:stretch; justify-content:flex-start; gap:var(--wpsg-gap); } +:where(.wpsg_produkt_add_basket_wrapper > *) { margin:0; } +:where(.wpsg_produkt_add_basket_wrapper > label) { display:flex; align-items:center; margin:0; } +/* Aufbau mit Klassen-Spezifität: allgemeine Feldregeln der Themes (input { width:100% }) sollen die Zeile nicht sprengen */ +.wpsg_produkt_add_basket_wrapper .wpsg_menge { width:5em; flex:0 0 auto; text-align:center; } +:where(.wpsg_productform .wpsg_product_layer) { position:absolute; left:0; top:0; width:100%; height:100%; background-color:var(--wpsg-color-surface); padding:0.75em; margin:-0.75em; box-sizing:content-box; } +:where(.wpsg_productform .wpsg_product_layer img) { position:absolute; left:50%; margin-left:-8px; top:50%; margin-top:-5px; } +:where(.wpsg_product_deliverytime_holiday) { padding:10px; border-left:4px solid var(--wpsg-color-notice); background-color:var(--wpsg-color-surface); } + +/* Minigalerie */ +:where(.wpsg_productform #responsive_slider .carousel-indicators) { bottom:-45px; } +:where(.wpsg_productform #responsive_slider .carousel-indicators li) { margin-left:2.5px; margin-right:2.5px; } +:where(.wpsg_productform #responsive_slider .carousel-indicators li.active) { border-width:2px; } +:where(.wpsg_productform .sto_carousel) { position:relative; margin-bottom:45px; margin-top:46px; } +:where(.wpsg_productform .sto_carousel ul, .wpsg_productform .sto_carousel li) { list-style:none; } +:where(.wpsg_productform .sto_carousel li) { float:left; margin-right:10px; } +:where(.wpsg_productform .sto_carousel li .wpsg_image_producttemplate_small) { width:93px; } +:where(.wpsg_productform .jcarousel) { position:relative; height:95px; overflow:hidden; width:515px; max-width:100%; } +:where(.wpsg_productform .jcarousel ul) { width:20000em; position:relative; list-style:none; margin:0; padding:0; } +:where(.wpsg_productform .sto_carousel) :where(.left, .right) { position:absolute; top:0; height:95px; line-height:95px; width:20px; display:block; font-size:2rem; } +:where(.wpsg_productform .sto_carousel .left) { left:0; text-align:left; } +:where(.wpsg_productform .sto_carousel .right) { right:0; text-align:right; } +:where(.wpsg_produkt_wrapper2 .wpsg_gallery_wrap ul) { width:490px; max-width:100%; padding:0; margin:0; display:flex; flex-direction:row; flex-wrap:wrap; justify-content:space-between; } +:where(.wpsg_produkt_wrapper2 .wpsg_gallery_wrap ul li) { list-style:none; padding:0; margin:0 0 30px 0; width:100px; height:100px; } +:where(.wpsg_produkt_wrapper2 .wpsg_gallery_wrap ul li > div) { width:100%; height:100%; cursor:pointer; } +:where(.wpsg_produkt_wrapper2 .wpsg_gallery_wrap ul li > div > img) { width:100%; height:100%; object-fit:cover; object-position:center center; } +:where(.wpsg_produkt_wrapper2 .wpsg_produkt_produktbilder img) { width:230px; height:230px; object-fit:cover; object-position:50% 50%; max-width:none; float:left; } +:where(.wpsg_produkt_wrapper2 .wpsg_produkt_produktbilder) { width:260px; max-width:260px; } +:where(.wpsg_produkt_wrapper2 .wpsg_productimages) { margin-right:0; } +:where(.wpsg_produkt_wrapper2 .bigimg img) { margin:0 15px 15px 15px; width:100px; height:auto; float:left; } + +/* Varianten */ +:where(.wpsg_produkt_wrapper .wpsg_vp_field) { clear:both; margin-bottom:var(--wpsg-gap); } +:where(.wpsg_produkt_wrapper .wpsg_vp_field_image) { clear:both; display:block; } +:where(.wpsg_produkt_wrapper .wpsg_vp_field_typ_radio label) { clear:both; float:left; } +:where(.wpsg_mod_productvariants_imageselect .image) { padding:10px; display:inline-block; } +:where(.wpsg_mod_productvariants_imageselect .akt) { padding:5px; border:5px solid var(--wpsg-color-line); } +:where(.wpsg_mod_productvariants_imageselect a) { text-decoration:none; } + +/* Produktattribute */ +:where(.wpsg_cell_produktattribute_value) { text-align:right; } +:where(.wpsg_mod_produktattribute_label) { display:inline-block; min-width:120px; } +:where(.wpsg_mod_produktattribute_value) { display:inline-block; } + +/* Produktansichten */ +:where(.wpsg_productview, .wpsg_mod_productview_image) { position:relative; } +:where(.wpsg_productview_head) { margin:25px 0; line-height:25px; position:relative; } +:where(.wpsg_productview_head h2.wpsg_productview_title) { margin-top:0; font-size:1.25em; font-weight:bold; } +:where(.wpsg_productview_head .wpsg_mod_productview_modeswitch) { position:absolute; right:15px; top:0; font-size:1.25em; } +:where(.wpsg_productview_head .wpsg_mod_productview_modeswitch > a) { margin-left:5px; text-decoration:none; opacity:var(--wpsg-muted-opacity); } +:where(.wpsg_productview_head .wpsg_mod_productview_modeswitch > a.active, .wpsg_productview_head .wpsg_mod_productview_modeswitch > a:hover) { opacity:1; } +:where(.wpsg_mod_productview-info, .wpsg_mod_productview-order) { font-size:var(--wpsg-font-size-small); opacity:var(--wpsg-muted-opacity); } +:where(.wpsg_mod_productview-info strong, .wpsg_mod_productview-order strong) { font-weight:bold; } +:where(.wpsg_mod_productview-order strong) { float:right; } +:where(.wpsg_mod_productview-order) { position:relative; cursor:pointer; } +:where(.wpsg_mod_productview-order .glyphicon) { margin-left:10px; margin-right:5px; } +:where(.wpsg_mod_productview-order-layer) { position:absolute; width:100%; display:none; margin-top:5px; left:0; z-index:1; } +:where(.wpsg_mod_productview-order-layer > .inner) { margin:0 15px; border:1px solid var(--wpsg-color-line); background-color:var(--wpsg-color-background); color:var(--wpsg-color-foreground); } +:where(.wpsg_mod_productview-order-layer a) { display:block; line-height:25px; padding:5px 5px 5px 10px; text-decoration:none; } +:where(.wpsg_mod_productview-order-layer a.selected, .wpsg_mod_productview-order-layer a:hover) { background-color:var(--wpsg-color-surface); } +:where(.wpsg_mod_productview_image img) { max-width:100%; height:auto; border:1px solid var(--wpsg-color-line-soft); } +:where(.wpsg_productview_pager) { width:100%; border-top:1px solid var(--wpsg-color-line-soft); border-bottom:1px solid var(--wpsg-color-line-soft); margin:10px 0 25px 0; padding:25px 0; text-align:center; } +:where(.wpsg_productview_pager .wpsg_productview_pager_wrap) { display:inline-block; margin:auto; } +:where(.wpsg_productview_pager .wpsg_productview_pager_wrap > span, .wpsg_productview_pager .wpsg_productview_pager_wrap > a) { display:inline-block; width:30px; height:30px; line-height:30px; border:1px solid var(--wpsg-color-line); margin:0 15px; } +:where(.wpsg_productview_product) { padding-top:15px; padding-bottom:40px; position:relative; margin-bottom:25px; } +:where(.wpsg_productview_product .wpsg_mod_productview_bottom) { display:block; width:100%; text-align:center; } +:where(.wpsg_productview_product .wpsg_mod_productview_bottom .wpsg_mod_productview_name h2) { font-size:1em; font-weight:bold; margin-bottom:5px; } +:where(.wpsg_productview_product .wpsg_mod_productview_bottom .wpsg_mod_productview_description) { line-height:1.4; font-size:var(--wpsg-font-size-small); margin-bottom:5px; opacity:var(--wpsg-muted-opacity); } +:where(.wpsg_productview_product .wpsg_mod_productview_bottom .wpsg_mod_productview_button) { left:50%; margin-left:-90px; width:180px; position:absolute; bottom:0; white-space:nowrap; padding:5px 25px; border:1px solid var(--wpsg-color-line); font-weight:bold; text-transform:uppercase; } +:where(.wpsg_productview_product .wpsg_mod_productview_bottom .wpsg_mod_productview_button:hover) { text-decoration:none; background-color:var(--wpsg-color-surface); } +:where(.wpsg_productview_product .wpsg_mod_productview_bottom .wpsg_mod_productview_button .fa) { margin-left:10px; } +:where(.wpsg_productview_product .wpsg_mod_productview_go) { display:none; position:absolute; left:0; top:0; width:100%; height:100%; background-color:var(--wpsg-color-background); color:var(--wpsg-color-foreground); opacity:0.9; text-align:center; } +:where(.wpsg_productview_product .wpsg_mod_productview_go .wpsg_mod_productview_price_wrap) { width:100%; position:absolute; left:0; top:30%; font-size:1.25em; line-height:125%; font-weight:bold; } +:where(.wpsg_productview_product .wpsg_mod_productview_go .wpsg_mod_productview_price_wrap .wpsg_mod_productview_oldprice) { text-decoration:line-through; } +:where(.wpsg_productview_product .wpsg_mod_productview_go .wpsg_mod_productview_price_wrap .wpsg_mod_productview_current) { color:var(--wpsg-color-error); } +:where(.wpsg_productview_product .wpsg_mod_productview_go .wpsg_mod_productview_tax_wrap) { width:100%; position:absolute; left:0; top:60%; font-size:var(--wpsg-font-size-small); line-height:125%; } +:where(.wpsg_productview_product:hover) { text-decoration:none; } +:where(.wpsg_productview_product:hover .wpsg_mod_productview_go) { display:block; } +:where(.wpsg_productview_product_grid .wpsg_star_wrap) { position:absolute; width:80%; left:10%; top:10%; } +:where(.wpsg_productview_product_grid .wpsg_mod_productview_name h2) { margin-top:0; } +:where(.wpsg_mod_productview_loading) { width:100%; height:100%; background-color:var(--wpsg-color-background); opacity:0.75; position:absolute; left:0; top:0; } +:where(.wpsg_mod_productview_filter #wpsg_mod_productview_filter_price-range) { position:relative; margin-right:16px; } +:where(.wpsg_mod_productview_filter #wpsg_mod_productview_filter_price-range .ui-slider-handle) { cursor:pointer; width:16px; height:16px; background-color:currentColor; position:absolute; } +:where(.wpsg_mod_productview_filter #wpsg_mod_productview_filter_price-range .ui-slider-bg) { margin-left:16px; background-color:var(--wpsg-color-line); width:100%; height:2px; position:absolute; top:8px; } + +/* Produktübersichten (im Modus „Klassisch“ in productindex.css) */ +:where(.wpsg_mod_productindex .wpsg_mod_productindex_toolbar) { display:flow-root; padding:0.5em 0.75em; border:1px solid var(--wpsg-color-line-soft); background-color:var(--wpsg-color-surface); } +:where(.wpsg_mod_productindex .wpsg_mod_productindex_toolbar_top) { border-radius:var(--wpsg-radius) var(--wpsg-radius) 0 0; } +:where(.wpsg_mod_productindex .wpsg_mod_productindex_toolbar_bottom) { border-radius:0 0 var(--wpsg-radius) var(--wpsg-radius); } +:where(.wpsg_mod_productindex .wpsg_mod_productindex_toolbar ul) { list-style:none; padding:0; margin:0; float:left; clear:none; } +:where(.wpsg_mod_productindex .wpsg_mod_productindex_toolbar .wpsg_mod_productindex_pager ul li, .wpsg_mod_productindex .wpsg_mod_productindex_toolbar .wpsg_mod_productindex_pager span) { float:left; display:block; margin-left:5px; } +:where(.wpsg_mod_productindex .wpsg_mod_productindex_order) { float:left; } +:where(.wpsg_mod_productindex .wpsg_mod_productindex_order select) { margin-bottom:3px; } +:where(.wpsg_mod_productindex .wpsg_mod_productindex_viewselect) { float:right; margin-top:5px; } +:where(.wpsg_mod_productindex .wpsg_mod_productindex_pager) { float:right; margin-left:5px; } +:where(.wpsg_mod_productindex_list .wpsg_mod_productindex_product, .wpsg_mod_productindex_list .wpsg_mod_productindex_empty) { display:flow-root; padding:15px; border:1px solid var(--wpsg-color-line-soft); border-bottom:0; } +:where(.wpsg_mod_productindex_list .wpsg_mod_productindex_product .wpsg_mod_productindex_pic) { float:left; margin-right:15px; } +:where(.wpsg_mod_productindex_list .wpsg_mod_productindex_product .wpsg_mod_productindex_content) { margin-left:115px; } +:where(.wpsg_mod_productindex_list .wpsg_mod_productindex_product .wpsg_mod_productindex_content .wpsg_mod_productindex_button) { float:right; } +:where(.wpsg_mod_productindex_list .wpsg_mod_productindex_product .wpsg_mod_productindex_content .wpsg_mod_productindex_infos) { float:right; line-height:1.5em; text-align:right; } +:where(.wpsg_mod_productindex_list .wpsg_mod_productindex_product .wpsg_mod_productindex_content .wpsg_mod_productindex_infos div) { clear:right; } +:where(.wpsg_mod_productindex_list, .wpsg_mod_productindex_grid) :where(.wpsg_mod_productindex_title) { font-weight:bold; margin-bottom:5px; line-height:1.5em; } +:where(.wpsg_mod_productindex_list .wpsg_mod_productindex_title) { font-size:1.2em; } +:where(.wpsg_mod_productindex_list, .wpsg_mod_productindex_grid) :where(.wpsg_mod_productindex_price) { font-size:1.4em; font-weight:normal; } +:where(.wpsg_mod_productindex_list, .wpsg_mod_productindex_grid) :where(.wpsg_produkt_preishinweis) { font-size:0.8em; font-weight:normal; font-style:italic; } +:where(.wpsg_mod_productindex_list, .wpsg_mod_productindex_grid) :where(.wpsg_produkt_soldout) { color:var(--wpsg-color-error); } +:where(.wpsg_mod_productindex_kuhint) { line-height:125%; margin-top:20px; font-style:italic; } +:where(.wpsg_mod_productindex_grid .wpsg_mod_productindex_productrow) { display:flex; flex-wrap:wrap; border:1px solid var(--wpsg-color-line-soft); border-bottom:0; } +:where(.wpsg_mod_productindex_grid .wpsg_mod_productindex_productrow > .wpsg_clear) { display:none; } +:where(.wpsg_mod_productindex_grid .wpsg_mod_productindex_product) { flex:0 0 calc(100% / var(--wpsg-columns, 4)); min-width:0; padding-bottom:50px; font-size:0.8em; } +:where(.wpsg_mod_productindex) :where(img) { max-width:100%; height:auto; } +:where(.wpsg_mod_productindex_grid .wpsg_mod_productindex_product .wpsg_mod_productindex_product_inner) { margin:15px; } +:where(.wpsg_mod_productindex_grid .wpsg_mod_productindex_product .wpsg_mod_productindex_pic) { text-align:center; } +:where(.wpsg_mod_productindex_grid .wpsg_mod_productindex_product .wpsg_mod_productindex_pic img) { max-width:100%; height:auto; } +:where(.wpsg_mod_productindex_grid .wpsg_mod_productindex_product .wpsg_mod_productindex_content .wpsg_mod_productindex_infos) { font-size:0.8em; } +:where(.wpsg_mod_productindex_grid .wpsg_mod_productindex_title) { font-size:1em; min-height:3em; } +:where(.wpsg_mod_productindex_grid .wpsg_mod_productindex_product .wpsg_mod_productindex_content .wpsg_mod_productindex_button) { width:100%; margin-top:15px; } +:where(.wpsg_mod_productindex_grid .wpsg_mod_productindex_product .wpsg_mod_productindex_content .wpsg_mod_productindex_button a) { display:block; width:100%; text-align:center; } +:where(.wpsg_mod_productindex .wpsg_mod_fuellmenge_info) { font-size:0.75em; } + +/* Produktübersicht, Preise */ +:where(.wpsg_mod_productview_oldprice) { font-size:0.9em; color:var(--wpsg-color-error); text-decoration:line-through; } +:where(.wpsg_mod_productview_newprice) { font-size:1em; font-weight:bold; } + +/* Einblendungen: Kundenfrage (Firmen-/Endkunde, Land) */ +:where(#wpsg_calc_layer) { overflow:auto; text-align:center; position:fixed; left:0; top:0; z-index:1000; width:100%; height:100%; background-color:var(--wpsg-color-overlay); } +:where(#wpsg_calc_layer .content) { position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); width:min(700px, calc(100% - 2rem)); min-height:210px; padding:clamp(1rem, 5vw, 50px); text-align:left; color:var(--wpsg-color-foreground); border-radius:var(--wpsg-radius); background-color:var(--wpsg-color-background); } +:where(#wpsg_calc_layer .content img.loading) { position:absolute; left:50%; top:50%; margin-left:-8px; margin-top:-5px; } +:where(#wpsg_calc_layer h2) { font-size:1.375rem; line-height:1.3; margin-bottom:25px; } +:where(#wpsg_calc_layer .customertype h2, #wpsg_calc_layer .country h2) { font-weight:normal; width:150px; float:left; } +:where(#wpsg_calc_layer #customerquestion_fk, #wpsg_calc_layer #customerquestion_ek) { margin-top:10px; width:200px; float:left; line-height:28px; } +:where(#wpsg_calc_layer #customerquestion_fk label, #wpsg_calc_layer #customerquestion_ek label) { font-size:1.375rem; font-weight:normal; line-height:28px; } +:where(#wpsg_calc_layer #customerquestion_ok_button) { width:100%; } +:where(#wpsg_calc_layer .country) { clear:both; margin-top:20px; } +:where(#wpsg_calc_layer .country select) { width:350px; max-width:100%; font-size:1.375rem; float:left; margin-top:10px; } +:where(#wpsg_calc_layer input[type="radio"]) { height:auto; margin-right:10px; } +:where(#wpsg_calc_layer .button_wrap) { width:100%; clear:both; padding-top:20px; } +:where(#wpsg_calc_layer input[type="submit"]) { float:right; padding-left:50px; padding-right:50px; } + +/* Einblendung für Meldungen außerhalb der Shopseiten, Warenkorbmeldung */ +:where(#wpsg_ajax_layer) { position:fixed; z-index:1000; left:0; top:0; width:100%; height:100%; background-color:var(--wpsg-color-overlay); display:flex; justify-content:center; align-items:center; padding:1rem; } +:where(#wpsg_ajax_layer .wpsg_ajax_message_content) { max-width:100%; padding:1.5rem; text-align:center; color:var(--wpsg-color-foreground); border-radius:var(--wpsg-radius); background-color:var(--wpsg-color-background); } +:where(#wpsg_ajax_layer .wpsg_ajax_message_content li) { list-style:none; } +:where(#TB_caption) { height:50px; } +:where(#TB_secondLine) { font-size:14px; } + +/* Bankeinzug */ +:where(.wpsg_mod_autodebit .wpsg_mod_autodebit_field) { clear:both; } +:where(.wpsg_mod_autodebit label) { width:100%; line-height:36px; } +:where(.wpsg_mod_autodebit input) { float:right; margin-bottom:3px; } + +/* Bestellbedingungen */ +:where(.wpsg_mod_ordercondition_hint) { padding-left:18px; max-height:60px; overflow-y:scroll; } + +/* Anfrageprodukte */ +:where(.wpsg_mod_request_requestpage .wpsg_cell_action) { width:30px; text-align:center; } +:where(.wpsg_mod_request_requestpage .wpsg_cell_amount) { width:125px; } +:where(.wpsg_mod_request_requestpage .wpsg_cell_sumprice) { text-align:right; width:200px; } +:where(.wpsg_mod_request_requestpage .wpsg_cell_total_brutto, .wpsg_mod_request_requestpage .wpsg_cell_total_netto) { text-align:right; } +:where(.wpsg_mod_request_requestpage .wpsg_checkout_typ_3 input) { margin-right:5px; width:auto; } +:where(.wpsg_mod_request_requestpage) :where(input[type="text"], select) { width:100%; margin-top:5px; margin-bottom:5px; } +:where(.wpsg_mod_request_requestpage h2) { margin-top:2rem; margin-bottom:var(--wpsg-gap); } +:where(.requestlist_ajax_wrap) { padding-bottom:2rem; } + +/* CrowdFunding */ +:where(.wpsg_mod_funding_progress .wpsg_mod_funding_state) { border:1px solid var(--wpsg-color-line); margin-bottom:var(--wpsg-gap); width:100%; height:25px; line-height:25px; } +:where(.wpsg_mod_funding_progress .wpsg_mod_funding_state > .bar) { width:90%; float:left; height:100%; display:table; } +:where(.wpsg_mod_funding_progress .wpsg_mod_funding_state > .bar > .value) { background-color:var(--wpsg-color-accent); height:100%; width:0%; } +:where(.wpsg_mod_funding_progress .wpsg_mod_funding_state > .value) { width:10%; height:100%; border-left:1px solid var(--wpsg-color-line); float:right; text-align:center; } + +/* Zahlungsarten */ +:where(.wpsg_mod_wirecard_paymentType) { width:50%; float:right; } +:where(#wpsg_mod_wirecard_iframe) { width:100%; height:700px; } +:where(#wpsg_mod_crefopay_iframe) { width:100%; border:0; overflow-y:hidden; } +:where(.wrap_paypalapi_expressbutton) { width:100%; padding-bottom:2rem; } +:where(.wrap_paypalapi_expressbutton img) { float:right; } +:where(.wpsg_mod_paypalapi_button) { display:inline; float:right; background:transparent; border:0; padding:0; cursor:pointer; } +:where(.wpsg_mod_paypalapi_orderdone .wpsg_mod_paypalapi_field) { clear:both; } +:where(.wpsg_mod_paypalapi_orderdone label) { width:100%; line-height:36px; } +:where(.wpsg_mod_paypalapi_orderdone) :where(input[type="text"], select) { width:65%; float:right; margin-bottom:3px; } +:where(.wpsg_mod_paypalapi_orderdone) :where(input.wpsg_mod_paypalapi_vname) { width:30%; margin-right:5%; } +:where(.wpsg_mod_paypalapi_orderdone) :where(input.wpsg_mod_paypalapi_name, select.wpsg_mod_paypalapi_month, select.wpsg_mod_paypalapi_year) { width:30%; } +:where(.wpsg_mod_paypalapi_orderdone) :where(input[type="image"], input[type="submit"]) { float:right; } +:where(.wpsg_mod_paypalapi_orderdone .wpsg_mod_paypalapi_spacer) { width:5%; float:right; text-align:center; } +:where(#wpsg_ppplus) { width:100%; } +:where(#AmazonPayButton_wrap, #AmazonLoginButton_wrap) { text-align:right; margin-bottom:2rem; width:100%; justify-content:flex-end; display:flex; } +:where(#AmazonPayButton_wrap #AmazonPayButton) { width:210px; } + +/* Kreditkarte (micropayment): stellt eine Karte dar, die Farben bleiben fest */ +:where(.micropayment_card .card) { border-radius:5px; background-color:#999999; margin-bottom:var(--wpsg-gap); height:200px; width:400px; max-width:100%; position:relative; } +:where(.micropayment_card .front .number input) { width:370px; max-width:calc(100% - 30px); position:absolute; bottom:50px; left:15px; } +:where(.micropayment_card .front) :where(.name, .validthrough) { position:absolute; bottom:20px; color:#ffffff; text-shadow:1px 1px 0 #202020, -1px -1px 0 #606060; letter-spacing:2px; } +:where(.micropayment_card .front .name) { left:25px; } +:where(.micropayment_card .front .validthrough) { right:135px; } +:where(.micropayment_card .front .valid) { position:absolute; right:15px; bottom:20px; } +:where(.micropayment_card .front .chip) { left:25px; top:50px; position:absolute; width:50px; height:44px; background-image:url('../mods/mod_micropayment/gfx/chip.png'); background-repeat:no-repeat; } +:where(.micropayment_card .card .bankname) { position:absolute; left:15px; top:10px; } +:where(.micropayment_card .back .blackmagnetic) { width:100%; height:40px; background-color:#000000; position:absolute; left:0; top:55px; } +:where(.micropayment_card .back .number) { position:absolute; text-align:right; right:5px; top:5px; } +:where(.micropayment_card .back .signature) { position:absolute; left:15px; top:130px; width:250px; height:30px; background-color:#ffffff; text-align:center; line-height:30px; color:#333333; } +:where(.micropayment_card .back .sign input) { position:absolute; left:300px; width:75px; text-align:center; line-height:25px; top:135px; border:0; border-radius:0; height:25px; padding:0; } + +/* Vorkasse: QR-Codes auf der Abschlussseite */ +:where(.wpsg_mod_prepayment_info_wrap) { display:flex; justify-content:center; flex-direction:column; gap:20px; } +:where(.wpsg_mod_prepayment_info, .wpsg_mod_prepayment_girocode, .wpsg_mod_prepayment_qrrechnung) { display:flex; flex-wrap:wrap; gap:20px; border:1px solid var(--wpsg-color-line); padding:20px; } +:where(.wpsg_mod_prepayment_info, .wpsg_mod_prepayment_girocode, .wpsg_mod_prepayment_qrrechnung) :where(h4) { margin:0; } +:where(.wpsg_mod_prepayment_info_left, .wpsg_mod_prepayment_girocode_left, .wpsg_mod_prepayment_qrrechnung_left) { display:flex; flex-direction:column; } +:where(.wpsg_mod_prepayment_info_left_qrcodeimg, .wpsg_mod_prepayment_girocode_left_qrcodeimg, .wpsg_mod_prepayment_qrrechnung_left_qrcodeimg) { width:240px; height:240px; max-width:100%; background-color:#ffffff; } +:where(.wpsg_mod_prepayment_info_left_wrap, .wpsg_mod_prepayment_girocode_left_wrap, .wpsg_mod_prepayment_qrrechnung_left_wrap) { display:flex; gap:25%; } +:where(.wpsg_mod_prepayment_info_left_currency, .wpsg_mod_prepayment_girocode_left_currency, .wpsg_mod_prepayment_qrrechnung_left_currency) { display:flex; flex-direction:column; } +:where(.wpsg_mod_prepayment_info_left_amount, .wpsg_mod_prepayment_girocode_left_amount, .wpsg_mod_prepayment_qrrechnung_left_amount) { display:flex; flex-direction:column; } + +/* + * GARANTIE-Siegel: Das Siegel hat ein festes Aussehen und bleibt deshalb wie in frontend.css, mit + * eigener Schrift, festen Farben und erhöhter Spezifität gegen Theme-Regeln. + */ +.wpsg_product_garan_wrap { all:revert; padding:5px 0; margin-bottom:2rem; font-family:'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; + * { all:revert; } + .wpsg_product_garan { border:1px solid black; display:inline-block; padding:5px 50px 5px 5px; position:relative; height:30px; white-space:nowrap; cursor:pointer; text-decoration:none; color:black; + & > .years { font-size:30px; height:30px; line-height:30px; font-weight:bold; padding-right:35px; position:relative; border-right:1px solid black; + &:after { position:absolute; right:10px; bottom:8px; content:' '; width:16px; height:16px; background-image:url('../gfx/garan/garan_year.svg'); background-size:contain; background-repeat:no-repeat; } + } + & > .title { padding-left:5px; font-size:22px; font-weight:bold; padding-right:20px; position:relative; + &:after { position:absolute; right:0; bottom:2px; content:' '; width:16px; height:16px; background-image:url('../gfx/garan/garan_checkmark.svg'); background-size:contain; background-repeat:no-repeat; } + } + &:after { position:absolute; right:5px; top:0; content:' '; width:28px; height:40px; background-image:url('../gfx/garan/garan_eu.svg'); background-size:contain; background-repeat:no-repeat; } + & > .tooltip { position:absolute; opacity:0; pointer-events:none; top:40px; left:-1px; padding:5px 5px 5px 0; transition:all 0.5s; + & > .inner { width:300px; min-height:300px; display:flex; flex-direction:column; gap:5px; background-color:white; padding:5px; border:1px solid black; + & > .border { border:1px solid black; display:flex; flex-direction:column; padding:5px; + .top { width:100%; border-bottom:2px solid black; padding-bottom:5px; position:relative; + & > .title { font-size:50px; font-weight:bold; padding-right:40px; position:relative; display:inline-block; line-height:50px; letter-spacing:1px; + &:after { position:absolute; right:0; bottom:5px; content:' '; width:32px; height:32px; background-image:url('../gfx/garan/garan_checkmark.svg'); background-size:contain; background-position:right bottom; background-repeat:no-repeat; } + } + &:after { position:absolute; right:0; top:-11px; content:' '; width:36px; height:51px; background-image:url('../gfx/garan/garan_eu.svg'); background-size:contain; background-repeat:no-repeat; } + } + & > .flexline { display:flex; justify-content:space-between; gap:5px; align-items:flex-start; padding:5px 0; font-size:16px; } + & > .line { display:flex; justify-content:space-between; gap:5px; align-items:flex-end; padding:5px 0; + & > .years { font-size:85px; height:85px; line-height:85px; font-weight:bold; padding-right:60px; position:relative; + &:after { position:absolute; right:10px; bottom:8px; content:' '; width:35px; height:35px; background-image:url('../gfx/garan/garan_year.svg'); background-size:contain; background-repeat:no-repeat; } + } + & > img { transform:translateY(-8px); } + } + & > .trans_wrap { display:block; white-space:normal; text-align:justify; hyphens:auto; font-size:8px; line-height:1.4; + & > span + span:before { content:'|'; padding-right:1px; } + strong { font-weight:bold; } + } + } + } + } + &:hover > .tooltip { opacity:1; pointer-events:all; z-index:1; } + } +} +html body .wpsg_product_garan_wrap, +html body .wpsg_product_garan_wrap *, +html body .wpsg_product_garan_wrap *::before, +html body .wpsg_product_garan_wrap *::after { box-sizing:content-box; } +html body .wpsg_product_garan_wrap { line-height:1; } +html body .wpsg_product_garan_wrap a.wpsg_product_garan, +html body .wpsg_product_garan_wrap a.wpsg_product_garan:hover, +html body .wpsg_product_garan_wrap a.wpsg_product_garan:focus, +html body .wpsg_product_garan_wrap a.wpsg_product_garan:visited { color:#000000; background-color:#ffffff; text-decoration:none; line-height:30px; box-shadow:none; } +html body .wpsg_product_garan_wrap a.wpsg_product_garan * { color:inherit; text-decoration:none; letter-spacing:normal; text-transform:none; } +html body .wpsg_product_garan_wrap a.wpsg_product_garan > .years, +html body .wpsg_product_garan_wrap a.wpsg_product_garan > .title { display:inline-block; height:30px; line-height:30px; vertical-align:top; } +html body .wpsg_product_garan_wrap a.wpsg_product_garan .tooltip, +html body .wpsg_product_garan_wrap a.wpsg_product_garan .tooltip .inner, +html body .wpsg_product_garan_wrap a.wpsg_product_garan .tooltip .flexline { line-height:1.2; } +html body .wpsg_product_garan_wrap a.wpsg_product_garan .tooltip .trans_wrap { line-height:1.4; } +html body .wpsg_product_garan_wrap a.wpsg_product_garan img { display:block; max-width:none; height:auto; margin:0; border:0; box-shadow:none; } + +/* GARANTIE-Siegel in der Bestellübersicht */ +:where(.wpsg_overview .garan_label_wrap) { padding:var(--wpsg-gap) 0; } +:where(.wpsg_overview .garan_label_popup) { position:fixed; inset:0; z-index:100000; display:flex; align-items:center; justify-content:center; padding:1rem; background-color:var(--wpsg-color-overlay); } +:where(.wpsg_overview .garan_label_popup .garan_label_popup_inner) { display:flex; flex-direction:column; max-width:600px; max-height:100%; text-align:center; padding:1rem; color:var(--wpsg-color-foreground); background-color:var(--wpsg-color-background); } +:where(.wpsg_overview .garan_label_popup .garan_label_popup_image) { min-height:0; overflow-y:auto; } +:where(.wpsg_overview .garan_label_popup .garan_label_popup_image img) { max-width:100%; height:auto; } +:where(.wpsg_overview .garan_label_popup .garan_label_popup_confirm) { flex:0 0 auto; margin-top:1rem; cursor:pointer; } + +/* Schmale Breiten */ +@media (max-width:600px) { + + :where(.wpsg_mod_productindex_grid .wpsg_mod_productindex_product) { flex-basis:50%; } + :where(.wpsg_mod_productindex_list .wpsg_mod_productindex_product .wpsg_mod_productindex_content) { margin-left:0; clear:both; } + :where(.wpsg_mod_productindex .wpsg_mod_productindex_order, .wpsg_mod_productindex .wpsg_mod_productindex_pager, .wpsg_mod_productindex .wpsg_mod_productindex_viewselect) { float:none; margin:0.25em 0; } + + :where(.wpsg_productform .wpsg_productimages) { width:100%; float:none; margin-right:0; } + :where(.wpsg_productform .wpsg_produkt_produktbilder) { max-width:100%; } + :where(.wpsg_overview .shippayment, .wpsg_overview .anschrift) { float:none; width:100%; } + :where(.basket_product_wrap .basket_product_row .productimage, .wpsg_overview .wpsg_table_wrap .overview_product_row .productimage) { max-width:80px; } + :where(#wpsg_calc_layer .customertype h2, #wpsg_calc_layer .country h2, #wpsg_calc_layer #customerquestion_fk, #wpsg_calc_layer #customerquestion_ek, #wpsg_calc_layer .country select) { float:none; width:100%; } + +} + +@media (max-width:400px) { + + /* Produkt */ + :where(.wpsg_productform .wpsg_produkt_shortdescription) { display:none; } + :where(.wpsg_productform .wpsg_mod_produktindex_stock) { margin:10px 0; } + :where(.wpsg_produkt_add_basket_wrapper .wpsg_add_basket) { flex:1 1 auto; } + + /* Warenkorb, Kasse, Übersicht */ + :where(.wpsg_progress) { display:none; } + :where(.wpsg_basket, .wpsg_overview) :where(.product_name .product_shortdesc) { display:none; } + :where(.wpsg_basket .basket_product_row .product_info, .wpsg_overview .overview_product_row .product_info) { display:none; } + :where(.wpsg_basket, .wpsg_checkout, .wpsg_checkout2) :where(.wpsg_button) { width:100%; margin:0 0 10px 0; } + :where(.wpsg_overview) :where(.wpsg_checkoutbutton, .wpsg_orderbutton) { width:100%; margin:0 0 10px 0; } + +} |
