/* ========================================================================== Libelle Dark – Plugin-Oberflächen im Dunkel-Design WooCommerce (Warenkorb, Kasse, Mein Konto, Produkte, Danke-Seite, Stripe), Kadence Form, IvyForms, Amelia, Strong Testimonials, GS Logo Slider, Cookie-Banner (Cookie Law Info / CookieYes legacy), Popup Maker, GTranslate. Design-Tokens (--bg, --ink, --pink, --line, --radius …) kommen aus style.css. Hinweis: Viele Plugins setzen Inline-Styles bzw. eigene !important-Regeln, daher arbeiten wir hier gezielt mit höherer Spezifität (body.libelle-dark …). ========================================================================== */ /* -------------------------------------------------------------------------- 0. Gemeinsame Bausteine -------------------------------------------------------------------------- */ .libelle-dark .woocommerce, .libelle-dark .woocommerce-page { --lb-card: linear-gradient(160deg, rgba(27, 16, 56, 0.9), rgba(18, 10, 38, 0.9)); } /* Hinweis-/Fehler-/Erfolgsboxen */ body.libelle-dark .woocommerce-message, body.libelle-dark .woocommerce-error, body.libelle-dark .woocommerce-info, body.libelle-dark .woocommerce-notice, body.libelle-dark .woocommerce-NoticeGroup .woocommerce-error, body.libelle-dark .wc-block-components-notice-banner { background: linear-gradient(160deg, rgba(27, 16, 56, 0.9), rgba(18, 10, 38, 0.9)) !important; color: var(--ink) !important; border: 1px solid var(--line) !important; border-left: 4px solid var(--neon-2) !important; border-radius: var(--radius) !important; padding: 1rem 1.2rem !important; margin-bottom: 1.5rem !important; box-shadow: none !important; font-size: 1rem; line-height: 1.5; } body.libelle-dark .woocommerce-message, body.libelle-dark .woocommerce-notice--success { border-left-color: var(--ok) !important; } body.libelle-dark .woocommerce-error { border-left-color: var(--orange) !important; } body.libelle-dark .woocommerce-info { border-left-color: var(--neon-2) !important; } body.libelle-dark .woocommerce-message::before, body.libelle-dark .woocommerce-error::before, body.libelle-dark .woocommerce-info::before { color: inherit; } body.libelle-dark .woocommerce-message a, body.libelle-dark .woocommerce-error a, body.libelle-dark .woocommerce-info a { color: var(--neon-2); text-decoration: underline; text-underline-offset: 3px; } body.libelle-dark .woocommerce-message a:hover, body.libelle-dark .woocommerce-error a:hover, body.libelle-dark .woocommerce-info a:hover { color: var(--ink); } body.libelle-dark .woocommerce-message .button, body.libelle-dark .woocommerce-error .button, body.libelle-dark .woocommerce-info .button { float: none; margin: 0 0.8rem 0 0; order: -1; padding: 0.45rem 1rem; font-size: 0.9rem; } body.libelle-dark ul.woocommerce-error { list-style: none; padding-left: 1.2rem !important; } body.libelle-dark ul.woocommerce-error li { margin: 0.2rem 0; } /* Formularzeilen (WooCommerce) */ body.libelle-dark.woocommerce-page form .form-row label { color: var(--ink-2); font-weight: 500; font-size: 0.95rem; margin-bottom: 0.3rem; } body.libelle-dark.woocommerce-page form .form-row .required { color: var(--pink); text-decoration: none; } body.libelle-dark.woocommerce-page form .form-row .optional { color: var(--ink-3); font-weight: 400; } body.libelle-dark.woocommerce-page form .form-row input.input-text, body.libelle-dark.woocommerce-page form .form-row textarea, body.libelle-dark.woocommerce-page form .form-row select, body.libelle-dark.woocommerce-page form .form-row .select2-container .select2-selection--single { background: var(--bg-2) !important; color: var(--ink) !important; border: 1px solid var(--line) !important; border-radius: 10px !important; padding: 0.7rem 0.9rem; min-height: 48px; line-height: 1.4; box-shadow: none !important; } body.libelle-dark.woocommerce-page form .form-row.woocommerce-invalid input.input-text, body.libelle-dark.woocommerce-page form .form-row.woocommerce-invalid select { border-color: var(--orange) !important; } body.libelle-dark.woocommerce-page form .form-row.woocommerce-validated input.input-text { border-color: rgba(126, 226, 184, 0.6) !important; } body.libelle-dark.woocommerce-page form .form-row .input-checkbox, body.libelle-dark.woocommerce-page form .form-row input[type="checkbox"] { width: 18px; height: 18px; margin: 0 0.5rem 0 0; accent-color: var(--pink); vertical-align: -3px; } body.libelle-dark.woocommerce-page form .show-password-input { color: var(--ink-3); background: transparent; border: 0; } body.libelle-dark.woocommerce-page form .show-password-input::after { color: var(--ink-3); } body.libelle-dark.woocommerce-page form .password-input { position: relative; } /* Select2 (Land/Region) */ body.libelle-dark .select2-container--default .select2-selection--single .select2-selection__rendered { color: var(--ink) !important; line-height: 46px; padding-left: 0; } body.libelle-dark .select2-container--default .select2-selection--single .select2-selection__arrow { height: 46px; } body.libelle-dark .select2-container--default .select2-selection--single .select2-selection__arrow b { border-top-color: var(--ink-2); } body.libelle-dark .select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b { border-bottom-color: var(--ink-2); } body.libelle-dark .select2-container--default .select2-search--dropdown .select2-search__field { background: var(--bg) !important; color: var(--ink) !important; border: 1px solid var(--line) !important; border-radius: 8px !important; } body.libelle-dark .select2-dropdown { background: var(--bg-2); color: var(--ink); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5); overflow: hidden; } body.libelle-dark .select2-container--default .select2-results__option { color: var(--ink-2); padding: 0.5rem 0.9rem; } body.libelle-dark .select2-container--default .select2-results__option--highlighted[aria-selected], body.libelle-dark .select2-container--default .select2-results__option--highlighted[data-selected] { background: rgba(138, 92, 255, 0.25); color: var(--ink); } body.libelle-dark .select2-container--default .select2-results__option[aria-selected="true"], body.libelle-dark .select2-container--default .select2-results__option[data-selected="true"] { background: rgba(255, 61, 154, 0.2); color: var(--ink); } /* Buttons: style.css gibt `button:not(…)` (Spezifität 0,4,1) einen Glas-Look – für WooCommerce-Primärbuttons (button-Elemente mit .alt) hier mit höherer Spezifität wieder Pink erzwingen */ body.libelle-dark.woocommerce-page button.button.alt.single_add_to_cart_button, body.libelle-dark.woocommerce div.product button.single_add_to_cart_button.button.alt, body.libelle-dark.woocommerce-page button.button.alt, html body.libelle-dark #place_order, html body.libelle-dark button#place_order, body.libelle-dark .woocommerce-form-login button.woocommerce-form-login__submit.button, body.libelle-dark .woocommerce-form-register button.woocommerce-form-register__submit.button, body.libelle-dark .woocommerce-ResetPassword button.woocommerce-Button.button, body.libelle-dark .woocommerce-EditAccountForm button.woocommerce-Button.button, body.libelle-dark .woocommerce-address-fields button.button, body.libelle-dark .woocommerce-checkout form.checkout_coupon button.button, body.libelle-dark .woocommerce-checkout form.woocommerce-form-login button.button { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; height: auto !important; line-height: 1.2 !important; padding: 0.8rem 1.6rem !important; border-radius: 999px !important; border: 1px solid var(--pink) !important; font-family: var(--font-body); font-weight: 700; font-size: 1rem; letter-spacing: 0.01em; background: var(--pink) !important; color: #fff !important; box-shadow: 0 0 24px rgba(255, 61, 154, 0.45) !important; cursor: pointer; transition: transform 0.15s ease, background 0.15s ease, box-shadow 0.15s ease; } body.libelle-dark.woocommerce-page button.button.alt:hover, html body.libelle-dark #place_order:hover, body.libelle-dark.woocommerce div.product button.single_add_to_cart_button.button.alt:hover, body.libelle-dark .woocommerce-form-login button.woocommerce-form-login__submit.button:hover, body.libelle-dark .woocommerce-address-fields button.button:hover, body.libelle-dark .woocommerce-checkout form.checkout_coupon button.button:hover, body.libelle-dark .woocommerce-checkout form.woocommerce-form-login button.button:hover { background: #ff5cab !important; border-color: #ff5cab !important; transform: translateY(-1px); box-shadow: 0 0 32px rgba(255, 61, 154, 0.6) !important; } body.libelle-dark.woocommerce-page button.button:disabled, body.libelle-dark.woocommerce-page button.button.disabled, body.libelle-dark.woocommerce-page button.button[disabled] { opacity: 0.45 !important; cursor: not-allowed; transform: none; box-shadow: none !important; padding: 0.75rem 1.4rem; } /* Sekundäre WooCommerce-Buttons (Gutschein, Warenkorb aktualisieren, Konto-Links) */ body.libelle-dark.woocommerce-page button.button:not(.alt), body.libelle-dark.woocommerce-page a.button:not(.alt):not(.checkout-button), body.libelle-dark.woocommerce-page .button.wc-backward { height: auto; line-height: 1.2; padding: 0.7rem 1.3rem; border-radius: 999px; font-size: 0.95rem; } /* Platzhalter-Produktbild (schwarzes Libelle-Logo auf Weiß/Transparent) → invertiert aufs Dunkle */ body.libelle-dark img.woocommerce-placeholder, body.libelle-dark .woocommerce-product-gallery__image--placeholder img { filter: invert(1) hue-rotate(180deg); opacity: 0.85; background: transparent; } /* Preise */ body.libelle-dark.woocommerce-page .price, body.libelle-dark.woocommerce-page .amount, body.libelle-dark .woocommerce-Price-amount { color: var(--ink); } body.libelle-dark.woocommerce-page .price del, body.libelle-dark.woocommerce-page del .amount { color: var(--ink-3); opacity: 0.8; } body.libelle-dark.woocommerce-page .price ins { text-decoration: none; } body.libelle-dark.woocommerce-page .price ins .amount { color: var(--green); } /* Mengenfeld */ body.libelle-dark.woocommerce-page .quantity { display: inline-flex; align-items: center; } body.libelle-dark.woocommerce-page .quantity .qty, body.libelle-dark.woocommerce-page .quantity input.input-text.qty { width: 4.2rem; min-height: 48px; text-align: center; padding: 0.5rem 0.4rem; background: var(--bg-2) !important; color: var(--ink) !important; border: 1px solid var(--line) !important; border-radius: 10px !important; font-weight: 700; font-size: 1rem; } body.libelle-dark.woocommerce-page .quantity.spinners-added .qty { border-radius: 0 !important; border-left: 0 !important; border-right: 0 !important; } body.libelle-dark.woocommerce-page .quantity .kadence-qty-button { background: var(--bg-2); color: var(--ink-2); border: 1px solid var(--line); min-height: 48px; width: 2.2rem; } body.libelle-dark.woocommerce-page .quantity .kadence-qty-button:hover { color: var(--pink); background: var(--bg-3); } body.libelle-dark.woocommerce-page .quantity .kadence-qty-button.minus { border-radius: 10px 0 0 10px; } body.libelle-dark.woocommerce-page .quantity .kadence-qty-button.plus { border-radius: 0 10px 10px 0; } /* Tabellen (Warenkorb, Summen, Bestellungen) */ body.libelle-dark.woocommerce-page table.shop_table { border: 0; border-collapse: collapse; border-radius: 0; margin: 0; background: transparent; } body.libelle-dark.woocommerce-page table.shop_table th, body.libelle-dark.woocommerce-page table.shop_table td { border: 0; border-bottom: 1px solid var(--line); padding: 0.9rem 0.8rem; vertical-align: middle; background: transparent; color: var(--ink); } body.libelle-dark.woocommerce-page table.shop_table thead th { background: transparent; color: var(--ink-3); font-size: 0.8rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; border-bottom-color: var(--neon-2); } body.libelle-dark.woocommerce-page table.shop_table tbody th { background: transparent; color: var(--ink-2); font-weight: 500; } body.libelle-dark.woocommerce-page table.shop_table tfoot th, body.libelle-dark.woocommerce-page table.shop_table tfoot td { background: transparent; } body.libelle-dark.woocommerce-page table.shop_table tr:last-child td, body.libelle-dark.woocommerce-page table.shop_table tr:last-child th { border-bottom: 0; } body.libelle-dark.woocommerce-page table.shop_table .product-name a { color: var(--ink); } body.libelle-dark.woocommerce-page table.shop_table .product-name a:hover { color: var(--neon-2); } body.libelle-dark.woocommerce-page table.shop_table dl.variation, body.libelle-dark.woocommerce-page table.shop_table .wc-item-meta { color: var(--ink-3); font-size: 0.9rem; } body.libelle-dark.woocommerce-page table.shop_table .product-quantity strong, body.libelle-dark.woocommerce-page table.shop_table .product-quantity .product-quantity { color: var(--ink-2); font-weight: 500; } /* Kadence-Breadcrumbs über Produkten */ body.libelle-dark .woocommerce-breadcrumb, body.libelle-dark .kadence-breadcrumbs { color: var(--ink-3); font-size: 0.92rem; margin-bottom: 1.5rem; } body.libelle-dark .woocommerce-breadcrumb a, body.libelle-dark .kadence-breadcrumbs a { color: var(--ink-3); } body.libelle-dark .woocommerce-breadcrumb a:hover, body.libelle-dark .kadence-breadcrumbs a:hover { color: var(--ink); } /* -------------------------------------------------------------------------- 1. Warenkorb (/warenkorb/ – klassischer Shortcode [woocommerce_cart]) -------------------------------------------------------------------------- */ body.libelle-dark .woocommerce-cart .cart-summary h2, body.libelle-dark .woocommerce-cart .cart_totals h2 { font-size: clamp(1.4rem, 2.5vw, 1.9rem); margin-bottom: 1rem; } body.libelle-dark .woocommerce-cart-form { padding: 0.4rem 1.2rem 1.2rem; border: 1px solid var(--line); border-radius: var(--radius); background: linear-gradient(160deg, rgba(27, 16, 56, 0.9), rgba(18, 10, 38, 0.9)); } body.libelle-dark .woocommerce-cart-form .cart-summary { margin: 0.4rem 0 0.2rem; } body.libelle-dark .woocommerce-cart-form table.shop_table th:first-child, body.libelle-dark .woocommerce-cart-form table.shop_table td:first-child { padding-left: 0; } body.libelle-dark .woocommerce-cart-form table.shop_table th:last-child, body.libelle-dark .woocommerce-cart-form table.shop_table td:last-child { padding-right: 0; } body.libelle-dark .woocommerce-cart-form table.shop_table:has(img.woocommerce-placeholder) .product-thumbnail { display: none; } body.libelle-dark .woocommerce-cart-form .product-thumbnail img { width: 64px; height: 64px; object-fit: contain; border-radius: 10px; border: 1px solid var(--line); background: var(--bg-2); padding: 4px; } body.libelle-dark .woocommerce-cart-form .product-name { font-weight: 500; } body.libelle-dark .woocommerce-cart-form .product-subtotal { font-weight: 700; } body.libelle-dark.woocommerce-page a.remove { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 999px; border: 1px solid var(--line); color: var(--ink-3) !important; font-size: 1.2rem; line-height: 1; font-weight: 400; background: transparent; } body.libelle-dark.woocommerce-page a.remove:hover { color: #fff !important; background: var(--pink) !important; border-color: var(--pink); } /* Aktionszeile: Gutschein links, „Warenkorb aktualisieren“ rechts (td bleibt Tabellenzelle, Floats + Clearfix) */ body.libelle-dark .woocommerce-cart-form td.actions { padding: 1.2rem 0 0 !important; border-bottom: 0 !important; } body.libelle-dark .woocommerce-cart-form td.actions::after { content: ''; display: table; clear: both; } body.libelle-dark .woocommerce-cart-form td.actions .coupon { float: left; display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; margin: 0 1rem 0.5rem 0; padding: 0; } body.libelle-dark .woocommerce-cart-form td.actions .coupon #coupon_code, body.libelle-dark .woocommerce-cart-form td.actions .coupon .input-text { width: 200px; max-width: 100%; min-height: 48px; margin: 0; font-size: 0.95rem; } body.libelle-dark .woocommerce-cart-form td.actions .coupon .button { margin: 0; white-space: nowrap; } body.libelle-dark .woocommerce-cart-form td.actions > .button { float: right; margin: 0; } /* Spaltenbreiten: Entfernen/Bild schmal, Preise nicht umbrechen */ body.libelle-dark .woocommerce-cart-form table.shop_table th, body.libelle-dark .woocommerce-cart-form table.shop_table td { padding: 0.9rem 0.5rem; } body.libelle-dark .woocommerce-cart-form table.shop_table thead th { white-space: nowrap; font-size: 0.74rem; letter-spacing: 0.1em; } body.libelle-dark .woocommerce-cart-form table.shop_table .product-remove { width: 36px; } body.libelle-dark .woocommerce-cart-form table.shop_table .product-thumbnail { width: 72px; } body.libelle-dark .woocommerce-cart-form table.shop_table .product-price, body.libelle-dark .woocommerce-cart-form table.shop_table .product-subtotal, body.libelle-dark .woocommerce-cart-form table.shop_table .product-quantity { white-space: nowrap; } body.libelle-dark .woocommerce-cart-form table.shop_table .product-name { min-width: 160px; } /* Summenbox */ body.libelle-dark .cart-collaterals .cart_totals { padding: 1.4rem; border: 1px solid var(--neon-2); border-radius: var(--radius); background: linear-gradient(160deg, rgba(27, 16, 56, 0.95), rgba(18, 10, 38, 0.95)); box-shadow: 0 0 40px rgba(138, 92, 255, 0.12); } body.libelle-dark .cart-collaterals .cart_totals h2 { font-size: 1.4rem; margin-bottom: 0.8rem; } body.libelle-dark .cart_totals table.shop_table th { padding-left: 0; width: 40%; } body.libelle-dark .cart_totals table.shop_table td { padding-right: 0; text-align: right; } body.libelle-dark .cart_totals .order-total th, body.libelle-dark .cart_totals .order-total td { font-size: 1.15rem; font-weight: 700; color: var(--ink); border-bottom: 0; padding-top: 1rem; } body.libelle-dark .cart_totals .order-total .includes_tax, body.libelle-dark.woocommerce-page .includes_tax, body.libelle-dark.woocommerce-page small.tax_label { display: block; color: var(--ink-3); font-size: 0.8rem; font-weight: 400; } body.libelle-dark .cart_totals .shipping td, body.libelle-dark .cart_totals .shipping th { color: var(--ink-2); } body.libelle-dark .cart_totals .woocommerce-shipping-methods { list-style: none; padding: 0; margin: 0; } body.libelle-dark .wc-proceed-to-checkout { padding: 1rem 0 0; } body.libelle-dark .wc-proceed-to-checkout a.checkout-button { display: flex; width: 100%; font-size: 1.05rem; padding: 0.95rem 1.5rem; margin: 0; } body.libelle-dark .cart-empty, body.libelle-dark .wc-empty-cart-message .cart-empty { color: var(--ink-2); } body.libelle-dark .return-to-shop .button { margin-top: 0.5rem; } /* Cross-Sells aus (Tickets brauchen keine Empfehlungen im Warenkorb) – bleibt lesbar falls aktiv */ body.libelle-dark .cart-collaterals .cross-sells h2 { font-size: 1.4rem; margin-top: 2rem; } /* -------------------------------------------------------------------------- 2. Kasse (/kasse/ – [woocommerce_checkout]) -------------------------------------------------------------------------- */ body.libelle-dark .woocommerce-checkout .woocommerce-form-login-toggle .woocommerce-info, body.libelle-dark .woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info { margin-bottom: 1rem !important; padding: 0.9rem 1.2rem !important; } body.libelle-dark .woocommerce-checkout form.woocommerce-form-login, body.libelle-dark .woocommerce-checkout form.checkout_coupon { padding: 1.4rem; margin-bottom: 1.5rem; border: 1px solid var(--line) !important; border-radius: var(--radius); background: linear-gradient(160deg, rgba(27, 16, 56, 0.9), rgba(18, 10, 38, 0.9)); } body.libelle-dark .woocommerce-checkout form.woocommerce-form-login p, body.libelle-dark .woocommerce-checkout form.checkout_coupon p { color: var(--ink-2); } body.libelle-dark .woocommerce-checkout form.checkout_coupon { display: flex; flex-wrap: wrap; align-items: center; gap: 0.8rem; } body.libelle-dark .woocommerce-checkout form.checkout_coupon > p:first-child { flex: 1 1 100%; margin: 0; } body.libelle-dark .woocommerce-checkout form.checkout_coupon .form-row { float: none; width: auto; margin: 0; flex: 1 1 220px; } body.libelle-dark .woocommerce-checkout form.checkout_coupon .form-row input { width: 100%; } body.libelle-dark .woocommerce-checkout form.checkout_coupon .form-row-last { flex: 0 0 auto; } body.libelle-dark .woocommerce-checkout form.checkout_coupon .form-row-last button { width: 100%; } body.libelle-dark .woocommerce-checkout form.woocommerce-form-login .form-row-first, body.libelle-dark .woocommerce-checkout form.woocommerce-form-login .form-row-last { width: 48%; } body.libelle-dark .woocommerce-checkout .woocommerce-form-login .lost_password { margin: 0.8rem 0 0; } body.libelle-dark .woocommerce-checkout .woocommerce-form-login .woocommerce-form-login__rememberme { display: inline-flex; align-items: center; margin-left: 1rem; color: var(--ink-2); } /* Kund:innendaten links */ body.libelle-dark #customer_details h3, body.libelle-dark .woocommerce-checkout h3#order_review_heading { font-size: clamp(1.3rem, 2.2vw, 1.7rem); margin-bottom: 1rem; } body.libelle-dark #customer_details .woocommerce-billing-fields, body.libelle-dark #customer_details .woocommerce-shipping-fields, body.libelle-dark #customer_details .woocommerce-additional-fields { padding: 1.4rem; border: 1px solid var(--line); border-radius: var(--radius); background: linear-gradient(160deg, rgba(27, 16, 56, 0.9), rgba(18, 10, 38, 0.9)); margin-bottom: 1.5rem; } body.libelle-dark #customer_details .form-row { margin-bottom: 1rem; } body.libelle-dark #customer_details .woocommerce-shipping-fields:not(:has(*)), body.libelle-dark #customer_details .woocommerce-shipping-fields:empty { display: none; } body.libelle-dark #customer_details .woocommerce-account-fields { margin: -0.4rem 0 1.5rem; padding: 0 1.4rem; } body.libelle-dark #customer_details .woocommerce-account-fields .form-row { margin-bottom: 0.6rem; } body.libelle-dark #customer_details .woocommerce-account-fields .woocommerce-form__label-for-checkbox { color: var(--ink-2); font-weight: 400; } body.libelle-dark #customer_details .woocommerce-billing-fields + .woocommerce-account-fields { margin-top: 1.2rem; } body.libelle-dark #customer_details .form-row-first, body.libelle-dark #customer_details .form-row-last { width: 48%; } body.libelle-dark #customer_details .form-row-last { float: right; } body.libelle-dark #customer_details .create-account, body.libelle-dark #customer_details .woocommerce-account-fields .form-row { color: var(--ink-2); } body.libelle-dark #customer_details .woocommerce-account-fields .woocommerce-form__label-for-checkbox { display: inline-flex; align-items: center; gap: 0.5rem; } body.libelle-dark #customer_details #ship-to-different-address { font-size: 1rem; } body.libelle-dark #customer_details #ship-to-different-address label { color: var(--ink-2); display: inline-flex; align-items: center; gap: 0.5rem; } body.libelle-dark #order_comments { min-height: 110px; resize: vertical; } /* Bestellübersicht + Zahlung rechts */ body.libelle-dark .woocommerce-checkout #order_review { padding: 1.4rem; border: 1px solid var(--neon-2); border-radius: var(--radius); background: linear-gradient(160deg, rgba(27, 16, 56, 0.95), rgba(18, 10, 38, 0.95)); box-shadow: 0 0 40px rgba(138, 92, 255, 0.12); } body.libelle-dark .woocommerce-checkout #order_review table.shop_table th, body.libelle-dark .woocommerce-checkout #order_review table.shop_table td { padding: 0.8rem 0; } body.libelle-dark .woocommerce-checkout #order_review table.shop_table .product-total, body.libelle-dark .woocommerce-checkout #order_review table.shop_table tfoot td { text-align: right; } body.libelle-dark .woocommerce-checkout #order_review table.shop_table tfoot th { font-weight: 500; color: var(--ink-2); } body.libelle-dark .woocommerce-checkout #order_review table.shop_table .order-total th, body.libelle-dark .woocommerce-checkout #order_review table.shop_table .order-total td { font-size: 1.15rem; font-weight: 700; color: var(--ink); border-bottom: 0; padding-top: 1rem; } body.libelle-dark .woocommerce-checkout #order_review table.shop_table .order-total th { white-space: nowrap; } body.libelle-dark .woocommerce-checkout #order_review table.shop_table .includes_tax, body.libelle-dark .cart_totals .includes_tax { white-space: nowrap; } body.libelle-dark .woocommerce-checkout h3#order_review_heading { margin: 0 0 1rem; padding: 0; } body.libelle-dark .woocommerce-checkout #order_review_heading + #order_review { margin-top: 0; } body.libelle-dark .woocommerce-checkout #order_review table.shop_table .cart_item .product-name { color: var(--ink-2); } body.libelle-dark .woocommerce-checkout #order_review table.shop_table .product-quantity { color: var(--ink); } /* Zahlungsarten */ body.libelle-dark .woocommerce-checkout #payment, body.libelle-dark .woocommerce-checkout #payment.woocommerce-checkout-payment { background: transparent !important; border: 0; border-radius: 0; margin-top: 1.2rem; } body.libelle-dark #payment ul.payment_methods { list-style: none; margin: 0 0 1rem; padding: 0; border: 0; display: grid; gap: 0.6rem; } body.libelle-dark #payment ul.payment_methods li { margin: 0; padding: 0.9rem 1rem; border: 1px solid var(--line); border-radius: 12px; background: rgba(7, 4, 15, 0.45); color: var(--ink); line-height: 1.4; } body.libelle-dark #payment ul.payment_methods li:has(input:checked), body.libelle-dark #payment ul.payment_methods li.wc_payment_method:has(input:checked) { border-color: var(--pink); box-shadow: inset 0 0 0 1px rgba(255, 61, 154, 0.35); } body.libelle-dark #payment ul.payment_methods li label { display: inline; color: var(--ink); font-weight: 500; cursor: pointer; } body.libelle-dark #payment ul.payment_methods li input[type="radio"] { width: 18px; height: 18px; margin: 0 0.6rem 0 0; vertical-align: -3px; accent-color: var(--pink); } body.libelle-dark #payment ul.payment_methods li img { max-height: 24px; vertical-align: middle; margin-left: 0.4rem; filter: none; } body.libelle-dark #payment ul.payment_methods li .about_paypal { color: var(--ink-3); font-size: 0.85rem; } body.libelle-dark #payment div.payment_box { background: var(--bg-2) !important; color: var(--ink-2) !important; border: 1px solid var(--line); border-radius: 10px; margin: 0.8rem 0 0; padding: 1rem; font-size: 0.95rem; } body.libelle-dark #payment div.payment_box::before { border-bottom-color: var(--bg-2) !important; } body.libelle-dark #payment div.payment_box p { color: var(--ink-2); margin-bottom: 0.5rem; } body.libelle-dark #payment div.payment_box p:last-child { margin-bottom: 0; } body.libelle-dark #payment div.payment_box label { color: var(--ink-2); font-size: 0.9rem; } body.libelle-dark #payment div.payment_box fieldset { border: 0; padding: 0; margin: 0; } body.libelle-dark #payment div.payment_box .wc-credit-card-form, body.libelle-dark #payment div.payment_box .form-row { margin-bottom: 0.8rem; } body.libelle-dark #payment .place-order { padding: 1rem 0 0; } body.libelle-dark #payment .woocommerce-terms-and-conditions-wrapper { margin: 1rem 0 0; } body.libelle-dark #payment .woocommerce-terms-and-conditions-wrapper .woocommerce-privacy-policy-text p { color: var(--ink-3); font-size: 0.9rem; } body.libelle-dark #payment .woocommerce-terms-and-conditions-wrapper .woocommerce-terms-and-conditions { background: var(--bg-2); border: 1px solid var(--line); border-radius: 10px; padding: 1rem; color: var(--ink-2); font-size: 0.9rem; } body.libelle-dark .woocommerce-terms-and-conditions-checkbox-text { color: var(--ink-2); font-weight: 400; font-size: 0.95rem; } body.libelle-dark .woocommerce-terms-and-conditions-checkbox-text a { color: var(--neon-2); text-decoration: underline; text-underline-offset: 3px; } body.libelle-dark .woocommerce-form__label-for-checkbox.checkbox { display: flex; align-items: flex-start; gap: 0.55rem; } body.libelle-dark .woocommerce-form__label-for-checkbox.checkbox input { margin-top: 0.3rem; flex-shrink: 0; } html body.libelle-dark #place_order { width: 100%; margin: 1rem 0 0 !important; font-size: 1.05rem; padding: 0.95rem 1.5rem !important; } /* Stripe: nur Rahmen/Hintergrund um die iframes, die Felder selbst bleiben Stripe */ body.libelle-dark .wc-stripe-elements-field, body.libelle-dark .wc-stripe-iban-element-field, body.libelle-dark .StripeElement, body.libelle-dark #wc-stripe-upe-element, body.libelle-dark .wc-stripe-upe-element, body.libelle-dark #stripe-card-element, body.libelle-dark #stripe-exp-element, body.libelle-dark #stripe-cvc-element { background: var(--bg-2) !important; border: 1px solid var(--line) !important; border-radius: 10px !important; padding: 0.85rem 0.9rem; color: var(--ink); box-shadow: none !important; margin: 0; } body.libelle-dark .StripeElement--focus, body.libelle-dark .wc-stripe-elements-field.focused { border-color: var(--neon-2) !important; box-shadow: 0 0 0 3px rgba(138, 92, 255, 0.25) !important; } body.libelle-dark .StripeElement--invalid, body.libelle-dark .wc-stripe-elements-field.invalid { border-color: var(--orange) !important; } body.libelle-dark #wc-stripe-upe-element, body.libelle-dark .wc-stripe-upe-element { padding: 0.4rem 0; background: transparent !important; border: 0 !important; } body.libelle-dark #payment .payment_method_stripe .stripe-source-errors, body.libelle-dark .wc-stripe-error { color: var(--warn); font-size: 0.9rem; } body.libelle-dark #payment .payment_method_stripe .wc-saved-payment-methods { list-style: none; padding: 0; margin: 0 0 0.8rem; } body.libelle-dark #payment .payment_method_stripe .wc-saved-payment-methods li { margin: 0.3rem 0; color: var(--ink-2); } body.libelle-dark #payment .payment_method_stripe .woocommerce-SavedPaymentMethods-saveNew { color: var(--ink-3); font-size: 0.9rem; } /* Stripe Express-Checkout (Apple/Google Pay, Link) oben auf Warenkorb & Kasse */ body.libelle-dark .wc-stripe-express-checkout-wrapper, body.libelle-dark #wc-stripe-express-checkout-element, body.libelle-dark #wc-stripe-payment-request-wrapper { margin: 0 0 1.2rem; padding: 0; } body.libelle-dark #wc-stripe-express-checkout-button-separator, body.libelle-dark #wc-stripe-payment-request-button-separator, body.libelle-dark .wc-stripe-express-checkout__separator { display: flex; align-items: center; gap: 1rem; margin: 1rem 0 1.5rem; color: var(--ink-3); font-size: 0.8rem; letter-spacing: 0.2em; text-transform: uppercase; text-align: center; } body.libelle-dark #wc-stripe-express-checkout-button-separator::before, body.libelle-dark #wc-stripe-express-checkout-button-separator::after, body.libelle-dark #wc-stripe-payment-request-button-separator::before, body.libelle-dark #wc-stripe-payment-request-button-separator::after { content: ''; flex: 1; height: 1px; background: var(--line); } body.libelle-dark .wc-stripe-express-checkout-wrapper iframe, body.libelle-dark #wc-stripe-express-checkout-element iframe { border-radius: 999px; } /* Checkout-Fehler (oben) */ body.libelle-dark .woocommerce-NoticeGroup-checkout { margin-bottom: 1.5rem; } body.libelle-dark .woocommerce-checkout .blockUI.blockOverlay { background: rgba(7, 4, 15, 0.6) !important; } /* -------------------------------------------------------------------------- 3. Mein Konto (/mein-konto/ – Login, Navigation, Bestellungen, Adressen) -------------------------------------------------------------------------- */ body.libelle-dark .woocommerce-account .woocommerce > h2, body.libelle-dark .woocommerce-account .u-columns > div > h2 { font-size: clamp(1.4rem, 2.5vw, 1.9rem); margin-bottom: 1rem; } body.libelle-dark.woocommerce-page form.login, body.libelle-dark.woocommerce-page form.register, body.libelle-dark.woocommerce-page form.woocommerce-ResetPassword, body.libelle-dark.woocommerce-page form.woocommerce-EditAccountForm, body.libelle-dark.woocommerce-page form.woocommerce-form-track-order { border: 1px solid var(--line) !important; border-radius: var(--radius); padding: 1.6rem; margin: 0 0 1.5rem; background: linear-gradient(160deg, rgba(27, 16, 56, 0.9), rgba(18, 10, 38, 0.9)); max-width: 560px; } body.libelle-dark.woocommerce-page form.login .form-row, body.libelle-dark.woocommerce-page form.register .form-row { margin-bottom: 1rem; } body.libelle-dark.woocommerce-page form.login .woocommerce-form-login__rememberme { display: inline-flex; align-items: center; gap: 0.3rem; margin-left: 1rem; color: var(--ink-2); font-weight: 400; vertical-align: middle; } body.libelle-dark.woocommerce-page form.login .woocommerce-LostPassword, body.libelle-dark.woocommerce-page form.login .lost_password { margin: 0.8rem 0 0; font-size: 0.95rem; } body.libelle-dark.woocommerce-page form.login .woocommerce-LostPassword a { color: var(--ink-3); text-decoration: underline; text-underline-offset: 3px; } body.libelle-dark.woocommerce-page form.login .woocommerce-LostPassword a:hover { color: var(--ink); } body.libelle-dark.woocommerce-page form.register .woocommerce-privacy-policy-text p { color: var(--ink-3); font-size: 0.9rem; } body.libelle-dark .woocommerce-ResetPassword p { color: var(--ink-2); } body.libelle-dark .woocommerce-password-strength { background: transparent !important; color: var(--ink-2) !important; border: 0; text-align: left; font-size: 0.9rem; padding: 0.2rem 0; } body.libelle-dark .woocommerce-password-strength.short { color: var(--orange) !important; } body.libelle-dark .woocommerce-password-strength.bad { color: var(--warn) !important; } body.libelle-dark .woocommerce-password-strength.good, body.libelle-dark .woocommerce-password-strength.strong { color: var(--ok) !important; } body.libelle-dark .woocommerce-password-hint { color: var(--ink-3); font-size: 0.85rem; } /* Konto-Navigation (Kadence: rechts- oder linksstehend) */ body.libelle-dark .woocommerce-MyAccount-navigation { padding: 0.6rem; border: 1px solid var(--line); border-radius: var(--radius); background: linear-gradient(160deg, rgba(27, 16, 56, 0.9), rgba(18, 10, 38, 0.9)); } body.libelle-dark .woocommerce-MyAccount-navigation ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.15rem; } body.libelle-dark .woocommerce-MyAccount-navigation ul li { margin: 0; border: 0; } body.libelle-dark .woocommerce-MyAccount-navigation ul li a { display: block; padding: 0.6rem 0.9rem; border-radius: 10px; color: var(--ink-2); font-weight: 500; border: 0; background: transparent; transition: background 0.15s ease, color 0.15s ease; } body.libelle-dark .woocommerce-MyAccount-navigation ul li a:hover { color: var(--ink); background: rgba(138, 92, 255, 0.15); text-decoration: none; } body.libelle-dark .woocommerce-MyAccount-navigation ul li.is-active a { color: #fff; background: var(--pink); box-shadow: 0 0 18px rgba(255, 61, 154, 0.35); } body.libelle-dark .woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--customer-logout a { color: var(--ink-3); } body.libelle-dark .woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--customer-logout a:hover { color: var(--orange); background: rgba(255, 122, 69, 0.12); } body.libelle-dark .woocommerce-MyAccount-content { color: var(--ink-2); } body.libelle-dark .woocommerce-MyAccount-content > p:first-child { font-size: 1.05rem; } body.libelle-dark .woocommerce-MyAccount-content a:not(.button) { color: var(--neon-2); text-decoration: underline; text-underline-offset: 3px; } body.libelle-dark .woocommerce-MyAccount-content a:not(.button):hover { color: var(--ink); } body.libelle-dark .woocommerce-MyAccount-content h2, body.libelle-dark .woocommerce-MyAccount-content h3, body.libelle-dark .woocommerce-MyAccount-content legend { color: var(--ink); font-size: 1.3rem; margin: 1.5rem 0 0.8rem; } body.libelle-dark .woocommerce-MyAccount-content fieldset { border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem 1.2rem; margin: 1.5rem 0; } body.libelle-dark .woocommerce-MyAccount-content fieldset legend { padding: 0 0.5rem; margin: 0; font-size: 1.1rem; } body.libelle-dark .woocommerce-MyAccount-content .woocommerce-EditAccountForm { max-width: none; } /* Bestellungen & Downloads */ body.libelle-dark table.woocommerce-orders-table, body.libelle-dark table.woocommerce-table--order-details, body.libelle-dark table.woocommerce-table--order-downloads, body.libelle-dark.woocommerce-page table.my_account_orders { border: 1px solid var(--line) !important; border-radius: var(--radius); overflow: hidden; background: linear-gradient(160deg, rgba(27, 16, 56, 0.9), rgba(18, 10, 38, 0.9)); font-size: 0.95rem; } body.libelle-dark table.woocommerce-orders-table th, body.libelle-dark table.woocommerce-orders-table td, body.libelle-dark table.woocommerce-table--order-details th, body.libelle-dark table.woocommerce-table--order-details td { padding: 0.8rem 1rem !important; } body.libelle-dark table.woocommerce-orders-table .woocommerce-orders-table__cell-order-number a { color: var(--neon-2); font-weight: 700; } body.libelle-dark table.woocommerce-orders-table .woocommerce-orders-table__cell-order-actions .button { padding: 0.4rem 0.9rem; font-size: 0.85rem; margin: 0.15rem 0.3rem 0.15rem 0; } body.libelle-dark .woocommerce-pagination.woocommerce-Pagination { margin-top: 1rem; display: flex; gap: 0.6rem; } body.libelle-dark .woocommerce-pagination.woocommerce-Pagination .button { float: none; } /* Adressen */ body.libelle-dark .woocommerce-Addresses .woocommerce-Address, body.libelle-dark .woocommerce-customer-details .woocommerce-column { padding: 1.4rem; border: 1px solid var(--line); border-radius: var(--radius); background: linear-gradient(160deg, rgba(27, 16, 56, 0.9), rgba(18, 10, 38, 0.9)); margin-bottom: 1.2rem; } body.libelle-dark .woocommerce-Address-title { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: 0.6rem; } body.libelle-dark .woocommerce-Address-title h2, body.libelle-dark .woocommerce-Address-title h3 { margin: 0; font-size: 1.2rem; } body.libelle-dark .woocommerce-Address-title .edit { float: none; font-size: 0.9rem; } body.libelle-dark .woocommerce-Address address, body.libelle-dark .woocommerce-customer-details address { font-style: normal; color: var(--ink-2); line-height: 1.6; border: 0; padding: 0; } body.libelle-dark .woocommerce-Address address::before { display: none; } body.libelle-dark .woocommerce-customer-details--phone, body.libelle-dark .woocommerce-customer-details--email { padding-left: 0; } body.libelle-dark .woocommerce-customer-details--phone::before, body.libelle-dark .woocommerce-customer-details--email::before { display: none; } body.libelle-dark .woocommerce-account .addresses .title .edit { float: none; } body.libelle-dark .woocommerce-address-fields .woocommerce-address-fields__field-wrapper .form-row-first, body.libelle-dark .woocommerce-address-fields .woocommerce-address-fields__field-wrapper .form-row-last { width: 48%; } /* Zahlungsarten-Liste im Konto */ body.libelle-dark table.woocommerce-MyAccount-paymentMethods { border: 1px solid var(--line) !important; border-radius: var(--radius); background: linear-gradient(160deg, rgba(27, 16, 56, 0.9), rgba(18, 10, 38, 0.9)); } /* -------------------------------------------------------------------------- 4. Produktseite & Shop-Archiv (Tickets) -------------------------------------------------------------------------- */ body.libelle-dark.woocommerce-page div.product .woocommerce-product-gallery, body.libelle-dark.woocommerce-page div.product div.images { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: radial-gradient(circle at 30% 20%, rgba(138, 92, 255, 0.25), transparent 60%), var(--bg-3); } body.libelle-dark.woocommerce-page div.product .woocommerce-product-gallery img, body.libelle-dark.woocommerce-page div.product div.images img { border-radius: 0; display: block; width: 100%; } body.libelle-dark.woocommerce-page div.product .woocommerce-product-gallery__image--placeholder, body.libelle-dark.woocommerce-page div.product div.images .woocommerce-product-gallery__image--placeholder { padding: 2.5rem; border: 0 !important; } body.libelle-dark.woocommerce-page div.product .woocommerce-product-gallery__trigger { background: var(--bg-2); border: 1px solid var(--line); border-radius: 999px; } body.libelle-dark.woocommerce-page div.product .woocommerce-product-gallery__trigger::before { border-color: var(--ink-2); } body.libelle-dark.woocommerce-page div.product .woocommerce-product-gallery__trigger::after { background: var(--ink-2); } body.libelle-dark.woocommerce-page div.product .flex-control-thumbs { margin: 0.5rem 0 0; padding: 0.5rem; display: flex; gap: 0.5rem; list-style: none; } body.libelle-dark.woocommerce-page div.product .flex-control-thumbs li img { border-radius: 8px; border: 1px solid var(--line); opacity: 0.6; } body.libelle-dark.woocommerce-page div.product .flex-control-thumbs li img.flex-active, body.libelle-dark.woocommerce-page div.product .flex-control-thumbs li img:hover { opacity: 1; border-color: var(--neon-2); } body.libelle-dark.woocommerce-page div.product .product_title { font-size: clamp(1.8rem, 3.6vw, 2.6rem); margin-bottom: 0.8rem; } body.libelle-dark.woocommerce-page div.product p.price, body.libelle-dark.woocommerce-page div.product span.price { font-family: var(--font-head); font-weight: 900; font-size: 1.9rem; color: var(--ink); margin: 0 0 0.8rem; line-height: 1.1; } body.libelle-dark.woocommerce-page div.product p.price del { font-size: 0.6em; vertical-align: middle; margin-right: 0.4rem; } body.libelle-dark.woocommerce-page div.product p.stock { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.25rem 0.8rem; border-radius: 999px; border: 1px solid; font-size: 0.82rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; margin: 0 0 1.2rem; } body.libelle-dark.woocommerce-page div.product p.stock::before { content: ''; width: 8px; height: 8px; border-radius: 999px; background: currentColor; box-shadow: 0 0 10px currentColor; } body.libelle-dark.woocommerce-page div.product p.stock.in-stock { color: var(--green) !important; border-color: rgba(61, 255, 154, 0.5); } body.libelle-dark.woocommerce-page div.product p.stock.out-of-stock { color: var(--warn) !important; border-color: rgba(255, 184, 107, 0.6); } body.libelle-dark.woocommerce-page div.product p.stock.available-on-backorder { color: var(--cyan) !important; border-color: rgba(60, 215, 255, 0.5); } body.libelle-dark.woocommerce-page div.product .woocommerce-product-details__short-description { color: var(--ink-2); max-width: 60ch; } body.libelle-dark.woocommerce-page div.product form.cart { display: flex; flex-wrap: wrap; align-items: center; gap: 0.8rem; margin: 0 0 1.5rem; padding: 1.2rem; border: 1px solid var(--line); border-radius: var(--radius); background: linear-gradient(160deg, rgba(27, 16, 56, 0.9), rgba(18, 10, 38, 0.9)); } body.libelle-dark.woocommerce-page div.product form.cart div.quantity { float: none; margin: 0; } body.libelle-dark.woocommerce-page div.product form.cart .button { float: none; margin: 0; } body.libelle-dark.woocommerce-page div.product form.cart.grouped_form, body.libelle-dark.woocommerce-page div.product form.cart.variations_form { display: block; } body.libelle-dark.woocommerce-page div.product form.cart table.variations td, body.libelle-dark.woocommerce-page div.product form.cart table.variations th { border: 0; padding: 0.3rem 0; } body.libelle-dark.woocommerce-page div.product form.cart table.variations label { color: var(--ink-2); } body.libelle-dark.woocommerce-page div.product form.cart .reset_variations { color: var(--ink-3); font-size: 0.85rem; } body.libelle-dark.woocommerce-page div.product .woocommerce-variation-price, body.libelle-dark.woocommerce-page div.product .woocommerce-variation-availability { margin-bottom: 0.8rem; } body.libelle-dark.woocommerce-page div.product .single_variation_wrap .woocommerce-variation-add-to-cart { display: flex; flex-wrap: wrap; align-items: center; gap: 0.8rem; } body.libelle-dark.woocommerce-page div.product .product_meta { color: var(--ink-3); font-size: 0.85rem; line-height: 1.8; } body.libelle-dark.woocommerce-page div.product .product_meta > span { display: block; } body.libelle-dark.woocommerce-page div.product .product_meta a { color: var(--ink-2); } body.libelle-dark.woocommerce-page div.product .product_meta a:hover { color: var(--ink); } body.libelle-dark.woocommerce-page div.product .product_meta .sku { color: var(--ink-3); word-break: break-all; } /* Tabs (Beschreibung) */ body.libelle-dark.woocommerce-page div.product .woocommerce-tabs { margin-top: 2.5rem; } body.libelle-dark.woocommerce-page div.product .woocommerce-tabs ul.tabs { padding: 0; margin: 0 0 1.5rem; border-bottom: 1px solid var(--line); display: flex; gap: 0.3rem; overflow-x: auto; } body.libelle-dark.woocommerce-page div.product .woocommerce-tabs ul.tabs::before { display: none; } body.libelle-dark.woocommerce-page div.product .woocommerce-tabs ul.tabs li { background: transparent; border: 0; border-radius: 0; margin: 0; padding: 0; } body.libelle-dark.woocommerce-page div.product .woocommerce-tabs ul.tabs li::before, body.libelle-dark.woocommerce-page div.product .woocommerce-tabs ul.tabs li::after { display: none; } body.libelle-dark.woocommerce-page div.product .woocommerce-tabs ul.tabs li a { display: block; padding: 0.7rem 1rem; color: var(--ink-2); font-weight: 700; border-bottom: 2px solid transparent; white-space: nowrap; } body.libelle-dark.woocommerce-page div.product .woocommerce-tabs ul.tabs li.active a { color: var(--ink); border-bottom-color: var(--pink); } body.libelle-dark.woocommerce-page div.product .woocommerce-tabs .panel { background: transparent; border: 0; padding: 0; color: var(--ink-2); } body.libelle-dark.woocommerce-page div.product .woocommerce-tabs .panel h2 { font-size: 1.4rem; } /* Archiv/Related: Kadence-Loop-Karten (style.css setzt .loop-entry transparent → hier wieder Karte) */ body.libelle-dark.woocommerce-page ul.products, body.libelle-dark ul.products { display: grid; gap: 1.2rem; margin: 0 0 1rem; padding: 0; list-style: none; } body.libelle-dark.woocommerce-page ul.products::before, body.libelle-dark.woocommerce-page ul.products::after { display: none; } body.libelle-dark.woocommerce-page ul.products.grid-lg-col-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } body.libelle-dark.woocommerce-page ul.products.grid-lg-col-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } body.libelle-dark.woocommerce-page ul.products.grid-lg-col-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } @media (max-width: 1023px) { body.libelle-dark.woocommerce-page ul.products.grid-lg-col-4, body.libelle-dark.woocommerce-page ul.products.grid-lg-col-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 719px) { body.libelle-dark.woocommerce-page ul.products[class*="grid-"] { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.8rem; } } @media (max-width: 419px) { body.libelle-dark.woocommerce-page ul.products[class*="grid-"] { grid-template-columns: 1fr; } } body.libelle-dark.woocommerce-page ul.products li.product, body.libelle-dark ul.products li.product.loop-entry { width: auto; float: none; margin: 0; position: relative; display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--line) !important; border-radius: var(--radius) !important; background: linear-gradient(160deg, rgba(27, 16, 56, 0.9), rgba(18, 10, 38, 0.9)) !important; transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease; } body.libelle-dark.woocommerce-page ul.products li.product:hover { transform: translateY(-3px); border-color: var(--neon-2) !important; box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45); } body.libelle-dark.woocommerce-page ul.products li.product .woocommerce-loop-image-link, body.libelle-dark.woocommerce-page ul.products li.product a.woocommerce-LoopProduct-link { display: block; background: radial-gradient(circle at 30% 20%, rgba(138, 92, 255, 0.25), transparent 60%), var(--bg-3); } body.libelle-dark.woocommerce-page ul.products li.product img { width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: contain; border-radius: 0; border: 0; display: block; margin: 0; padding: 1.2rem; box-sizing: border-box; } body.libelle-dark.woocommerce-page ul.products li.product img:not(.woocommerce-placeholder) { padding: 0; object-fit: cover; } body.libelle-dark.woocommerce-page ul.products li.product .product-details, body.libelle-dark ul.products li.product .entry-content-wrap { display: flex; flex-direction: column; gap: 0.4rem; flex: 1; padding: 1rem 1.1rem 1.2rem; background: transparent !important; } body.libelle-dark.woocommerce-page ul.products li.product .woocommerce-loop-product__title, body.libelle-dark.woocommerce-page ul.products li.product h2 { font-size: 1.1rem; line-height: 1.25; margin: 0; padding: 0; } body.libelle-dark.woocommerce-page ul.products li.product .woocommerce-loop-product__title a { color: var(--ink); } body.libelle-dark.woocommerce-page ul.products li.product .woocommerce-loop-product__title a:hover { color: var(--neon-2); } body.libelle-dark.woocommerce-page ul.products li.product .price { font-weight: 700; font-size: 1.05rem; color: var(--ink); margin: 0; } body.libelle-dark.woocommerce-page ul.products li.product .product-action-wrap { margin-top: auto; padding-top: 0.6rem; } body.libelle-dark.woocommerce-page ul.products li.product .button { margin: 0; padding: 0.5rem 1.1rem; font-size: 0.9rem; } body.libelle-dark.woocommerce-page ul.products li.product .button.loading { opacity: 0.6; } body.libelle-dark.woocommerce-page ul.products li.product .button.added::after { color: var(--green); } body.libelle-dark.woocommerce-page ul.products li.product .added_to_cart { display: inline-block; margin-left: 0.5rem; color: var(--green); font-size: 0.9rem; } body.libelle-dark.woocommerce-page ul.products li.product .onsale, body.libelle-dark.woocommerce-page span.onsale { position: absolute; top: 0.8rem; left: 0.8rem; z-index: 1; min-width: 0; min-height: 0; padding: 0.25rem 0.7rem; border-radius: 999px; border: 1px solid rgba(255, 61, 154, 0.6); background: rgba(7, 4, 15, 0.75); color: var(--pink); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; line-height: 1.6; margin: 0; } body.libelle-dark.woocommerce-page ul.products li.product .star-rating, body.libelle-dark.woocommerce-page .star-rating { color: var(--yellow); } body.libelle-dark.woocommerce-page ul.products li.product-category .woocommerce-loop-category__title { padding: 1rem; color: var(--ink); } body.libelle-dark.woocommerce-page ul.products li.product-category mark { background: transparent; color: var(--ink-3); } body.libelle-dark .related.products > h2, body.libelle-dark .upsells.products > h2, body.libelle-dark .cross-sells > h2 { font-size: clamp(1.4rem, 2.5vw, 1.9rem); margin: 2.5rem 0 1.2rem; } /* Shop-Archiv-Kopf: Sortierung, Ergebniszahl */ body.libelle-dark.woocommerce-page .woocommerce-result-count { color: var(--ink-3); font-size: 0.92rem; } body.libelle-dark.woocommerce-page .woocommerce-ordering select { width: auto; min-width: 220px; padding-right: 2.2rem; } body.libelle-dark.woocommerce-page .woocommerce-products-header__title { margin-bottom: 1rem; } body.libelle-dark.woocommerce-page .term-description { color: var(--ink-2); max-width: 70ch; } body.libelle-dark .woocommerce-pagination ul.page-numbers { display: flex; gap: 0.4rem; justify-content: center; border: 0; margin: 2rem 0 0; } body.libelle-dark .woocommerce-pagination ul.page-numbers li { border: 0; } body.libelle-dark .woocommerce-pagination ul.page-numbers li .page-numbers { display: inline-block; color: var(--ink-2); border: 1px solid var(--line); border-radius: 999px; padding: 0.3rem 0.85rem; background: transparent; line-height: 1.6; } body.libelle-dark .woocommerce-pagination ul.page-numbers li .page-numbers:hover { color: var(--ink); border-color: var(--neon-2); background: rgba(138, 92, 255, 0.15); } body.libelle-dark .woocommerce-pagination ul.page-numbers li .page-numbers.current { background: var(--pink); color: #fff; border-color: var(--pink); } body.libelle-dark.woocommerce-page .woocommerce-no-products-found .woocommerce-info { margin-top: 1rem; } /* Produkt-Widgets / Sidebar (falls aktiv) */ body.libelle-dark .widget_shopping_cart_content .total, body.libelle-dark .widget_shopping_cart_content .mini_cart_item { color: var(--ink-2); border-color: var(--line); } /* -------------------------------------------------------------------------- 5. Danke-Seite / Bestellbestätigung (/danke/, order-received) & payment_error -------------------------------------------------------------------------- */ body.libelle-dark .woocommerce-order { color: var(--ink-2); } body.libelle-dark .woocommerce-order > p.woocommerce-notice, body.libelle-dark .woocommerce-thankyou-order-received { font-family: var(--font-head); font-weight: 900; font-size: clamp(1.4rem, 2.5vw, 1.9rem); color: var(--ink) !important; background: transparent !important; border: 0 !important; padding: 0 !important; margin-bottom: 1.2rem !important; } body.libelle-dark .woocommerce-order > p.woocommerce-notice::before { content: ''; display: inline-block; width: 0.42em; height: 0.85em; margin-right: 0.5em; vertical-align: -0.08em; border-radius: 0.2em; background: var(--rainbow); transform: skewX(-18deg); box-shadow: 0 0 14px rgba(255, 61, 154, 0.5); } body.libelle-dark ul.woocommerce-order-overview, body.libelle-dark ul.woocommerce-thankyou-order-details { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 0.8rem; list-style: none; margin: 0 0 2rem; padding: 0; } body.libelle-dark ul.woocommerce-order-overview li { margin: 0; padding: 0.9rem 1rem; border: 1px solid var(--line) !important; border-radius: 12px; background: linear-gradient(160deg, rgba(27, 16, 56, 0.9), rgba(18, 10, 38, 0.9)); color: var(--ink-3); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; float: none; } body.libelle-dark ul.woocommerce-order-overview li strong { display: block; margin-top: 0.3rem; color: var(--ink); font-size: 1.05rem; font-weight: 700; letter-spacing: 0; text-transform: none; } body.libelle-dark .woocommerce-order-details__title, body.libelle-dark .woocommerce-customer-details h2, body.libelle-dark .woocommerce-column__title { font-size: 1.3rem; margin: 2rem 0 0.8rem; } body.libelle-dark .woocommerce-order-details table.shop_table { border: 1px solid var(--line) !important; border-radius: var(--radius); background: linear-gradient(160deg, rgba(27, 16, 56, 0.9), rgba(18, 10, 38, 0.9)); overflow: hidden; } body.libelle-dark .woocommerce-order-details table.shop_table th, body.libelle-dark .woocommerce-order-details table.shop_table td { padding: 0.8rem 1rem; } body.libelle-dark .woocommerce-order-details table.shop_table tfoot th { color: var(--ink-2); font-weight: 500; } body.libelle-dark .woocommerce-order-details table.shop_table tfoot tr:last-child th, body.libelle-dark .woocommerce-order-details table.shop_table tfoot tr:last-child td { font-weight: 700; color: var(--ink); font-size: 1.05rem; } body.libelle-dark .woocommerce-order-pay .woocommerce-notice { color: var(--ink-2); } body.libelle-dark .woocommerce-bacs-bank-details .wc-bacs-bank-details-heading, body.libelle-dark .woocommerce-bacs-bank-details .wc-bacs-bank-details-account-name { color: var(--ink); } body.libelle-dark .woocommerce-bacs-bank-details ul.order_details, body.libelle-dark ul.wc-bacs-bank-details { list-style: none; padding: 0; color: var(--ink-2); } /* Seiten /danke/ & /payment_error/ (reine Blockseiten, zweisprachig): Überschriften abstufen */ body.libelle-dark.page-id-68514 .entry-content h1, body.libelle-dark.page-id-68523 .entry-content h1 { font-size: clamp(1.8rem, 4vw, 2.6rem); } body.libelle-dark.page-id-68514 .entry-content h1 + p, body.libelle-dark.page-id-68523 .entry-content h1 + p { font-size: 1.15rem; color: var(--ink-2); margin-bottom: 2.2rem; } body.libelle-dark.page-id-68514 .entry-content > h1:first-child::before, body.libelle-dark.page-id-68523 .entry-content > h1:first-child::before { content: ''; display: inline-block; width: 0.42em; height: 0.85em; margin-right: 0.45em; vertical-align: -0.06em; border-radius: 0.2em; background: var(--rainbow); transform: skewX(-18deg); box-shadow: 0 0 14px rgba(255, 61, 154, 0.5); } body.libelle-dark.page-id-68523 .entry-content > h1:first-child::before { background: linear-gradient(180deg, var(--orange), var(--pink)); box-shadow: 0 0 14px rgba(255, 122, 69, 0.5); } /* -------------------------------------------------------------------------- 6. Kadence Form (/kontakt/) -------------------------------------------------------------------------- */ body.libelle-dark .kb-form, body.libelle-dark .wp-block-kadence-form, body.libelle-dark .kb-form-wrap { color: var(--ink-2); } body.libelle-dark .kb-form .kb-field-wrap, body.libelle-dark .kb-form .kadence-blocks-form-field { margin-bottom: 1.1rem; } body.libelle-dark .kb-form .kb-form-label, body.libelle-dark .kb-form label.kb-form-label, body.libelle-dark .kadence-blocks-form-field label { color: var(--ink-2) !important; font-weight: 500; font-size: 0.95rem; margin-bottom: 0.35rem; } body.libelle-dark .kb-form .kb-form-label .required, body.libelle-dark .kb-form .required { color: var(--pink) !important; } body.libelle-dark .kb-form .kb-field, body.libelle-dark .kb-form input.kb-field, body.libelle-dark .kb-form textarea.kb-field, body.libelle-dark .kb-form select.kb-field, body.libelle-dark .kadence-blocks-form-field input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]), body.libelle-dark .kadence-blocks-form-field textarea, body.libelle-dark .kadence-blocks-form-field select { background: var(--bg-2) !important; color: var(--ink) !important; border: 1px solid var(--line) !important; border-radius: 10px !important; padding: 0.75rem 0.95rem !important; min-height: 48px; font-size: 1rem; box-shadow: none !important; } body.libelle-dark .kb-form .kb-field:focus, body.libelle-dark .kadence-blocks-form-field textarea:focus, body.libelle-dark .kadence-blocks-form-field input:focus { border-color: var(--neon-2) !important; box-shadow: 0 0 0 3px rgba(138, 92, 255, 0.25) !important; outline: none; } body.libelle-dark .kb-form textarea.kb-field { min-height: 160px; resize: vertical; } body.libelle-dark .kb-form .kb-field-desc-wrap, body.libelle-dark .kb-form .kb-form-field-help { color: var(--ink-3); font-size: 0.85rem; } body.libelle-dark .kb-form .kb-checkbox-item, body.libelle-dark .kb-form .kb-radio-item { color: var(--ink-2); } body.libelle-dark .kb-form .kb-checkbox-item input, body.libelle-dark .kb-form .kb-radio-item input { accent-color: var(--pink); } /* Absenden-Button: Pink-Primär (style.css: button:not(…) hat 0,4,1 – hier 0,5,1) */ body.libelle-dark .kb-form .kb-submit-field .kb-forms-submit.kb-button, body.libelle-dark .kb-form .kb-submit-field button.kb-forms-submit, body.libelle-dark .kadence-blocks-form .kb-forms-submit.kb-button { background: var(--pink) !important; border-color: var(--pink) !important; color: #fff !important; box-shadow: 0 0 24px rgba(255, 61, 154, 0.45); padding: 0.8rem 1.8rem; font-size: 1rem; } body.libelle-dark .kb-form .kb-submit-field .kb-forms-submit.kb-button:hover, body.libelle-dark .kb-form .kb-submit-field button.kb-forms-submit:hover { background: #ff5cab !important; border-color: #ff5cab !important; } body.libelle-dark .kb-form .kb-submit-field .kb-forms-submit.kb-button:focus-visible { outline: 2px solid var(--neon-2); outline-offset: 3px; } body.libelle-dark .kb-form .kb-field-wrap.kb-submit-field { margin-top: 0.3rem; } /* Meldungen */ body.libelle-dark .kb-form-message, body.libelle-dark .kadence-blocks-form-message { border-radius: 12px !important; padding: 0.9rem 1.2rem !important; margin: 1rem 0 0; border: 1px solid var(--line); background: var(--bg-2) !important; color: var(--ink) !important; font-size: 0.95rem; } body.libelle-dark .kb-form-message.kb-form-success, body.libelle-dark .kadence-blocks-form-message.kadence-blocks-form-success { border-left: 4px solid var(--ok); background: rgba(126, 226, 184, 0.08) !important; } body.libelle-dark .kb-form-message.kb-form-warning, body.libelle-dark .kb-form-message.kb-form-error, body.libelle-dark .kadence-blocks-form-message.kadence-blocks-form-warning, body.libelle-dark .kadence-blocks-form-message.kadence-blocks-form-error { border-left: 4px solid var(--orange); background: rgba(255, 122, 69, 0.08) !important; } body.libelle-dark .kb-form .kb-field-wrap .kb-form-error-msg, body.libelle-dark .kb-form .kb-field.kb-field-has-error, body.libelle-dark .kadence-blocks-form-field .kb-form-error-msg { color: var(--warn); font-size: 0.85rem; } body.libelle-dark .kb-form .kb-field.kb-field-has-error, body.libelle-dark .kadence-blocks-form-field input.has-error { border-color: var(--orange) !important; } /* Kontakt-Seite: schwarze Trennlinie der Adress-Spalte (Inline-Style aus dem Editor) ins Dunkle holen */ body.libelle-dark.page-id-19 .wp-block-column[style*="border-top-color:#000000"] { border-top-color: var(--line) !important; } /* -------------------------------------------------------------------------- 7. IvyForms (/libelle-volunteers-gesucht/, Vue + Element Plus) Das Plugin schreibt eigene !important-Regeln (.ivyforms-form-wrapper-N …) in die Seite – wir übertrumpfen sie mit höherer Spezifität. -------------------------------------------------------------------------- */ body.libelle-dark .ivyforms, body.libelle-dark .ivyforms-form-wrapper, body.libelle-dark .ivyforms-frontend { --el-color-primary: var(--pink); --el-text-color-regular: var(--ink); --el-text-color-primary: var(--ink); --el-text-color-placeholder: var(--ink-3); --el-text-color-secondary: var(--ink-3); --el-fill-color-blank: var(--bg-2); --el-bg-color: var(--bg-2); --el-bg-color-overlay: var(--bg-2); --el-border-color: var(--line); --el-border-color-light: var(--line); --el-border-color-lighter: var(--line); --el-border-color-hover: var(--neon-2); --el-input-bg-color: var(--bg-2); --el-input-text-color: var(--ink); --el-input-border-color: var(--line); --el-input-hover-border-color: var(--neon-2); --el-input-focus-border-color: var(--neon-2); --el-input-placeholder-color: var(--ink-3); --el-input-icon-color: var(--ink-3); --el-disabled-bg-color: var(--bg-3); --el-disabled-text-color: var(--ink-3); --el-disabled-border-color: var(--line); --el-fill-color-light: rgba(138, 92, 255, 0.15); --el-fill-color: rgba(138, 92, 255, 0.1); --map-base-dusk-symbol-2: var(--ink-3); --map-base-dusk-symbol-1: var(--ink-2); color: var(--ink-2); font-family: var(--font-body); } body.libelle-dark .ivyforms-form-wrapper { max-width: 640px; margin: 2rem auto 1.5rem; padding: 1.6rem 1.6rem 1.8rem !important; border: 1px solid var(--line) !important; border-radius: var(--radius) !important; background: linear-gradient(160deg, rgba(27, 16, 56, 0.9), rgba(18, 10, 38, 0.9)) !important; box-shadow: none !important; } body.libelle-dark .ivyforms-form-wrapper [class*="ivyforms-form-title"], body.libelle-dark .ivyforms-form-wrapper .ivyforms-form-title { font-family: var(--font-head) !important; font-weight: 900 !important; font-size: clamp(1.5rem, 2.6vw, 2rem) !important; line-height: 1.15; color: var(--ink) !important; padding: 0 0 0.4rem !important; margin: 0 0 0.6rem; } body.libelle-dark .ivyforms-form-wrapper [class*="ivyforms-form-description"], body.libelle-dark .ivyforms-form-wrapper .ivyforms-form-description { color: var(--ink-2) !important; font-size: 1.05rem !important; } /* Labels */ body.libelle-dark .ivyforms-form-wrapper .ivyforms-form .el-form-item__label, body.libelle-dark .ivyforms-form-wrapper .ivyforms-form .ivyforms-form-item__left-label, body.libelle-dark .ivyforms-form-wrapper .ivyforms-form .ivyforms-form-item__label, body.libelle-dark .ivyforms-form-wrapper .ivyforms-form .ivyforms-form-item__label span, body.libelle-dark .ivyforms-form-wrapper .ivyforms-form label, body.libelle-dark .ivyforms-form-wrapper .ivyforms-form .ivyforms-label { color: var(--ink-2) !important; font-family: var(--font-body) !important; font-weight: 500 !important; font-size: 0.95rem !important; line-height: 1.4; } body.libelle-dark .ivyforms-form-wrapper .ivyforms-form .el-form-item__label { margin-bottom: 0.35rem !important; padding: 0 !important; } body.libelle-dark .ivyforms-form-wrapper .ivyforms-form .ivyforms-form-item__asterisk, body.libelle-dark .ivyforms-form-wrapper .ivyforms-form .el-form-item.is-required .el-form-item__label::before { color: var(--pink) !important; } body.libelle-dark .ivyforms-form-wrapper .ivyforms-form .ivyforms-form-item__info-text, body.libelle-dark .ivyforms-form-wrapper .ivyforms-form .el-form-item .ivyforms-form-item__info-text { color: var(--ink-3) !important; --ivyforms-info-color: var(--ink-3) !important; font-size: 0.85rem; } /* Eingabefelder (Element Plus: .el-input__wrapper trägt Rahmen & Hintergrund) */ body.libelle-dark .ivyforms-form-wrapper .ivyforms-form .ivyforms-field .el-input__wrapper, body.libelle-dark .ivyforms-form-wrapper .ivyforms-form .ivyforms-field .el-textarea__inner, body.libelle-dark .ivyforms-form-wrapper .ivyforms-form .ivyforms-field .el-select__wrapper, body.libelle-dark .ivyforms-form-wrapper .ivyforms-form .ivyforms-field .vue-tel-input, body.libelle-dark .ivyforms-form-wrapper .ivyforms-form .ivyforms-input.el-input .el-input__wrapper { background: var(--bg-2) !important; background-color: var(--bg-2) !important; color: var(--ink) !important; border: 1px solid var(--line) !important; border-radius: 10px !important; box-shadow: none !important; min-height: 48px; padding: 0.3rem 0.9rem !important; transition: border-color 0.15s ease, box-shadow 0.15s ease; } body.libelle-dark .ivyforms-form-wrapper .ivyforms-form .ivyforms-field .el-textarea__inner { min-height: 140px !important; padding: 0.7rem 0.9rem !important; resize: vertical; line-height: 1.5; } body.libelle-dark .ivyforms-form-wrapper .ivyforms-form .ivyforms-field .el-input__wrapper.is-focus, body.libelle-dark .ivyforms-form-wrapper .ivyforms-form .ivyforms-field:focus-within .el-input__wrapper, body.libelle-dark .ivyforms-form-wrapper .ivyforms-form .ivyforms-field:focus-within .el-textarea__inner, body.libelle-dark .ivyforms-form-wrapper .ivyforms-form .ivyforms-field:focus-within .el-select__wrapper, body.libelle-dark .ivyforms-form-wrapper .ivyforms-form .ivyforms-field:focus-within .vue-tel-input, body.libelle-dark .ivyforms-form-wrapper .ivyforms-form .ivyforms-input.el-input:focus-within .el-input__wrapper { border-color: var(--neon-2) !important; box-shadow: 0 0 0 3px rgba(138, 92, 255, 0.25) !important; } body.libelle-dark .ivyforms-form-wrapper .ivyforms-form .ivyforms-field input.el-input__inner, body.libelle-dark .ivyforms-form-wrapper .ivyforms-form .ivyforms-field .el-input__inner, body.libelle-dark .ivyforms-form-wrapper .ivyforms-form .ivyforms-field input, body.libelle-dark .ivyforms-form-wrapper .ivyforms-form .ivyforms-field textarea, body.libelle-dark .ivyforms-form-wrapper .ivyforms-form .ivyforms-field .vti__input, body.libelle-dark .ivyforms-form-wrapper .ivyforms-form .ivyforms-field:focus-within input, body.libelle-dark .ivyforms-form-wrapper .ivyforms-form .ivyforms-field:focus-within .el-input__inner, body.libelle-dark .ivyforms-form-wrapper .ivyforms-form .ivyforms-field:focus-within textarea, body.libelle-dark .ivyforms-form-wrapper .ivyforms-form .ivyforms-field:focus-within .vti__input, body.libelle-dark .ivyforms-form-wrapper .ivyforms-form .ivyforms-field .el-select__placeholder, body.libelle-dark .ivyforms-form-wrapper .ivyforms-form .ivyforms-field .el-select__selected-item { color: var(--ink) !important; background: transparent !important; border: 0 !important; box-shadow: none !important; font-family: var(--font-body); font-size: 1rem; -webkit-text-fill-color: var(--ink); } body.libelle-dark .ivyforms-form-wrapper .ivyforms-form .ivyforms-field input::placeholder, body.libelle-dark .ivyforms-form-wrapper .ivyforms-form .ivyforms-field textarea::placeholder, body.libelle-dark .ivyforms-form-wrapper .ivyforms-form .ivyforms-field .el-select__placeholder.is-transparent { color: var(--ink-3) !important; -webkit-text-fill-color: var(--ink-3); } body.libelle-dark .ivyforms-form-wrapper .ivyforms-form .ivyforms-field .el-select__caret, body.libelle-dark .ivyforms-form-wrapper .ivyforms-form .ivyforms-field .el-select__icon, body.libelle-dark .ivyforms-form-wrapper .ivyforms-form .ivyforms-field .el-input__icon { color: var(--ink-3) !important; } body.libelle-dark .ivyforms-form-wrapper .ivyforms-form .ivyforms-field .ivyforms-icon svg, body.libelle-dark .ivyforms-form-wrapper .ivyforms-form .ivyforms-field .ivyforms-icon svg path { fill: var(--ink-3) !important; } /* Telefonfeld (vue-tel-input): Länderwahl links */ body.libelle-dark .ivyforms-form-wrapper .ivyforms-form .ivyforms-field .vue-tel-input { padding: 0 !important; display: flex; align-items: stretch; overflow: hidden; } body.libelle-dark .ivyforms-form-wrapper .ivyforms-form .ivyforms-field .vti__dropdown { background: rgba(138, 92, 255, 0.1) !important; border-right: 1px solid var(--line); border-radius: 0; padding: 0 0.6rem; } body.libelle-dark .ivyforms-form-wrapper .ivyforms-form .ivyforms-field .vti__dropdown:hover, body.libelle-dark .ivyforms-form-wrapper .ivyforms-form .ivyforms-field .vti__dropdown.open { background: rgba(138, 92, 255, 0.2) !important; } body.libelle-dark .ivyforms-form-wrapper .ivyforms-form .ivyforms-field .vti__input { padding: 0.3rem 0.9rem !important; min-height: 46px; } body.libelle-dark .ivyforms-form-wrapper .ivyforms-form .ivyforms-field .vti__dropdown-list { background: var(--bg-2) !important; color: var(--ink) !important; border: 1px solid var(--line) !important; border-radius: 12px; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5); z-index: 20; } body.libelle-dark .ivyforms-form-wrapper .ivyforms-form .ivyforms-field .vti__dropdown-item { color: var(--ink-2); padding: 0.45rem 0.8rem; } body.libelle-dark .ivyforms-form-wrapper .ivyforms-form .ivyforms-field .vti__dropdown-item strong { color: var(--ink); } body.libelle-dark .ivyforms-form-wrapper .ivyforms-form .ivyforms-field .vti__dropdown-item.highlighted, body.libelle-dark .ivyforms-form-wrapper .ivyforms-form .ivyforms-field .vti__dropdown-item:hover { background: rgba(138, 92, 255, 0.25) !important; color: var(--ink); } body.libelle-dark .ivyforms-form-wrapper .ivyforms-form .ivyforms-field .vti__search_box { background: var(--bg) !important; color: var(--ink) !important; border: 1px solid var(--line) !important; border-radius: 8px; } /* Checkbox/Radio/Switch */ body.libelle-dark .ivyforms-form-wrapper .ivyforms-form .el-checkbox__label, body.libelle-dark .ivyforms-form-wrapper .ivyforms-form .el-radio__label { color: var(--ink-2) !important; } body.libelle-dark .ivyforms-form-wrapper .ivyforms-form .el-checkbox__inner, body.libelle-dark .ivyforms-form-wrapper .ivyforms-form .el-radio__inner { background: var(--bg-2) !important; border-color: var(--line) !important; } body.libelle-dark .ivyforms-form-wrapper .ivyforms-form .el-checkbox__input.is-checked .el-checkbox__inner, body.libelle-dark .ivyforms-form-wrapper .ivyforms-form .el-radio__input.is-checked .el-radio__inner { background: var(--pink) !important; border-color: var(--pink) !important; } /* Fehler */ body.libelle-dark .ivyforms-form-wrapper .ivyforms-form .el-form-item__error, body.libelle-dark .ivyforms-form-wrapper .ivyforms-form .ivyforms-form-item__error, body.libelle-dark .ivyforms-form-wrapper .ivyforms-form .ivyforms-field-error { color: var(--warn) !important; font-size: 0.85rem; } body.libelle-dark .ivyforms-form-wrapper .ivyforms-form .ivyforms-form-item.is-error .el-input__wrapper, body.libelle-dark .ivyforms-form-wrapper .ivyforms-form .ivyforms-form-item.is-error .el-textarea__inner, body.libelle-dark .ivyforms-form-wrapper .ivyforms-form .ivyforms-form-item.is-error .vue-tel-input, body.libelle-dark .ivyforms-form-wrapper .ivyforms-form .el-form-item.is-error .el-input__wrapper { border-color: var(--orange) !important; } /* Absenden */ body.libelle-dark .ivyforms-form-wrapper .ivyforms-form-submit { margin-top: 0.4rem; } body.libelle-dark .ivyforms-form-wrapper .ivyforms-form-submit .ivyforms-button-action, body.libelle-dark .ivyforms-form-wrapper .ivyforms-form-submit button.ivyforms-button-action, body.libelle-dark .ivyforms-form-wrapper .ivyforms-form-page-navigation .ivyforms-button-action, body.libelle-dark .ivyforms-form-wrapper .ivyforms-form-page-navigation button.ivyforms-button-action { display: inline-flex !important; align-items: center; justify-content: center; gap: 0.5rem; min-height: 0 !important; height: auto !important; width: auto !important; padding: 0.8rem 1.8rem !important; border-radius: 999px !important; border: 1px solid var(--pink) !important; background: var(--pink) !important; background-color: var(--pink) !important; color: #fff !important; font-family: var(--font-body) !important; font-weight: 700 !important; font-size: 1rem !important; letter-spacing: 0.01em; line-height: 1.2; box-shadow: 0 0 24px rgba(255, 61, 154, 0.45) !important; cursor: pointer; transition: transform 0.15s ease, background 0.15s ease, box-shadow 0.15s ease !important; } body.libelle-dark .ivyforms-form-wrapper .ivyforms-form-submit .ivyforms-button-action:hover, body.libelle-dark .ivyforms-form-wrapper .ivyforms-form-submit button.ivyforms-button-action:hover { background: #ff5cab !important; background-color: #ff5cab !important; border-color: #ff5cab !important; color: #fff !important; transform: translateY(-1px); box-shadow: 0 0 32px rgba(255, 61, 154, 0.6) !important; } body.libelle-dark .ivyforms-form-wrapper .ivyforms-form-submit .ivyforms-button-action span, body.libelle-dark .ivyforms-form-wrapper .ivyforms-form-submit .ivyforms-button-action .ivyforms-button__text { color: #fff !important; } body.libelle-dark .ivyforms-form-wrapper .ivyforms-form-page-navigation .ivyforms-button-action.ivyforms-button--secondary, body.libelle-dark .ivyforms-form-wrapper .ivyforms-form-page-navigation .ivyforms-button-action[class*="prev"] { background: rgba(138, 92, 255, 0.08) !important; border-color: var(--neon-2) !important; color: var(--ink) !important; box-shadow: none !important; } body.libelle-dark .ivyforms-form-wrapper .ivyforms-form-submit .ivyforms-button-action.is-loading, body.libelle-dark .ivyforms-form-wrapper .ivyforms-form-submit .ivyforms-button-action[disabled] { opacity: 0.6; cursor: wait; transform: none; } /* Erfolgs-/Fehlermeldung nach dem Absenden */ body.libelle-dark .ivyforms-form-wrapper .ivyforms-form-success, body.libelle-dark .ivyforms-form-wrapper .ivyforms-success-message, body.libelle-dark .ivyforms-form-wrapper .ivyforms-confirmation-message, body.libelle-dark .ivyforms-form-wrapper [class*="ivyforms-form-confirmation"] { padding: 1rem 1.2rem; border: 1px solid var(--line) !important; border-left: 4px solid var(--ok) !important; border-radius: 12px !important; background: rgba(126, 226, 184, 0.08) !important; color: var(--ink) !important; } body.libelle-dark .ivyforms-form-wrapper .ivyforms-form-error, body.libelle-dark .ivyforms-form-wrapper .ivyforms-error-message, body.libelle-dark .ivyforms-form-wrapper [class*="ivyforms-form-error"] { padding: 1rem 1.2rem; border: 1px solid var(--line) !important; border-left: 4px solid var(--orange) !important; border-radius: 12px !important; background: rgba(255, 122, 69, 0.08) !important; color: var(--ink) !important; } /* Lade-Skelett vor dem Vue-Mount */ body.libelle-dark .ivyforms-skeleton { padding: 0; } body.libelle-dark .ivyforms-skeleton [class*="ivyforms-skeleton-"] { background: rgba(176, 140, 255, 0.12) !important; border-radius: 8px; } /* Teleportierte Dropdowns (Element Plus hängt sie an ) – gilt auch für Amelia */ body.libelle-dark .el-popper.is-light, body.libelle-dark .el-select-dropdown, body.libelle-dark .el-select__popper, body.libelle-dark .el-picker__popper, body.libelle-dark .el-popper.is-pure { --el-bg-color-overlay: var(--bg-2); --el-text-color-regular: var(--ink); --el-text-color-primary: var(--ink); --el-text-color-secondary: var(--ink-3); --el-border-color-light: var(--line); --el-border-color-lighter: var(--line); --el-border-color: var(--line); --el-fill-color-light: rgba(138, 92, 255, 0.18); --el-fill-color: rgba(138, 92, 255, 0.1); --el-color-primary: var(--pink); --el-color-primary-light-9: rgba(255, 61, 154, 0.15); --el-bg-color: var(--bg-2); --el-box-shadow-light: 0 20px 50px rgba(0, 0, 0, 0.5); background: var(--bg-2) !important; color: var(--ink) !important; border: 1px solid var(--line) !important; border-radius: 12px !important; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5) !important; font-family: var(--font-body); } body.libelle-dark .el-popper.is-light .el-popper__arrow::before, body.libelle-dark .el-select__popper .el-popper__arrow::before { background: var(--bg-2) !important; border-color: var(--line) !important; } body.libelle-dark .el-select-dropdown__item, body.libelle-dark .el-select-dropdown .el-select-dropdown__item { color: var(--ink-2) !important; background: transparent; } body.libelle-dark .el-select-dropdown__item.is-hovering, body.libelle-dark .el-select-dropdown__item:hover, body.libelle-dark .el-select-dropdown__item.hover { background: rgba(138, 92, 255, 0.22) !important; color: var(--ink) !important; } body.libelle-dark .el-select-dropdown__item.is-selected, body.libelle-dark .el-select-dropdown__item.selected { color: var(--pink) !important; font-weight: 700; } body.libelle-dark .el-select-dropdown__empty, body.libelle-dark .el-select-dropdown__loading { color: var(--ink-3); } body.libelle-dark .el-scrollbar__bar .el-scrollbar__thumb { background: rgba(176, 140, 255, 0.4); } /* -------------------------------------------------------------------------- 8. Amelia Step-Booking (/bdsm-kinky-raum-mieten/, [ameliastepbooking]) Amelia setzt seine Farben als CSS-Variablen inline auf #amelia-container und auf Unterelementen → hier mit !important überschreiben. -------------------------------------------------------------------------- */ body.libelle-dark .amelia-v2-booking, body.libelle-dark .amelia-v2-booking #amelia-container, body.libelle-dark .amelia-v2-booking .am-fs__wrapper, body.libelle-dark [id^="amelia-app-booking"], body.libelle-dark .amelia-app-booking { --am-c-primary: var(--pink) !important; --am-c-success: var(--ok) !important; --am-c-error: var(--orange) !important; --am-c-warning: var(--warn) !important; --am-c-main-bgr: var(--bg-3) !important; --am-c-main-heading-text: var(--ink) !important; --am-c-main-text: var(--ink-2) !important; --am-c-sb-bgr: var(--bg-2) !important; --am-c-sb-text: var(--ink) !important; --am-c-inp-bgr: var(--bg-2) !important; --am-c-inp-border: var(--line) !important; --am-c-inp-text: var(--ink) !important; --am-c-inp-placeholder: var(--ink-3) !important; --am-c-drop-bgr: var(--bg-2) !important; --am-c-drop-text: var(--ink) !important; --am-c-btn-prim: var(--pink) !important; --am-c-btn-prim-text: #ffffff !important; --am-c-btn-sec: var(--bg-2) !important; --am-c-btn-sec-text: var(--ink) !important; --am-c-skeleton-op20: rgba(176, 140, 255, 0.15) !important; --am-c-skeleton-op60: rgba(176, 140, 255, 0.35) !important; --am-c-skeleton-sb-op20: rgba(176, 140, 255, 0.15) !important; --am-c-skeleton-sb-op60: rgba(176, 140, 255, 0.35) !important; --am-c-main-heading-text-op15: rgba(176, 140, 255, 0.25) !important; --am-c-main-text-op10: rgba(244, 240, 255, 0.1) !important; --am-c-main-text-op20: rgba(244, 240, 255, 0.2) !important; --am-c-main-text-op30: rgba(244, 240, 255, 0.3) !important; --am-c-main-text-op60: rgba(244, 240, 255, 0.6) !important; --am-c-sb-text-op5: rgba(244, 240, 255, 0.05) !important; --am-c-sb-text-op10: rgba(244, 240, 255, 0.1) !important; --am-c-sb-text-op60: rgba(244, 240, 255, 0.6) !important; --am-c-scroll-op30: rgba(176, 140, 255, 0.3) !important; --am-c-scroll-op10: rgba(176, 140, 255, 0.1) !important; --am-font-family: var(--font-body) !important; --am-brad-main: 0 var(--radius) var(--radius) 0 !important; color: var(--ink-2); } body.libelle-dark .amelia-v2-booking .am-fs-sb, body.libelle-dark .amelia-v2-booking .am-fs__main { --am-c-sb-text-op5: rgba(244, 240, 255, 0.05) !important; --am-c-sb-text-op10: rgba(244, 240, 255, 0.1) !important; --am-c-sb-text-op60: rgba(244, 240, 255, 0.6) !important; --am-c-scroll-op30: rgba(176, 140, 255, 0.3) !important; --am-c-scroll-op10: rgba(176, 140, 255, 0.1) !important; } body.libelle-dark .amelia-v2-booking .am-fs__main-heading { --am-c-main-heading-text-op15: rgba(176, 140, 255, 0.25) !important; } /* Rahmen um den ganzen Buchungsdialog */ body.libelle-dark .amelia-v2-booking .am-fs__wrapper { border: 1px solid var(--line) !important; border-radius: var(--radius) !important; overflow: hidden; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55), 0 0 60px rgba(138, 92, 255, 0.12) !important; } body.libelle-dark .amelia-v2-booking .am-fs-sb { border-right: 1px solid var(--line); border-radius: var(--radius) 0 0 var(--radius) !important; } body.libelle-dark .amelia-v2-booking .am-fs-sb__step { border-radius: 10px; } body.libelle-dark .amelia-v2-booking .am-fs-sb__step-heading, body.libelle-dark .amelia-v2-booking .am-fs-sb__support-heading, body.libelle-dark .amelia-v2-booking .am-fs-sb__support-email, body.libelle-dark .amelia-v2-booking .am-fs-sb__menu-text { color: var(--ink) !important; font-family: var(--font-body) !important; } body.libelle-dark .amelia-v2-booking .am-fs-sb__support-heading { color: var(--ink-3) !important; } body.libelle-dark .amelia-v2-booking .am-fs-sb__support-email:hover { color: var(--neon-2) !important; } body.libelle-dark .amelia-v2-booking .am-fs-sb__step-checker { border-color: rgba(244, 240, 255, 0.35) !important; } body.libelle-dark .amelia-v2-booking .am-fs__main-heading-inner-title, body.libelle-dark .amelia-v2-booking .am-fs__main-heading-inner { font-family: var(--font-head) !important; font-weight: 900 !important; color: var(--ink) !important; font-size: 1.35rem; } body.libelle-dark .amelia-v2-booking .am-fs__main-heading { border-bottom: 1px solid var(--line); } body.libelle-dark .amelia-v2-booking .am-fs__main-footer { border-top: 1px solid var(--line); } body.libelle-dark .amelia-v2-booking .am-advsc__time-zone, body.libelle-dark .amelia-v2-booking .am-fs-dt__timezone { color: var(--neon-2) !important; background: rgba(138, 92, 255, 0.15) !important; border-radius: 999px; } /* Selects (Monat/Jahr, Felder) */ body.libelle-dark .amelia-v2-booking .am-select, body.libelle-dark .amelia-v2-booking .el-select.am-select, body.libelle-dark .amelia-v2-booking .am-select-wrapper .el-select { --am-c-select-bgr: var(--bg-2) !important; --am-c-select-border: var(--line) !important; --am-c-select-text: var(--ink) !important; --am-c-select-placeholder: var(--ink-3) !important; --am-c-select-shadow: transparent !important; --am-c-select-text-op60: rgba(244, 240, 255, 0.6) !important; --am-c-select-text-op50: rgba(244, 240, 255, 0.5) !important; --am-c-select-text-op40: rgba(244, 240, 255, 0.4) !important; --am-c-select-text-op03: rgba(244, 240, 255, 0.04) !important; --am-c-select-text-op06: rgba(244, 240, 255, 0.08) !important; --am-font-family: var(--font-body) !important; } body.libelle-dark .amelia-v2-booking .am-select .el-select__wrapper, body.libelle-dark .amelia-v2-booking .am-select .el-input__wrapper { background: var(--bg-2) !important; border: 1px solid var(--line) !important; border-radius: 10px !important; box-shadow: none !important; color: var(--ink) !important; } body.libelle-dark .amelia-v2-booking .am-select .el-select__wrapper.is-focused, body.libelle-dark .amelia-v2-booking .am-select .el-select__wrapper:hover { border-color: var(--neon-2) !important; } body.libelle-dark .amelia-v2-booking .am-select .el-select__placeholder, body.libelle-dark .amelia-v2-booking .am-select .el-select__selected-item, body.libelle-dark .amelia-v2-booking .am-select .el-input__inner { color: var(--ink) !important; -webkit-text-fill-color: var(--ink); } body.libelle-dark .amelia-v2-booking .am-select .el-select__caret, body.libelle-dark .amelia-v2-booking .am-select .am-icon-arrow-down { color: var(--ink-3) !important; } /* Eingabefelder (Schritt „Your Information“) */ body.libelle-dark .amelia-v2-booking .am-input, body.libelle-dark .amelia-v2-booking .el-input.am-input, body.libelle-dark .amelia-v2-booking .am-textarea, body.libelle-dark .amelia-v2-booking .am-phone-field, body.libelle-dark .amelia-v2-booking .am-input-wrapper { --am-c-inp-bgr: var(--bg-2) !important; --am-c-inp-border: var(--line) !important; --am-c-inp-text: var(--ink) !important; --am-c-inp-placeholder: var(--ink-3) !important; --am-c-inp-text-op60: rgba(244, 240, 255, 0.6) !important; --am-c-inp-text-op40: rgba(244, 240, 255, 0.4) !important; --am-c-inp-text-op10: rgba(244, 240, 255, 0.1) !important; --am-font-family: var(--font-body) !important; } body.libelle-dark .amelia-v2-booking .am-input .el-input__wrapper, body.libelle-dark .amelia-v2-booking .am-input .el-input__inner, body.libelle-dark .amelia-v2-booking .am-textarea .el-textarea__inner, body.libelle-dark .amelia-v2-booking .am-phone-field .el-input__wrapper, body.libelle-dark .amelia-v2-booking input.el-input__inner { background: var(--bg-2) !important; color: var(--ink) !important; border-color: var(--line) !important; border-radius: 10px !important; box-shadow: none !important; -webkit-text-fill-color: var(--ink); } body.libelle-dark .amelia-v2-booking .am-input .el-input__inner, body.libelle-dark .amelia-v2-booking .am-phone-field .el-input__inner { border: 0 !important; background: transparent !important; } body.libelle-dark .amelia-v2-booking .am-input .el-input__wrapper.is-focus, body.libelle-dark .amelia-v2-booking .am-textarea .el-textarea__inner:focus { border-color: var(--neon-2) !important; box-shadow: 0 0 0 3px rgba(138, 92, 255, 0.25) !important; } body.libelle-dark .amelia-v2-booking .el-form-item__label, body.libelle-dark .amelia-v2-booking .am-fs-ci__label, body.libelle-dark .amelia-v2-booking label { color: var(--ink-2) !important; font-family: var(--font-body) !important; } body.libelle-dark .amelia-v2-booking .el-form-item__error { color: var(--warn) !important; } body.libelle-dark .amelia-v2-booking .am-checkbox, body.libelle-dark .amelia-v2-booking .el-checkbox { --am-c-primary: var(--pink) !important; --am-c-main-text: var(--ink-2) !important; } body.libelle-dark .amelia-v2-booking .el-checkbox__label { color: var(--ink-2) !important; } body.libelle-dark .amelia-v2-booking .el-checkbox__inner { background: var(--bg-2) !important; border-color: var(--line) !important; } body.libelle-dark .amelia-v2-booking .el-checkbox__input.is-checked .el-checkbox__inner { background: var(--pink) !important; border-color: var(--pink) !important; } /* Kalender */ body.libelle-dark .amelia-v2-booking .am-advsc__wrapper, body.libelle-dark .amelia-v2-booking .am-advsc, body.libelle-dark .amelia-v2-booking .am-fs-dt__calendar { --am-c-cal-low: var(--neon-2) !important; --am-c-cal-high: var(--neon-2) !important; --am-c-cal-init: var(--neon-2) !important; --am-c-cal-low-text: var(--ink) !important; --am-c-cal-high-text: var(--ink) !important; --am-c-cal-init-text: var(--ink) !important; --am-c-cal-low-op10: rgba(176, 140, 255, 0.1) !important; --am-c-cal-low-op20: rgba(176, 140, 255, 0.2) !important; --am-c-cal-low-op30: rgba(176, 140, 255, 0.3) !important; --am-c-cal-low-op60: rgba(176, 140, 255, 0.6) !important; --am-c-cal-low-op80: rgba(176, 140, 255, 0.8) !important; --am-c-cal-high-op10: rgba(176, 140, 255, 0.1) !important; --am-c-cal-high-op20: rgba(176, 140, 255, 0.2) !important; --am-c-cal-high-op30: rgba(176, 140, 255, 0.3) !important; --am-c-cal-high-op60: rgba(176, 140, 255, 0.6) !important; --am-c-cal-high-op80: rgba(176, 140, 255, 0.8) !important; --am-c-cal-init-op10: rgba(176, 140, 255, 0.1) !important; --am-c-cal-init-op20: rgba(176, 140, 255, 0.2) !important; --am-c-cal-init-op30: rgba(176, 140, 255, 0.3) !important; --am-c-cal-init-op60: rgba(176, 140, 255, 0.6) !important; --am-c-cal-selected: var(--pink) !important; --am-c-cal-selected-text: #ffffff !important; --am-c-cal-selected-op80: rgba(255, 61, 154, 0.8) !important; --am-c-cal-disabled: rgba(244, 240, 255, 0.04) !important; --am-c-cal-disabled-text: var(--ink-3) !important; --am-c-cal-disabled-op10: rgba(244, 240, 255, 0.06) !important; --am-c-cal-disabled-op60: rgba(244, 240, 255, 0.25) !important; --am-c-cal-waiting: rgba(255, 216, 74, 0.12) !important; --am-c-cal-waiting-text: var(--yellow) !important; --am-c-cal-waiting-op40: rgba(255, 216, 74, 0.4) !important; --am-c-advsc-bgr-op10: rgba(176, 140, 255, 0.12) !important; } body.libelle-dark .amelia-v2-booking .am-advsc__dayGridMonth-header-cell { color: var(--ink-3) !important; font-weight: 700; } body.libelle-dark .amelia-v2-booking .am-advsc__dayGridMonth-cell { border-radius: 10px !important; font-family: var(--font-body); } body.libelle-dark .amelia-v2-booking .am-advsc__dayGridMonth-disabled { color: var(--ink-3) !important; opacity: 0.55; } body.libelle-dark .amelia-v2-booking .am-advsc__slot-wrapper .am-advsc__slot, body.libelle-dark .amelia-v2-booking .am-advsc__slot { border-radius: 10px !important; } body.libelle-dark .amelia-v2-booking .am-advsc__duration, body.libelle-dark .amelia-v2-booking .am-advsc__occupancy { color: var(--ink-2) !important; } /* Buttons (Weiter/Zurück, Monatspfeile) */ body.libelle-dark .amelia-v2-booking .am-button { --am-font-family: var(--font-body) !important; border-radius: 999px !important; font-weight: 700 !important; transition: transform 0.15s ease, background 0.15s ease, box-shadow 0.15s ease; } body.libelle-dark .amelia-v2-booking .am-button--primary, body.libelle-dark .amelia-v2-booking .am-button--primary.am-button--filled, body.libelle-dark .amelia-v2-booking .am-button-continue { --am-c-btn-first: var(--pink) !important; --am-c-btn-second: #ffffff !important; --am-c-btn-first-op80: rgba(255, 61, 154, 0.85) !important; --am-c-btn-first-op30: rgba(255, 61, 154, 0.3) !important; --am-c-btn-first-op10: rgba(255, 61, 154, 0.1) !important; --am-c-btn-second-op80: rgba(255, 255, 255, 0.8) !important; background: var(--pink) !important; border-color: var(--pink) !important; color: #fff !important; box-shadow: 0 0 24px rgba(255, 61, 154, 0.45) !important; } body.libelle-dark .amelia-v2-booking .am-button--primary:hover, body.libelle-dark .amelia-v2-booking .am-button-continue:hover { background: #ff5cab !important; border-color: #ff5cab !important; transform: translateY(-1px); } body.libelle-dark .amelia-v2-booking .am-button--primary.is-disabled, body.libelle-dark .amelia-v2-booking .am-button--primary[disabled], body.libelle-dark .amelia-v2-booking .am-button-continue.is-disabled { opacity: 0.45; box-shadow: none !important; transform: none; cursor: not-allowed; } body.libelle-dark .amelia-v2-booking .am-button--secondary, body.libelle-dark .amelia-v2-booking .am-button--plain, body.libelle-dark .amelia-v2-booking .am-button--default { --am-c-btn-first: var(--ink) !important; --am-c-btn-second: var(--bg-2) !important; --am-c-btn-first-op80: rgba(244, 240, 255, 0.8) !important; --am-c-btn-first-op30: rgba(176, 140, 255, 0.3) !important; --am-c-btn-first-op10: rgba(176, 140, 255, 0.12) !important; --am-c-btn-second-op80: rgba(18, 10, 38, 0.8) !important; background: rgba(138, 92, 255, 0.08) !important; border: 1px solid var(--neon-2) !important; color: var(--ink) !important; } body.libelle-dark .amelia-v2-booking .am-button--secondary:hover, body.libelle-dark .amelia-v2-booking .am-button--plain:hover { background: rgba(138, 92, 255, 0.2) !important; color: #fff !important; } body.libelle-dark .amelia-v2-booking .am-button.is-icon-only { width: 40px; height: 40px; padding: 0 !important; } body.libelle-dark .amelia-v2-booking .am-button-group { gap: 0.4rem; } /* Zusammenfassung / Zahlung / Dialoge */ body.libelle-dark .amelia-v2-booking .am-fs-pm__item, body.libelle-dark .amelia-v2-booking .am-fs-pm__item-wrapper, body.libelle-dark .amelia-v2-booking .am-fs-ps__wrapper, body.libelle-dark .amelia-v2-booking .am-fs-cs__item, body.libelle-dark .amelia-v2-booking .am-fs-cs__wrapper, body.libelle-dark .amelia-v2-booking .am-fs-sv__item, body.libelle-dark .amelia-v2-booking .am-cab__item, body.libelle-dark .amelia-v2-booking .am-fs-bi__item { background: var(--bg-2) !important; border: 1px solid var(--line) !important; border-radius: 12px !important; color: var(--ink-2) !important; } body.libelle-dark .amelia-v2-booking .am-fs-pm__item.am-fs-pm__item-selected, body.libelle-dark .amelia-v2-booking .am-fs-pm__item:has(input:checked), body.libelle-dark .amelia-v2-booking .am-fs-cs__item.is-selected { border-color: var(--pink) !important; } body.libelle-dark .amelia-v2-booking .am-fs-pm__item-heading, body.libelle-dark .amelia-v2-booking .am-fs-ps__item-label, body.libelle-dark .amelia-v2-booking .am-fs-ps__item-value, body.libelle-dark .amelia-v2-booking .am-fs-ps__price-heading, body.libelle-dark .amelia-v2-booking .am-fs-cs__item-heading { color: var(--ink) !important; } body.libelle-dark .amelia-v2-booking .am-fs-ps__item-value--total, body.libelle-dark .amelia-v2-booking .am-fs-ps__total { color: var(--green) !important; font-weight: 700; } body.libelle-dark .amelia-v2-booking .am-fs-ps__divider, body.libelle-dark .amelia-v2-booking .am-divider { border-color: var(--line) !important; } body.libelle-dark .amelia-v2-booking .am-fs-cgf__heading, body.libelle-dark .amelia-v2-booking .am-fs-ci__heading, body.libelle-dark .amelia-v2-booking .am-fs-pm__heading, body.libelle-dark .amelia-v2-booking .am-heading { color: var(--ink) !important; font-family: var(--font-head) !important; } body.libelle-dark .amelia-v2-booking .am-fs-cs__success-heading, body.libelle-dark .amelia-v2-booking .am-fs-cs__heading { color: var(--ink) !important; } body.libelle-dark .amelia-v2-booking .am-fs-cs__success-icon, body.libelle-dark .amelia-v2-booking .am-fs-cs__icon { color: var(--green) !important; } body.libelle-dark .amelia-v2-booking .el-alert, body.libelle-dark .amelia-v2-booking .am-alert { background: rgba(255, 184, 107, 0.1) !important; border: 1px solid rgba(255, 184, 107, 0.4) !important; color: var(--ink) !important; border-radius: 12px !important; } body.libelle-dark .amelia-v2-booking .el-alert__title, body.libelle-dark .amelia-v2-booking .el-alert__description { color: var(--ink) !important; } body.libelle-dark .amelia-v2-booking .am-skeleton, body.libelle-dark .amelia-v2-booking .el-skeleton__item { background: rgba(176, 140, 255, 0.15) !important; } body.libelle-dark .amelia-v2-booking .am-fs__main-content::-webkit-scrollbar-thumb, body.libelle-dark .amelia-v2-booking .am-fs-sb::-webkit-scrollbar-thumb { background: rgba(176, 140, 255, 0.3); border-radius: 999px; } body.libelle-dark .amelia-v2-booking a:not(.am-button) { color: var(--neon-2); } /* Amelia-Dropdowns, die an gehängt werden */ body.libelle-dark .am-select-popper, body.libelle-dark .el-popper[class*="am-"], body.libelle-dark .am-dropdown, body.libelle-dark .el-select-dropdown.am-select-popper { --am-c-drop-bgr: var(--bg-2) !important; --am-c-drop-text: var(--ink) !important; --am-c-drop-text-op10: rgba(244, 240, 255, 0.1) !important; --am-c-drop-text-op5: rgba(244, 240, 255, 0.05) !important; --am-c-select-bgr: var(--bg-2) !important; --am-c-select-text: var(--ink) !important; --am-c-select-border: var(--line) !important; background: var(--bg-2) !important; color: var(--ink) !important; border-color: var(--line) !important; } body.libelle-dark .am-select-popper .el-select-dropdown__item, body.libelle-dark .el-popper[class*="am-"] .el-select-dropdown__item { color: var(--ink-2) !important; } body.libelle-dark .am-select-popper .el-select-dropdown__item.is-hovering, body.libelle-dark .am-select-popper .el-select-dropdown__item:hover { background: rgba(138, 92, 255, 0.22) !important; color: var(--ink) !important; } body.libelle-dark .am-select-popper .el-select-dropdown__item.is-selected { color: var(--pink) !important; } /* Amelia-Dialoge (Fehler/Info) */ body.libelle-dark .am-dialog, body.libelle-dark .el-dialog.am-dialog, body.libelle-dark .am-dialog .el-dialog__body, body.libelle-dark .el-overlay .el-dialog { background: var(--bg-2) !important; color: var(--ink) !important; border: 1px solid var(--line); border-radius: var(--radius) !important; } body.libelle-dark .el-overlay { background: rgba(7, 4, 15, 0.75) !important; } body.libelle-dark .el-dialog__title, body.libelle-dark .am-dialog__title { color: var(--ink) !important; font-family: var(--font-head); } body.libelle-dark .el-dialog__headerbtn .el-dialog__close { color: var(--ink-2) !important; } /* Gruppenseite (Group/Card-Layout) – falls [ameliastepbooking layout=…] später wechselt */ body.libelle-dark .am-fs__wrapper .am-fs-sb__step-selection, body.libelle-dark .am-fs-sb__step-selection-item { color: var(--ink-2) !important; } /* -------------------------------------------------------------------------- 9. Strong Testimonials (Startseite, [testimonial_view id=3|4]) style.css setzt Schrift & Farben – hier Feinschliff: Anführungs-Akzent, Abstand -------------------------------------------------------------------------- */ body.libelle-dark .strong-view { margin: 0; } body.libelle-dark .strong-view .wpmtst-testimonial, body.libelle-dark .strong-view .testimonial { position: relative; padding: 0.5rem 0 0.5rem 1.2rem; border-left: 4px solid transparent; border-image: linear-gradient(180deg, var(--pink), var(--neon-2)) 1; margin: 0 0 1rem; background: transparent !important; box-shadow: none !important; } body.libelle-dark .strong-view .wpmtst-testimonial-heading, body.libelle-dark .strong-view .testimonial-heading { font-family: var(--font-body); font-weight: 700; font-size: 0.85rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--pink) !important; margin: 0 0 0.5rem; } body.libelle-dark .strong-view .wpmtst-testimonial-content p { margin: 0 0 0.6rem; } body.libelle-dark .strong-view .wpmtst-testimonial-content p:last-child { margin-bottom: 0; } body.libelle-dark .strong-view .wpmtst-testimonial-content p::before { content: '„'; color: var(--neon-2); } body.libelle-dark .strong-view .wpmtst-testimonial-content p::after { content: '“'; color: var(--neon-2); } body.libelle-dark .strong-view .wpmtst-testimonial-content p:empty::before, body.libelle-dark .strong-view .wpmtst-testimonial-content p:empty::after { content: none; } body.libelle-dark .strong-view .wpmtst-testimonial-field.testimonial-name, body.libelle-dark .strong-view .testimonial-name { margin-top: 0.6rem; } body.libelle-dark .strong-view .wpmtst-testimonial-field.testimonial-name::before { content: '— '; color: var(--ink-3); } body.libelle-dark .strong-view .testimonial-image img, body.libelle-dark .strong-view .wpmtst-testimonial-image img { border-radius: 999px; border: 2px solid var(--line); } body.libelle-dark .strong-view.centertext .wpmtst-testimonial { padding-left: 0; border-left: 0; border-image: none; } body.libelle-dark .strong-view .readmore, body.libelle-dark .strong-view .readmore-toggle, body.libelle-dark .strong-view .wpmtst-read-more { color: var(--neon-2) !important; font-family: var(--font-body); font-size: 0.9rem; font-weight: 700; } /* Slider-Pfeile/Punkte, falls ein Slider-View verwendet wird */ body.libelle-dark .strong-view .slick-dots li button::before { color: var(--ink-3); } body.libelle-dark .strong-view .slick-dots li.slick-active button::before { color: var(--pink); } body.libelle-dark .strong-view .slick-arrow { color: var(--ink-2); } body.libelle-dark .strong-view .wpmtst-pagination .page-numbers { color: var(--ink-2); border: 1px solid var(--line); border-radius: 999px; padding: 0.3rem 0.8rem; } body.libelle-dark .strong-view .wpmtst-pagination .page-numbers.current { background: var(--pink); color: #fff; border-color: var(--pink); } /* -------------------------------------------------------------------------- 10. GS Logo Slider (Partner-Logos, Startseite) style.css färbt Logos per brightness(0)+invert weiß – Logos mit deckendem weißen Hintergrund werden dadurch zu weißen Kacheln. Stattdessen: helle, runde Kachel pro Logo, Logo in Graustufen, farbig beim Hover. -------------------------------------------------------------------------- */ body.libelle-dark .gs_logo_area, body.libelle-dark .gs_logo_container { background: transparent !important; } body.libelle-dark .gs_logo_area .gs_logo_single--wrapper { padding: 0.5rem !important; box-sizing: border-box; } body.libelle-dark .gs_logo_area .gs_logo_single { display: flex; align-items: center; justify-content: center; aspect-ratio: 1 / 1; padding: 1rem; box-sizing: border-box; border-radius: 16px; background: #f7f4ff; border: 1px solid rgba(255, 255, 255, 0.08); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35); transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease; } body.libelle-dark .gs_logo_area .gs_logo_single:hover { transform: translateY(-3px); background: #fff; box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45), 0 0 30px rgba(176, 140, 255, 0.25); } body.libelle-dark .gs_logo_area .gs_logo_single a { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; } body.libelle-dark .gs_logo_area .gs_logo_single img, body.libelle-dark .gs_logo_single img, body.libelle-dark .gs_logo_area img, body.libelle-dark .gs-logo--img { filter: none !important; opacity: 1 !important; max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; border-radius: 0; box-shadow: none; transition: filter 0.2s ease, opacity 0.2s ease; } body.libelle-dark .gs_logo_area .gs_logo_single:hover img, body.libelle-dark .gs_logo_single:hover img { filter: grayscale(0) !important; opacity: 1 !important; } body.libelle-dark .gs_logo_area .gs_logo_fix_height_and_center .gs_logo_single img { height: auto !important; max-height: 100% !important; } body.libelle-dark .gs_logo_area .gs-logo-title, body.libelle-dark .gs_logo_area .gs_logo_title { color: var(--ink-3); font-size: 0.85rem; text-align: center; margin-top: 0.4rem; } body.libelle-dark .gs_logo_area .gs-logo-filter-cats a { color: var(--ink-2); border: 1px solid var(--line); border-radius: 999px; padding: 0.3rem 0.9rem; background: transparent; } body.libelle-dark .gs_logo_area .gs-logo-filter-cats a.active, body.libelle-dark .gs_logo_area .gs-logo-filter-cats a:hover { background: var(--pink); color: #fff; border-color: var(--pink); } /* Slider-Variante (Pfeile/Punkte) */ body.libelle-dark .gs_logo_area .slick-arrow, body.libelle-dark .gs_logo_area .gs-logo-arrow { background: var(--bg-2) !important; color: var(--ink) !important; border: 1px solid var(--line) !important; border-radius: 999px !important; } body.libelle-dark .gs_logo_area .slick-dots li button::before { color: var(--ink-3); } body.libelle-dark .gs_logo_area .slick-dots li.slick-active button::before { color: var(--pink); } /* Logo-Tooltip (tt-placement…) */ body.libelle-dark .gs-logo-tooltip, body.libelle-dark .tooltipster-base .tooltipster-box { background: var(--bg-2) !important; color: var(--ink) !important; border: 1px solid var(--line) !important; border-radius: 10px !important; } /* -------------------------------------------------------------------------- 11. Cookie-Banner – Cookie Law Info 3.5 (legacy „cli-“-Banner, CookieYes) Farben kommen per JS als Inline-Style → !important nötig. -------------------------------------------------------------------------- */ body.libelle-dark #cookie-law-info-bar { background: rgba(18, 10, 38, 0.97) !important; color: var(--ink-2) !important; border-top: 1px solid var(--line) !important; box-shadow: 0 -16px 50px rgba(0, 0, 0, 0.55) !important; font-family: var(--font-body) !important; font-size: 0.92rem !important; line-height: 1.5; padding: 1rem 1.25rem !important; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); } body.libelle-dark #cookie-law-info-bar::before { content: ''; position: absolute; left: 0; right: 0; top: -1px; height: 2px; background: var(--rainbow); opacity: 0.85; } body.libelle-dark #cookie-law-info-bar > span { display: block; max-width: var(--max); margin: 0 auto; } body.libelle-dark #cookie-law-info-bar .cli-bar-container { display: flex; align-items: center; justify-content: space-between; gap: 1.2rem; max-width: var(--max); margin: 0 auto; } body.libelle-dark #cookie-law-info-bar .cli-bar-message { color: var(--ink-2) !important; text-align: left; flex: 1 1 auto; max-width: 70ch; } body.libelle-dark #cookie-law-info-bar .cli-bar-message a { color: var(--neon-2) !important; text-decoration: underline; text-underline-offset: 3px; } body.libelle-dark #cookie-law-info-bar .cli-bar-btn_container { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; margin: 0; flex-shrink: 0; } body.libelle-dark .cli-plugin-button, body.libelle-dark .cli-plugin-button:visited, body.libelle-dark #cookie-law-info-bar .cli-plugin-button, body.libelle-dark .cli-btn, body.libelle-dark .wt-cli-privacy-btn, body.libelle-dark #cookie-law-info-bar .cli_settings_button, body.libelle-dark #cookie-law-info-bar .cli_action_button { display: inline-flex !important; align-items: center; justify-content: center; margin: 0 !important; padding: 0.6rem 1.3rem !important; border-radius: 999px !important; border: 1px solid var(--neon-2) !important; background: rgba(138, 92, 255, 0.08) !important; background-color: rgba(138, 92, 255, 0.08) !important; color: var(--ink) !important; font-family: var(--font-body) !important; font-weight: 700 !important; font-size: 0.92rem !important; line-height: 1.2 !important; text-decoration: none !important; text-transform: none; letter-spacing: 0.01em; cursor: pointer; box-shadow: none !important; transition: transform 0.15s ease, background 0.15s ease, box-shadow 0.15s ease; } body.libelle-dark .cli-plugin-button:hover, body.libelle-dark #cookie-law-info-bar .cli_settings_button:hover, body.libelle-dark .cli-btn:hover { background: rgba(138, 92, 255, 0.2) !important; background-color: rgba(138, 92, 255, 0.2) !important; color: #fff !important; transform: translateY(-1px); } body.libelle-dark #cookie-law-info-bar .cli_action_button, body.libelle-dark #wt-cli-accept-all-btn, body.libelle-dark .wt-cli-accept-all-btn, body.libelle-dark #wt-cli-privacy-save-btn, body.libelle-dark .wt-cli-privacy-accept-btn, body.libelle-dark .cli_setting_save_button { background: var(--pink) !important; background-color: var(--pink) !important; border-color: var(--pink) !important; color: #fff !important; box-shadow: 0 0 20px rgba(255, 61, 154, 0.4) !important; } body.libelle-dark #cookie-law-info-bar .cli_action_button:hover, body.libelle-dark #wt-cli-accept-all-btn:hover, body.libelle-dark #wt-cli-privacy-save-btn:hover { background: #ff5cab !important; background-color: #ff5cab !important; border-color: #ff5cab !important; } body.libelle-dark .wt-cli-reject-btn, body.libelle-dark #wt-cli-reject-btn, body.libelle-dark .cli_action_button[data-cli_action="reject"] { background: transparent !important; background-color: transparent !important; border-color: var(--line) !important; color: var(--ink-2) !important; box-shadow: none !important; } /* „Manage consent“-Tab zum Wiederöffnen */ body.libelle-dark #cookie-law-info-again { background: var(--bg-2) !important; color: var(--ink-2) !important; border: 1px solid var(--line) !important; border-bottom: 0 !important; border-radius: 10px 10px 0 0 !important; font-family: var(--font-body) !important; font-size: 0.8rem !important; padding: 0.35rem 0.9rem !important; box-shadow: none !important; } body.libelle-dark #cookie-law-info-again:hover { color: var(--ink) !important; } /* Einstellungs-Modal */ body.libelle-dark .cli-modal-backdrop { background: rgba(7, 4, 15, 0.75) !important; backdrop-filter: blur(4px); } body.libelle-dark .cli-modal .cli-modal-dialog { max-width: 720px; } body.libelle-dark .cli-modal .cli-modal-content, body.libelle-dark .cli-modal-content.cli-bar-popup { background: var(--bg-2) !important; color: var(--ink) !important; border: 1px solid var(--line) !important; border-radius: var(--radius) !important; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6) !important; font-family: var(--font-body) !important; overflow: hidden; } body.libelle-dark .cli-modal .cli-modal-close { background: var(--bg-3) !important; border: 1px solid var(--line) !important; border-radius: 999px !important; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; top: 12px; right: 12px; } body.libelle-dark .cli-modal .cli-modal-close { position: absolute; cursor: pointer; } body.libelle-dark .cli-modal .cli-modal-close::before { content: '×'; color: var(--ink); font-family: var(--font-body); font-size: 1.5rem; line-height: 1; font-weight: 400; } body.libelle-dark .cli-modal .cli-modal-close:hover::before { color: #fff; } body.libelle-dark .cli-modal .cli-modal-close svg { display: none !important; } body.libelle-dark .cli-modal .cli-modal-close svg path { fill: var(--ink) !important; } body.libelle-dark .cli-modal .cli-modal-close svg path[fill="none"] { fill: none !important; } body.libelle-dark .cli-modal .cli-modal-close:hover { background: var(--pink) !important; border-color: var(--pink) !important; } body.libelle-dark .cli-modal .cli-modal-close:hover svg path:not([fill="none"]) { fill: #fff !important; } body.libelle-dark .cli-modal .cli-modal-body, body.libelle-dark .cli-modal .cli-modal-footer { background: transparent !important; color: var(--ink-2) !important; border: 0 !important; } body.libelle-dark .cli-modal .cli-modal-footer { border-top: 1px solid var(--line) !important; padding: 1rem 1.5rem !important; } body.libelle-dark .cli-modal .cli-modal-footer .wt-cli-privacy-overview-actions { display: flex; justify-content: flex-end; gap: 0.6rem; padding: 0; } body.libelle-dark .cli-modal .cli-privacy-overview h4, body.libelle-dark .cli-modal .cli-tab-header h4, body.libelle-dark .cli-modal h4, body.libelle-dark .cli-modal .cli-tab-section .cli-tab-header a { color: var(--ink) !important; font-family: var(--font-body) !important; font-weight: 700; } body.libelle-dark .cli-modal .cli-privacy-overview h4 { font-family: var(--font-head) !important; font-weight: 900; font-size: 1.3rem; } body.libelle-dark .cli-modal .cli-privacy-content-text, body.libelle-dark .cli-modal .cli-privacy-content, body.libelle-dark .cli-modal .wt-cli-cookie-description, body.libelle-dark .cli-modal .cli-tab-content, body.libelle-dark .cli-modal .cli-tab-pane, body.libelle-dark .cli-modal p { color: var(--ink-2) !important; background: transparent !important; font-size: 0.95rem; } body.libelle-dark .cli-modal .cli-privacy-readmore, body.libelle-dark .cli-modal a.cli-privacy-readmore, body.libelle-dark .cli-modal .cli-privacy-overview a { color: var(--neon-2) !important; } body.libelle-dark .cli-modal .cli-tab-section { border: 1px solid var(--line) !important; border-radius: 12px; margin-bottom: 0.6rem; overflow: hidden; } body.libelle-dark .cli-modal .cli-tab-section .cli-tab-header { background: var(--bg-3) !important; border: 0 !important; color: var(--ink) !important; padding: 0.8rem 1rem !important; } body.libelle-dark .cli-modal .cli-tab-section .cli-tab-header a.cli-nav-link { color: var(--ink) !important; font-weight: 700; } body.libelle-dark .cli-modal .cli-tab-section .cli-tab-header a.cli-nav-link::before { border-color: var(--ink-2) !important; } body.libelle-dark .cli-modal .cli-tab-section .cli-tab-content { padding: 0.9rem 1rem; } body.libelle-dark .cli-modal .cli-tab-section .cli-tab-content .cli-tab-pane { background: transparent !important; padding: 0; } body.libelle-dark .cli-modal .cli-necessary-caption, body.libelle-dark .cli-modal .wt-cli-necessary-checkbox + label, body.libelle-dark .cli-modal .cli-user-preference-checkbox .cli-necessary-caption { color: var(--ok) !important; font-weight: 700; font-size: 0.85rem; } body.libelle-dark .cli-modal .cli-switch .cli-slider { background-color: var(--bg) !important; border: 1px solid var(--line); } body.libelle-dark .cli-modal .cli-switch .cli-slider::before { background-color: var(--ink-3) !important; } body.libelle-dark .cli-modal .cli-switch input:checked + .cli-slider { background-color: var(--pink) !important; border-color: var(--pink); } body.libelle-dark .cli-modal .cli-switch input:checked + .cli-slider::before { background-color: #fff !important; } body.libelle-dark .cli-modal .cli-switch input:focus + .cli-slider { box-shadow: 0 0 0 3px rgba(138, 92, 255, 0.35); } body.libelle-dark .cli-modal table.cookielawinfo-row-cat-table { border: 1px solid var(--line) !important; border-radius: 10px; overflow: hidden; font-size: 0.85rem; } body.libelle-dark .cli-modal table.cookielawinfo-row-cat-table th, body.libelle-dark .cli-modal table.cookielawinfo-row-cat-table td { background: transparent !important; color: var(--ink-2) !important; border: 0 !important; border-bottom: 1px solid var(--line) !important; padding: 0.5rem 0.7rem !important; } body.libelle-dark .cli-modal table.cookielawinfo-row-cat-table th { color: var(--ink) !important; background: rgba(27, 16, 56, 0.6) !important; } body.libelle-dark .cli-modal .cookielawinfo-winter tr:nth-child(odd) td, body.libelle-dark .cli-modal .cookielawinfo-row-cat-table tr:nth-child(odd) td { background: rgba(255, 255, 255, 0.02) !important; } body.libelle-dark .cli-modal .wt-cli-ckyes-footer-section { border-top: 1px solid var(--line) !important; margin-top: 0.8rem; padding-top: 0.6rem; } body.libelle-dark .cli-modal .wt-cli-ckyes-brand-logo { color: var(--ink-3) !important; font-size: 0.75rem; } body.libelle-dark .cli-modal .wt-cli-ckyes-brand-logo img { filter: grayscale(1) invert(1); opacity: 0.5; vertical-align: middle; height: 14px; } body.libelle-dark .cli-modal .cli-modal-body::-webkit-scrollbar-thumb { background: rgba(176, 140, 255, 0.3); border-radius: 999px; } /* Neuer CookieYes-Banner (cky-*), falls der Betreiber das Plugin umstellt: style.css deckt die Basis, hier Pillen & Hover */ body.libelle-dark .cky-btn { padding: 0.6rem 1.3rem !important; font-weight: 700 !important; border-width: 1px !important; } body.libelle-dark .cky-btn-accept:hover { background: #ff5cab !important; border-color: #ff5cab !important; } body.libelle-dark .cky-btn-customize:hover, body.libelle-dark .cky-btn-reject:hover { background: rgba(138, 92, 255, 0.2) !important; } body.libelle-dark .cky-switch input:checked + .cky-slider, body.libelle-dark .cky-switch input[type="checkbox"]:checked + .cky-slider, body.libelle-dark .cky-switch input:checked ~ .cky-slider { background: var(--pink) !important; } body.libelle-dark .cky-accordion-header, body.libelle-dark .cky-accordion-btn, body.libelle-dark .cky-preference-header, body.libelle-dark .cky-prefrence-btn-wrapper { background: transparent !important; color: var(--ink) !important; border-color: var(--line) !important; } body.libelle-dark .cky-always-active { color: var(--ok) !important; } /* -------------------------------------------------------------------------- 12. Popup Maker -------------------------------------------------------------------------- */ body.libelle-dark .pum-overlay, body.libelle-dark .pum-overlay.pum-active { background: rgba(7, 4, 15, 0.78) !important; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); } body.libelle-dark .pum-container, body.libelle-dark .pum-theme-default .pum-container, body.libelle-dark .pum-container.pum-responsive { background: linear-gradient(160deg, rgba(27, 16, 56, 0.98), rgba(18, 10, 38, 0.98)) !important; color: var(--ink) !important; border: 1px solid var(--line) !important; border-radius: var(--radius) !important; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6), 0 0 60px rgba(138, 92, 255, 0.15) !important; padding: 2rem !important; font-family: var(--font-body); } body.libelle-dark .pum-container::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 2px; border-radius: var(--radius) var(--radius) 0 0; background: var(--rainbow); opacity: 0.85; } body.libelle-dark .pum-container .pum-title, body.libelle-dark .pum-container .pum-content h1, body.libelle-dark .pum-container .pum-content h2, body.libelle-dark .pum-container .pum-content h3 { color: var(--ink) !important; font-family: var(--font-head) !important; font-weight: 900; } body.libelle-dark .pum-container .pum-title { font-size: clamp(1.4rem, 2.5vw, 1.9rem); margin-bottom: 0.8rem; } body.libelle-dark .pum-container .pum-content, body.libelle-dark .pum-container .pum-content p, body.libelle-dark .pum-container .pum-content li { color: var(--ink-2) !important; } body.libelle-dark .pum-container .pum-content a:not(.button):not(.wp-block-button__link):not(.btn) { color: var(--neon-2); text-decoration: underline; text-underline-offset: 3px; } body.libelle-dark .pum-container .pum-close, body.libelle-dark .pum-theme-default .pum-container .pum-close, body.libelle-dark .pum-container .pum-close.popmake-close { background: var(--bg-3) !important; color: var(--ink) !important; border: 1px solid var(--line) !important; border-radius: 999px !important; width: 36px !important; height: 36px !important; line-height: 34px !important; padding: 0 !important; font-size: 1.1rem !important; text-align: center; top: 12px !important; right: 12px !important; box-shadow: none !important; text-shadow: none !important; transition: background 0.15s ease, color 0.15s ease; } body.libelle-dark .pum-container .pum-close:hover { background: var(--pink) !important; border-color: var(--pink) !important; color: #fff !important; } body.libelle-dark .pum-container input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]), body.libelle-dark .pum-container textarea, body.libelle-dark .pum-container select { background: var(--bg) !important; } body.libelle-dark .pum-container .pum-sub-form .pum-form__submit, body.libelle-dark .pum-container .pum-form__submit, body.libelle-dark .pum-container button[type="submit"], body.libelle-dark .pum-container input[type="submit"] { background: var(--pink) !important; border-color: var(--pink) !important; color: #fff !important; box-shadow: 0 0 24px rgba(255, 61, 154, 0.45); } body.libelle-dark .pum-container .pum-sub-form-desc, body.libelle-dark .pum-container .pum-form__messages { color: var(--ink-3); } body.libelle-dark .pum-container .pum-alert { color: var(--warn); } /* Popup-Maker-Themes, die Hintergrundfarben hart setzen */ body.libelle-dark .pum-theme-lightbox .pum-container, body.libelle-dark .pum-theme-enterprise-blue .pum-container, body.libelle-dark .pum-theme-hello-box .pum-container, body.libelle-dark .pum-theme-cutting-edge .pum-container, body.libelle-dark .pum-theme-framed-border .pum-container, body.libelle-dark .pum-theme-floating-bar .pum-container, body.libelle-dark .pum-theme-content-only .pum-container { background: linear-gradient(160deg, rgba(27, 16, 56, 0.98), rgba(18, 10, 38, 0.98)) !important; color: var(--ink) !important; } /* -------------------------------------------------------------------------- 13. GTranslate (Footer-Widget „Sprache“, Dropdown mit Flaggen) style.css färbt .gt_switcher bereits – hier Rahmen, Hover, Dropdown -------------------------------------------------------------------------- */ body.libelle-dark .gtranslate_wrapper { display: block; } body.libelle-dark .gt_switcher, body.libelle-dark .gtranslate_wrapper .gt_switcher { border: 1px solid var(--line) !important; border-radius: 10px !important; overflow: visible; box-shadow: none !important; font-family: var(--font-body) !important; } body.libelle-dark .gt_switcher .gt_selected { border: 0 !important; background: var(--bg-2) !important; border-radius: 10px !important; } body.libelle-dark .gt_switcher .gt_selected a { border: 0 !important; color: var(--ink) !important; background: transparent !important; padding: 0.45rem 2rem 0.45rem 0.6rem !important; font-size: 0.95rem !important; } body.libelle-dark .gt_switcher .gt_selected a:hover, body.libelle-dark .gt_switcher .gt_selected a.open { background: rgba(138, 92, 255, 0.12) !important; } body.libelle-dark .gt_switcher .gt_selected a::after, body.libelle-dark .gt_switcher .gt_selected a.open::after { background-image: none !important; filter: none; } body.libelle-dark .gt_switcher .gt_option, body.libelle-dark .gt_switcher .gt_option a { background: var(--bg-2) !important; color: var(--ink-2) !important; border-color: var(--line) !important; } body.libelle-dark .gt_switcher .gt_option { border: 1px solid var(--line) !important; border-radius: 10px !important; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5) !important; overflow: hidden; margin-top: 2px; } body.libelle-dark .gt_switcher .gt_option a { padding: 0.35rem 0.6rem !important; font-size: 0.92rem !important; } body.libelle-dark .gt_switcher .gt_option a:hover, body.libelle-dark .gt_switcher .gt_option a.selected { background: rgba(138, 92, 255, 0.2) !important; color: var(--ink) !important; } body.libelle-dark .gt_switcher .gt_option::-webkit-scrollbar-thumb { background: rgba(176, 140, 255, 0.35); border-radius: 999px; } body.libelle-dark .gt_switcher img, body.libelle-dark .gt_switcher .gt_selected a img, body.libelle-dark .gt_switcher .gt_option a img { border-radius: 2px; vertical-align: middle; } /* Textlink-Variante (languages: de/en, „DE EN“) – Pillen, aktive Sprache pink */ body.libelle-dark .gtranslate_wrapper a.glink, body.libelle-dark .gtranslate_wrapper .gt_container--hich2i a, body.libelle-dark .gtranslate_wrapper [class*="gt_container"] a.glink { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.3rem 0.75rem; margin: 0 0.3rem 0.3rem 0; border: 1px solid var(--line); border-radius: 999px; color: var(--ink-2) !important; font-size: 0.85rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none !important; background: transparent; transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease; } body.libelle-dark .gtranslate_wrapper a.glink:hover { color: var(--ink) !important; border-color: var(--neon-2); background: rgba(138, 92, 255, 0.15); } body.libelle-dark .gtranslate_wrapper a.glink.gt-current-wrapper, body.libelle-dark .gtranslate_wrapper a.glink.gt-current-lang, body.libelle-dark .gtranslate_wrapper a.glink[class*="current"] { color: #fff !important; border-color: var(--pink); background: var(--pink); box-shadow: 0 0 14px rgba(255, 61, 154, 0.35); } body.libelle-dark .gtranslate_wrapper a.glink img { width: 18px; height: auto; border-radius: 2px; } body.libelle-dark .gtranslate_wrapper a.glink span { display: inline; } /* Andere GTranslate-Widget-Varianten (Flaggenreihe, Popup, Floating) */ body.libelle-dark .gt_container--hich2i a, body.libelle-dark .gtranslate_wrapper a.glink { color: var(--ink-2) !important; } body.libelle-dark .gt_container--hich2i a:hover, body.libelle-dark .gtranslate_wrapper a.glink:hover { color: var(--ink) !important; } body.libelle-dark .gt_float_switcher, body.libelle-dark .gt_float_switcher .gt_options, body.libelle-dark .gt_float_switcher .gt-selected, body.libelle-dark .gt_float_switcher .gt_options a { background: var(--bg-2) !important; color: var(--ink) !important; border-color: var(--line) !important; } body.libelle-dark .gt_float_switcher .gt_options a:hover { background: rgba(138, 92, 255, 0.2) !important; } body.libelle-dark .gt_float_switcher { border: 1px solid var(--line) !important; border-radius: 10px !important; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5) !important; } body.libelle-dark .gt_white_overlay { background: rgba(7, 4, 15, 0.8) !important; } body.libelle-dark .gt_switcher-popup, body.libelle-dark .gt_languages, body.libelle-dark .gt_languages a { background: var(--bg-2) !important; color: var(--ink) !important; border-color: var(--line) !important; } /* Google-Translate-Leiste oben ausblenden (wird von GTranslate sonst eingefügt) */ body.libelle-dark .skiptranslate iframe.goog-te-banner-frame, body.libelle-dark #goog-gt-tt { display: none !important; } body.libelle-dark.translated-ltr, body.libelle-dark.translated-rtl { top: 0 !important; } /* -------------------------------------------------------------------------- 14. Mobil (≤ 767px / 390px): keine horizontalen Überläufe -------------------------------------------------------------------------- */ @media (max-width: 767px) { body.libelle-dark.woocommerce-page table.shop_table_responsive thead, body.libelle-dark.woocommerce-page table.shop_table_responsive thead { display: none; } body.libelle-dark.woocommerce-page table.shop_table_responsive tr, body.libelle-dark.woocommerce-page table.shop_table_responsive tr { display: block; border-bottom: 1px solid var(--line); padding: 0.6rem 0; } body.libelle-dark.woocommerce-page table.shop_table_responsive tr td, body.libelle-dark.woocommerce-page table.shop_table_responsive tr td { display: flex; justify-content: space-between; align-items: center; gap: 1rem; text-align: right; border: 0; padding: 0.4rem 0; } body.libelle-dark.woocommerce-page table.shop_table_responsive tr td::before, body.libelle-dark.woocommerce-page table.shop_table_responsive tr td::before { content: attr(data-title); float: none; color: var(--ink-3); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; text-align: left; flex-shrink: 0; } body.libelle-dark.woocommerce-page table.shop_table_responsive tr td.product-remove::before, body.libelle-dark.woocommerce-page table.shop_table_responsive tr td.product-thumbnail::before, body.libelle-dark.woocommerce-page table.shop_table_responsive tr td.actions::before, body.libelle-dark.woocommerce-page table.shop_table_responsive tr td[data-title=""]::before { content: none; } body.libelle-dark.woocommerce-page table.shop_table_responsive tr td.product-remove { justify-content: flex-end; } body.libelle-dark.woocommerce-page table.shop_table_responsive tr td.product-thumbnail { justify-content: flex-start; } body.libelle-dark.woocommerce-page table.shop_table_responsive tr td.product-name { text-align: left; justify-content: flex-start; font-weight: 700; flex-direction: column; align-items: flex-start; gap: 0.2rem; } body.libelle-dark.woocommerce-page table.shop_table_responsive tr td.product-name::before { content: none; } body.libelle-dark .woocommerce-cart-form { padding: 0.4rem 1rem 1rem; } body.libelle-dark .woocommerce-cart-form .product-thumbnail img { width: 72px; height: 72px; } body.libelle-dark .woocommerce-cart-form table.shop_table_responsive tr td.product-name { text-align: left !important; } body.libelle-dark .woocommerce-cart-form table.shop_table_responsive tr td.product-remove { padding-bottom: 0; } body.libelle-dark.woocommerce-page table.cart td.actions, body.libelle-dark .woocommerce-cart-form td.actions { display: block !important; text-align: left; padding-top: 1rem !important; } body.libelle-dark.woocommerce-page table.cart td.actions .coupon, body.libelle-dark .woocommerce-cart-form td.actions .coupon { float: none !important; display: flex !important; flex-direction: column; align-items: stretch; width: 100% !important; margin: 0 0 0.6rem !important; padding: 0 !important; } body.libelle-dark.woocommerce-page table.cart td.actions .coupon #coupon_code, body.libelle-dark.woocommerce-page table.cart td.actions .coupon .input-text { width: 100% !important; float: none !important; margin: 0 !important; } body.libelle-dark.woocommerce-page table.cart td.actions .coupon .button, body.libelle-dark.woocommerce-page table.cart td.actions > .button { width: 100% !important; float: none !important; display: flex !important; margin: 0 !important; } body.libelle-dark .cart-collaterals { margin-top: 1.5rem; } body.libelle-dark .cart-collaterals .cart_totals { padding: 1.1rem; } body.libelle-dark .cart_totals table.shop_table_responsive tr td { padding: 0.4rem 0; } body.libelle-dark .cart_totals table.shop_table_responsive tr th { display: none; } body.libelle-dark .cart_totals .order-total td { font-size: 1.15rem; } /* Kasse */ body.libelle-dark #customer_details .col-1, body.libelle-dark #customer_details .col-2, body.libelle-dark .woocommerce-checkout .col2-set .col-1, body.libelle-dark .woocommerce-checkout .col2-set .col-2 { float: none; width: 100%; } body.libelle-dark #customer_details .form-row-first, body.libelle-dark #customer_details .form-row-last, body.libelle-dark .woocommerce-checkout form.woocommerce-form-login .form-row-first, body.libelle-dark .woocommerce-checkout form.woocommerce-form-login .form-row-last, body.libelle-dark .woocommerce-address-fields .woocommerce-address-fields__field-wrapper .form-row-first, body.libelle-dark .woocommerce-address-fields .woocommerce-address-fields__field-wrapper .form-row-last { width: 100%; float: none; } body.libelle-dark #customer_details .woocommerce-billing-fields, body.libelle-dark #customer_details .woocommerce-shipping-fields, body.libelle-dark #customer_details .woocommerce-additional-fields, body.libelle-dark .woocommerce-checkout #order_review, body.libelle-dark .woocommerce-checkout form.woocommerce-form-login, body.libelle-dark .woocommerce-checkout form.checkout_coupon { padding: 1.1rem; } body.libelle-dark .woocommerce-checkout #order_review { margin-top: 1.5rem; } body.libelle-dark .woocommerce-checkout #order_review table.shop_table_responsive tr { display: table-row; } body.libelle-dark .woocommerce-checkout #order_review table.shop_table_responsive tr td, body.libelle-dark .woocommerce-checkout #order_review table.shop_table_responsive tr th { display: table-cell; text-align: left; padding: 0.7rem 0; } body.libelle-dark .woocommerce-checkout #order_review table.shop_table_responsive tr td::before { content: none; } body.libelle-dark .woocommerce-checkout #order_review table.shop_table_responsive thead { display: table-header-group; } body.libelle-dark .woocommerce-checkout #order_review table.shop_table .product-total, body.libelle-dark .woocommerce-checkout #order_review table.shop_table tfoot td { text-align: right; } body.libelle-dark #payment ul.payment_methods li { padding: 0.8rem; } /* Konto */ body.libelle-dark.woocommerce-page form.login, body.libelle-dark.woocommerce-page form.register, body.libelle-dark.woocommerce-page form.woocommerce-ResetPassword, body.libelle-dark.woocommerce-page form.woocommerce-EditAccountForm { padding: 1.2rem; } body.libelle-dark.woocommerce-page form.login .woocommerce-form-login__rememberme { display: flex; margin: 0.8rem 0 0; } body.libelle-dark .woocommerce-MyAccount-navigation { margin-bottom: 1.5rem; } body.libelle-dark .woocommerce-MyAccount-navigation ul { flex-direction: row; flex-wrap: wrap; gap: 0.3rem; } body.libelle-dark .woocommerce-MyAccount-navigation ul li a { padding: 0.45rem 0.8rem; border-radius: 999px; font-size: 0.9rem; border: 1px solid var(--line); } body.libelle-dark .woocommerce-account .woocommerce-MyAccount-navigation, body.libelle-dark .woocommerce-account .woocommerce-MyAccount-content { float: none; width: 100%; } body.libelle-dark table.woocommerce-orders-table .woocommerce-orders-table__cell-order-actions { justify-content: flex-start; flex-wrap: wrap; } body.libelle-dark table.woocommerce-orders-table .woocommerce-orders-table__cell-order-actions::before { width: 100%; } /* Produkt */ body.libelle-dark.woocommerce-page div.product .woocommerce-product-gallery, body.libelle-dark.woocommerce-page div.product div.images, body.libelle-dark.woocommerce-page div.product div.summary { float: none; width: 100%; } body.libelle-dark.woocommerce-page div.product .woocommerce-product-gallery { margin-bottom: 1.5rem; } body.libelle-dark.woocommerce-page div.product .woocommerce-product-gallery__image--placeholder { padding: 1.5rem; } body.libelle-dark.woocommerce-page div.product .product_title { font-size: clamp(1.6rem, 7vw, 2.2rem); } body.libelle-dark.woocommerce-page div.product form.cart { padding: 1rem; } body.libelle-dark.woocommerce-page div.product form.cart .single_add_to_cart_button { flex: 1 1 auto; } body.libelle-dark.woocommerce-page div.product .product_meta .sku { display: inline-block; max-width: 100%; } /* Danke-Seite */ body.libelle-dark ul.woocommerce-order-overview { grid-template-columns: 1fr 1fr; } /* IvyForms */ body.libelle-dark .ivyforms-form-wrapper { padding: 1.2rem 1rem 1.4rem !important; margin: 1.5rem 0 1rem; max-width: none; } body.libelle-dark .ivyforms-form-wrapper .ivyforms-form-submit .ivyforms-button-action, body.libelle-dark .ivyforms-form-wrapper .ivyforms-form-submit button.ivyforms-button-action { width: 100% !important; } /* Amelia: Seitenleiste als Kopfzeile, Dialog voll breit */ body.libelle-dark .amelia-v2-booking .am-fs__wrapper { border-radius: var(--radius) !important; } body.libelle-dark .amelia-v2-booking .am-fs-sb { border-right: 0; border-bottom: 1px solid var(--line); border-radius: var(--radius) var(--radius) 0 0 !important; width: 100% !important; } body.libelle-dark .amelia-v2-booking .am-fs__main { --am-brad-main: 0 0 var(--radius) var(--radius) !important; } body.libelle-dark .amelia-v2-booking .am-advsc__dayGridMonth-cell { font-size: 0.95rem; } body.libelle-dark .amelia-v2-booking .am-button:not(.is-icon-only) { padding-left: 1rem !important; padding-right: 1rem !important; } /* Kadence Form */ body.libelle-dark .kb-form .kb-submit-field .kb-forms-submit.kb-button { width: 100%; } /* Logo-Kacheln */ body.libelle-dark .gs_logo_area .gs_logo_single { padding: 0.7rem; border-radius: 12px; } /* Cookie-Banner: Text oben, Buttons darunter in voller Breite */ body.libelle-dark #cookie-law-info-bar { padding: 0.9rem 1rem 1rem !important; font-size: 0.88rem !important; } body.libelle-dark #cookie-law-info-bar .cli-bar-container { flex-direction: column; align-items: stretch; gap: 0.8rem; } body.libelle-dark #cookie-law-info-bar .cli-bar-message { max-width: none; } body.libelle-dark #cookie-law-info-bar .cli-bar-btn_container { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; } body.libelle-dark #cookie-law-info-bar .cli-bar-btn_container .cli-plugin-button { width: 100%; padding: 0.6rem 0.8rem !important; font-size: 0.88rem !important; white-space: nowrap; } body.libelle-dark .cli-modal .cli-modal-dialog { margin: 0.5rem; max-width: calc(100vw - 1rem); } body.libelle-dark .cli-modal .cli-modal-footer .wt-cli-privacy-overview-actions { justify-content: stretch; } body.libelle-dark .cli-modal .cli-modal-footer .wt-cli-privacy-overview-actions .cli-btn { width: 100%; } /* Popups */ body.libelle-dark .pum-container { padding: 1.4rem !important; width: calc(100vw - 2rem) !important; left: 1rem !important; } /* GTranslate im Footer voll breit */ body.libelle-dark .gt_switcher { width: 100% !important; } body.libelle-dark .gt_switcher .gt_selected a { width: auto !important; } } @media (max-width: 419px) { body.libelle-dark #cookie-law-info-bar .cli-bar-btn_container { grid-template-columns: 1fr; } body.libelle-dark ul.woocommerce-order-overview { grid-template-columns: 1fr; } body.libelle-dark.woocommerce-page div.product form.cart { flex-direction: column; align-items: stretch; } body.libelle-dark.woocommerce-page div.product form.cart div.quantity { justify-content: center; } body.libelle-dark.woocommerce-page div.product form.cart div.quantity .qty { width: 100%; } } /* Grundsätzlich: nichts darf breiter als der Viewport werden */ body.libelle-dark .woocommerce, body.libelle-dark.woocommerce-page .entry-content, body.libelle-dark .amelia-v2-booking, body.libelle-dark .ivyforms-form-wrapper, body.libelle-dark .gs_logo_area, body.libelle-dark .strong-view { max-width: 100%; box-sizing: border-box; } body.libelle-dark.woocommerce-page table.shop_table, body.libelle-dark .amelia-v2-booking .am-fs__wrapper, body.libelle-dark .ivyforms-form-wrapper .ivyforms-form { max-width: 100%; } body.libelle-dark .amelia-v2-booking .am-fs__wrapper, body.libelle-dark .ivyforms-form-wrapper, body.libelle-dark .woocommerce-cart-form, body.libelle-dark .cart_totals, body.libelle-dark .woocommerce-checkout #order_review { overflow-wrap: anywhere; word-break: normal; }