/* ========================================================================== AMPLI5 Redesign 2026 (zweiter Durchgang, 10.10.2026) Ebene über ampli-opt-*; alles auf body.ampli-rd begrenzt. Abschalten: Filter ampli_redesign_enabled (inc/ampli-redesign.php). Dokumentation: docs/DESIGN_SYSTEM.md 1 Tokens 2 Basis, Typografie, Fokus 3 Bedienelemente (Buttons, Felder, Badges, Links) 4 Header und Navigation 5 Seitengerüst und Abschnitte 6 Komponenten (Hero, Karten, BZI, Merkmale, Größen, Service, Kundenstimmen, Video, Events, Journal, FAQ, Tabellen) 7 Produktseite 8 Bestandsseiten (Divi-Altlayouts: Produkttexte, Familienangebot, TablePress) 9 Footer 10 Warenkorb und Kasse 11 Bestellbestätigung ========================================================================== */ /* ---------- 1. Tokens ---------- */ body.ampli-rd { /* Farben: Markenrot unverändert, warme Neutraltöne passend zu Leder und Bildsprache */ --a5-red: #860000; --a5-red-dark: #5e0000; --a5-red-soft: #f7eded; --a5-ink: #1c1b1a; --a5-muted: #5b5853; /* 7,0:1 auf Weiß */ --a5-line: #e4e0da; --a5-line-strong: #8d8780; /* Feldränder, 3,6:1 */ --a5-surface: #f4f1ec; /* getönte Abschnitte */ --a5-surface-2: #faf8f5; /* Boxen auf Weiß */ --a5-white: #ffffff; --a5-dark: #191817; /* BZI-Band */ --a5-dark-muted: #c9c3bb; --a5-gold: #b07a00; /* Sterne */ --a5-focus: #f5b400; --a5-success: #1d6b3a; --a5-error: #b00020; /* Radien: einheitlich, keine Pillenform */ --a5-r-xs: 4px; /* Badges */ --a5-r-sm: 8px; /* Buttons, Felder, Chips */ --a5-r: 12px; /* Karten, Boxen, Bilder in Karten */ --a5-r-lg: 16px; /* große Bildflächen */ --a5-radius: var(--a5-r); /* Altname */ --a5-radius-sm: var(--a5-r-sm); --a5-shadow-sm: 0 1px 2px rgba(28, 27, 26, .06); --a5-shadow: 0 1px 2px rgba(28, 27, 26, .05), 0 10px 30px rgba(28, 27, 26, .08); /* Abstände */ --a5-gap: clamp(16px, 2.4vw, 28px); --a5-section: clamp(48px, 7.5vw, 104px); --a5-wrap: 1200px; /* Container: 4 % Seitenrand, mindestens 16 px (Mobile-QA 12.10.2026: bei 320 bis 399 px vorher 13 bis 16 px). Prozentwerte gelten am verwendenden Element; ab 400 px identisch mit 92 %. Nutzung: min(var(--a5-fluid), Höchstbreite) */ --a5-fluid: calc(100% - 2 * max(16px, 4%)); /* Typografie (Systemschriften, kein externer Abruf) */ --a5-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --a5-fs-h1: clamp(34px, 4.6vw, 56px); --a5-fs-h2: clamp(27px, 3.1vw, 40px); --a5-fs-h3: 20px; --a5-fs-body: 17px; --a5-fs-lead: clamp(18px, 1.5vw, 20px); --a5-fs-small: 14px; --a5-btn-h: 48px; } /* ---------- 2. Basis, Typografie, Fokus ---------- */ body.ampli-rd, body.ampli-rd p, body.ampli-rd li, body.ampli-rd input, body.ampli-rd select, body.ampli-rd textarea, body.ampli-rd button { font-family: var(--a5-font); } body.ampli-rd { color: var(--a5-ink); -webkit-font-smoothing: antialiased; } body.ampli-rd h1, body.ampli-rd h2, body.ampli-rd h3, body.ampli-rd h4 { font-family: var(--a5-font); color: var(--a5-ink); letter-spacing: -.015em; } /* Divi setzt auf Produktseiten für Überschriften in Textmodulen Arial (Desktop-QA 12.10.2026); in Abschnitten des Systems gilt die Systemschrift */ body.ampli-rd .a5-section :is(h1, h2, h3, h4) { font-family: var(--a5-font) !important; } body.ampli-rd :focus-visible { outline: 3px solid var(--a5-focus) !important; outline-offset: 2px !important; box-shadow: 0 0 0 5px rgba(28, 27, 26, .85) !important; border-radius: 4px; } body.ampli-rd .screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); white-space: nowrap; } body.ampli-rd .a5-icon { flex: 0 0 auto; width: 1.15em; height: 1.15em; vertical-align: -.2em; } /* wp-Typography trennt sonst Überschriften, Buttons, Preise und Kartentitel */ body.ampli-rd .a5-section h1, body.ampli-rd .a5-section h2, body.ampli-rd .a5-section h3, body.ampli-rd .a5-card__title, body.ampli-rd .a5-btn, body.ampli-rd .a5-chips a, body.ampli-rd .a5-kicker, body.ampli-rd .a5-card__price, body.ampli-rd .a5-footer__title, body.ampli-rd .a5-post__title, body.ampli-rd.single-product .et_pb_wc_title h1, body.ampli-rd .a5-buybar { -webkit-hyphens: none; hyphens: none; } /* ---------- 3. Bedienelemente ---------- */ body.ampli-rd .a5-btn, body.ampli-rd .single_add_to_cart_button.button, body.ampli-rd .woocommerce a.checkout-button, body.ampli-rd .woocommerce #place_order, body.ampli-rd .wpcf7 .wpcf7-submit { display: inline-flex; align-items: center; justify-content: center; gap: .5em; min-height: var(--a5-btn-h); padding: 12px 22px !important; border-radius: var(--a5-r-sm) !important; border: 1.5px solid var(--a5-red) !important; background: var(--a5-red) !important; color: var(--a5-white) !important; font: 600 16px/1.2 var(--a5-font) !important; letter-spacing: .005em; text-transform: none !important; text-decoration: none !important; cursor: pointer; transition: background .15s, border-color .15s, color .15s; } body.ampli-rd .a5-btn:hover, body.ampli-rd .single_add_to_cart_button.button:hover, body.ampli-rd .woocommerce a.checkout-button:hover, body.ampli-rd .woocommerce #place_order:hover, body.ampli-rd .wpcf7 .wpcf7-submit:hover { background: var(--a5-red-dark) !important; border-color: var(--a5-red-dark) !important; color: var(--a5-white) !important; } body.ampli-rd .single_add_to_cart_button.button:after, body.ampli-rd .a5-btn:after { display: none !important; } /* Sekundär: Rahmen in Textfarbe, damit er nicht mit der Hauptaktion konkurriert */ body.ampli-rd .a5-btn--ghost { background: transparent !important; color: var(--a5-ink) !important; border-color: var(--a5-line-strong) !important; } body.ampli-rd .a5-btn--ghost:hover { background: var(--a5-ink) !important; border-color: var(--a5-ink) !important; color: var(--a5-white) !important; } /* Heller Button auf dunklem Grund: Hover mit weißem Rahmen (nicht rot), Fokus über den globalen Fokusring */ body.ampli-rd .a5-btn--light { background: var(--a5-white) !important; border: 2px solid var(--a5-white) !important; color: var(--a5-ink) !important; } body.ampli-rd .a5-btn--light:hover { background: transparent !important; border-color: var(--a5-white) !important; color: var(--a5-white) !important; } body.ampli-rd .single_add_to_cart_button.button.disabled, body.ampli-rd .single_add_to_cart_button.button:disabled { opacity: 1 !important; background: #b9a3a3 !important; border-color: #b9a3a3 !important; color: #fff !important; cursor: not-allowed; } /* Textlink mit Pfeil (untergeordnete Handlung). Unterstreichung nur am Text (.a5-link__text), Pfeil und Symbole ohne Unterstreichung, auch bei Hover und Fokus. Markup: ampli_rd_link() bzw. … */ body.ampli-rd .a5-link { display: inline-flex; align-items: center; gap: .45em; min-height: 44px; color: var(--a5-ink) !important; font-weight: 600; text-decoration: none !important; } body.ampli-rd .a5-link__text, body.ampli-rd .a5-mega__alltext { text-decoration: underline; text-decoration-color: var(--a5-red); text-decoration-thickness: 2px; text-underline-offset: 5px; } body.ampli-rd .a5-link:hover { color: var(--a5-red) !important; } body.ampli-rd .a5-link:hover .a5-link__text { text-decoration-color: currentColor; } body.ampli-rd .a5-link .a5-icon, body.ampli-rd .a5-link__arrow { display: inline-block; flex: 0 0 auto; color: var(--a5-red); transition: transform .15s; text-decoration: none !important; } body.ampli-rd .a5-link:hover .a5-icon, body.ampli-rd .a5-link:hover .a5-link__arrow { transform: translateX(3px); } body.ampli-rd .a5-section--dark .a5-link { color: #fff !important; } body.ampli-rd .a5-section--dark .a5-link__text { text-decoration-color: #e9b3a8; } body.ampli-rd .a5-section--dark .a5-link__arrow { color: #e9b3a8; } /* Fließtextlinks (Desktop-QA 12.10.2026, Screenshots 10 und 13): Textfarbe wie der umgebende Text, rote Unterstreichung, Hover rot, Fokus über den globalen Fokusring. Ursache der roten Schrift mit gelber Linie: style.css setzt für „p > a“ Farbe und Linienfarbe (#d9b63b) mit !important, mehrere Redesign-Regeln färbten nur die Schrift rot. Gilt für Links direkt in Absätzen, Listen, Tabellen- und Definitionszellen des Inhalts. Spezifität (0,2,1) über :root und :where(): stärker als die Altregeln in style.css (bis 0,1,3, z. B. .expert-box ul li a), schwächer als jede Komponente mit eigener Linkgestaltung (Buttons, Textlink mit Pfeil, Navigation, Brotkrumen, Karten, Inhaltsverzeichnis, Footer); diese behalten ihren Stil. */ :root body.ampli-rd :where(#main-content :is(p, li, dd, td, figcaption, strong, em, .wc-gzd-additional-info) > a:not(.a5-btn, .a5-link, .button, .et_pb_button, .a5-doclink)) { color: inherit !important; font-weight: inherit; text-decoration: underline !important; text-decoration-color: var(--a5-red) !important; text-decoration-thickness: 1.5px !important; text-underline-offset: .22em !important; text-decoration-skip-ink: auto; transition: color .15s, text-decoration-thickness .15s; } :root body.ampli-rd :where(#main-content :is(p, li, dd, td, figcaption, strong, em, .wc-gzd-additional-info) > a:not(.a5-btn, .a5-link, .button, .et_pb_button, .a5-doclink)):hover { color: var(--a5-red) !important; text-decoration-thickness: 2px !important; } /* Externe Links und Dateien: Symbole sind SVG (ersetzte Elemente) und werden daher nicht unterstrichen; Textzeichen wie „→“ immer in .a5-link__arrow setzen */ /* Zentral per JS gesetzt (externalLinks): externe Ziele und neue Tabs (.a5-ext), PDFs (.a5-pdf). Maske in Textfarbe, 0,8 em, ohne Einfluss auf die Zeilenhöhe; Symbol wird nicht unterstrichen. */ /* Symbol am letzten Wort (.a5-ext__tail, nicht umbrechend): Ein inline-block nach dem Linktext darf in Chrome trotz Wortverbinder allein in die nächste Zeile rutschen, samt folgendem Satzzeichen (Mobile-QA 12.10.2026, Screenshot 20) */ body.ampli-rd .a5-ext__tail { white-space: nowrap; } body.ampli-rd a.a5-ext:not(:has(.a5-ext__tail))::after, body.ampli-rd a.a5-pdf:not(:has(.a5-ext__tail))::after, body.ampli-rd a.a5-ext .a5-ext__tail::after, body.ampli-rd a.a5-pdf .a5-ext__tail::after { content: ""; display: inline-block; width: .8em; height: .8em; margin-left: .25em; vertical-align: -.05em; background-color: currentColor; opacity: .7; -webkit-mask: var(--a5-ext-icon) center / contain no-repeat; mask: var(--a5-ext-icon) center / contain no-repeat; } body.ampli-rd a.a5-ext { --a5-ext-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 4h6v6M20 4l-9 9M18 14v5a1 1 0 01-1 1H5a1 1 0 01-1-1V7a1 1 0 011-1h5'/%3E%3C/svg%3E"); } body.ampli-rd a.a5-pdf { --a5-ext-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3H7a2 2 0 00-2 2v14a2 2 0 002 2h10a2 2 0 002-2V8z'/%3E%3Cpath d='M14 3v5h5M9 13h6M9 17h6'/%3E%3C/svg%3E"); } body.ampli-rd .a5-iconbtn { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 1.5px solid var(--a5-line-strong); border-radius: var(--a5-r-sm); background: var(--a5-white); color: var(--a5-ink); cursor: pointer; } body.ampli-rd .a5-iconbtn:hover:not(:disabled) { background: var(--a5-ink); border-color: var(--a5-ink); color: var(--a5-white); } body.ampli-rd .a5-iconbtn:disabled { opacity: .35; cursor: default; } body.ampli-rd .a5-badge { display: inline-block; padding: 4px 8px; border-radius: var(--a5-r-xs); background: var(--a5-red); color: #fff; font: 700 12px/1.2 var(--a5-font); letter-spacing: .04em; text-transform: uppercase; vertical-align: middle; } body.ampli-rd .a5-badge--live { background: var(--a5-success); } /* Felder */ body.ampli-rd form.cart select, body.ampli-rd .woocommerce form .form-row select, body.ampli-rd .woocommerce form .form-row input.input-text, body.ampli-rd .woocommerce form .form-row textarea, body.ampli-rd .woocommerce form .form-row .select2-container .select2-selection--single { min-height: var(--a5-btn-h); padding: 10px 14px; border: 1.5px solid var(--a5-line-strong) !important; border-radius: var(--a5-r-sm) !important; background-color: var(--a5-white) !important; color: var(--a5-ink) !important; font-size: 16px !important; } body.ampli-rd .woocommerce form .form-row textarea { padding: 12px 14px !important; min-height: 96px; } body.ampli-rd .woocommerce form .form-row .select2-container .select2-selection--single { padding: 0; } body.ampli-rd .woocommerce form .form-row .select2-container .select2-selection__rendered { line-height: 45px !important; padding-left: 14px !important; } body.ampli-rd .woocommerce form .form-row .select2-container .select2-selection__arrow { height: 46px !important; } body.ampli-rd .woocommerce form .form-row input.input-text:focus, body.ampli-rd .woocommerce form .form-row select:focus, body.ampli-rd .woocommerce form .form-row textarea:focus { border-color: var(--a5-ink) !important; } /* Von Select2 ersetztes Original-Select (Land) bleibt 1 px groß; sonst waagerechte Scrollleiste in der Kasse ab 1366 px */ body.ampli-rd .woocommerce form .form-row select.select2-hidden-accessible { width: 1px !important; height: 1px !important; min-height: 0 !important; padding: 0 !important; border: 0 !important; } /* ---------- 4. Header und Navigation ---------- */ body.ampli-rd #main-header { box-shadow: 0 1px 0 var(--a5-line), 0 8px 24px rgba(28, 27, 26, .04) !important; } /* Innerer Header-Container mit derselben Breite und denselben Seitenabständen wie der Inhalt (Hintergrund weiter vollbreit) */ /* .et_menu_container: style.css setzt mobil calc(100% - 24 bzw. 32 px) und gewann; Header und Inhalt hatten bis 480 px 12 statt 16 px Rand (Mobile-QA 12.10.2026) */ body.ampli-rd #main-header > .container, body.ampli-rd #main-header > .container.et_menu_container, body.ampli-rd #top-header > .container { width: min(var(--a5-fluid), var(--a5-wrap)) !important; max-width: var(--a5-wrap) !important; } /* Megamenü „Energieprodukte“ (Inhalte: inc/ampli-redesign.php, Filter wp_nav_menu_objects / nav_menu_item_title). Öffnet bei Hover, Tastaturfokus (:focus-within) und schließt mit Escape (assets/ampli-redesign.js). Panel so breit wie der Header-Container. */ @media (min-width: 981px) { body.ampli-rd #main-header .container { position: relative; } body.ampli-rd.ampli-opt-header #top-menu > li.a5-mega > ul.sub-menu, body.ampli-rd .ampli-opt-header #top-menu > li.a5-mega > ul.sub-menu, body.ampli-rd #top-menu > li.a5-mega > ul.sub-menu { left: 0 !important; right: 0 !important; width: 100% !important; max-width: none !important; display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; padding: 24px !important; border: 1px solid var(--a5-line) !important; border-top: 0 !important; border-radius: 0 0 var(--a5-r) var(--a5-r) !important; background: var(--a5-white) !important; box-shadow: 0 18px 40px rgba(28, 27, 26, .12) !important; } body.ampli-rd #top-menu > li.a5-mega.a5-mega--closed > ul.sub-menu { opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; } body.ampli-rd #top-menu > li.a5-mega > ul.sub-menu > li.a5-mega-item { width: auto !important; margin: 0 !important; padding: 0 !important; border: 1px solid var(--a5-line) !important; border-radius: var(--a5-r) !important; background: var(--a5-white); overflow: hidden; transform: none !important; } body.ampli-rd #top-menu > li.a5-mega > ul.sub-menu > li.a5-mega-item > a { display: flex !important; flex-direction: column; gap: 0; width: 100% !important; height: 100%; padding: 0 !important; color: var(--a5-ink) !important; text-transform: none !important; letter-spacing: 0 !important; line-height: 1.4 !important; } body.ampli-rd #top-menu > li.a5-mega > ul.sub-menu > li.a5-mega-item:hover, body.ampli-rd #top-menu > li.a5-mega > ul.sub-menu > li.a5-mega-item:focus-within { border-color: #cfc8bf !important; box-shadow: var(--a5-shadow); } body.ampli-rd .a5-mega__media { display: block; background: var(--a5-surface); } body.ampli-rd .a5-mega__media img, body.ampli-rd .a5-mega__media picture { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; } body.ampli-rd .a5-mega__body { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px 16px; } body.ampli-rd .a5-mega__title { font: 650 16px/1.3 var(--a5-font); color: var(--a5-ink); } body.ampli-rd .a5-mega-item > a:hover .a5-mega__title { color: var(--a5-red); } body.ampli-rd .a5-mega__text { font: 400 14px/1.45 var(--a5-font); color: var(--a5-muted); white-space: normal; } body.ampli-rd .a5-mega__price { margin-top: 4px; font: 700 14px/1.3 var(--a5-font); color: var(--a5-ink); } body.ampli-rd #top-menu > li.a5-mega > ul.sub-menu > li.a5-mega-all { grid-column: 1 / -1; width: auto !important; margin: 0 !important; padding: 4px 0 0 !important; border: 0 !important; border-top: 1px solid var(--a5-line) !important; text-align: right; } body.ampli-rd #top-menu > li.a5-mega > ul.sub-menu > li.a5-mega-all > a { display: inline-flex !important; align-items: center; gap: .45em; width: auto !important; min-height: 44px; padding: 10px 0 0 !important; font: 600 15px/1.3 var(--a5-font) !important; color: var(--a5-ink) !important; text-transform: none !important; } body.ampli-rd #top-menu > li.a5-mega > ul.sub-menu > li.a5-mega-all .a5-link__arrow { color: var(--a5-red); } } /* Mobil: Produktgruppen als ruhige Liste ohne Bilder */ @media (max-width: 980px) { body.ampli-rd #mobile_menu .a5-mega__media { display: none; } /* Selektor stärker als die Bildliste des älteren Kopfbereichs (style.css, .ampli-opt-header #mobile_menu … > a: Raster 56 px + Text) */ body.ampli-rd #mobile_menu > li.menu-item-has-children > ul.sub-menu > li.a5-mega-item > a, body.ampli-rd #mobile_menu > li.menu-item-has-children > ul.sub-menu > li.a5-mega-all > a { display: flex !important; flex-direction: column; align-items: flex-start; gap: 2px; padding: 12px 20px 12px 32px !important; } body.ampli-rd #mobile_menu .a5-mega__body { display: flex; flex-direction: column; gap: 2px; } body.ampli-rd #mobile_menu .a5-mega__title { font: 650 16px/1.3 var(--a5-font); color: var(--a5-ink); } body.ampli-rd #mobile_menu .a5-mega__text { font: 400 14px/1.45 var(--a5-font); color: var(--a5-muted); } body.ampli-rd #mobile_menu .a5-mega__price { font: 700 14px/1.3 var(--a5-font); color: var(--a5-ink); } body.ampli-rd #mobile_menu > li.menu-item-has-children > ul.sub-menu > li.a5-mega-all > a { flex-direction: row; align-items: center; gap: .45em; font-weight: 600; } } body.ampli-rd #top-menu > li > a { font: 600 15px/1 var(--a5-font) !important; letter-spacing: .01em; } body.ampli-rd #top-menu > li > a:hover, body.ampli-rd #top-menu > li.current-menu-item > a, body.ampli-rd #top-menu > li.current_page_item > a { color: var(--a5-red) !important; } @media (max-width: 980px) { body.ampli-rd #et_mobile_nav_menu .mobile_nav ul#mobile_menu, body.ampli-rd #mobile_menu { border-top: 3px solid var(--a5-red) !important; padding: 8px 0 16px !important; box-shadow: 0 18px 40px rgba(28, 27, 26, .18) !important; max-height: calc(100vh - 80px); overflow-y: auto; } /* li.menu-item-has-children: style.css (.ampli-opt-header … li.menu-item-has-children > a, 4px) ist spezifischer */ body.ampli-rd #mobile_menu > li > a, body.ampli-rd #mobile_menu > li.menu-item-has-children > a { display: flex !important; align-items: center; min-height: 52px; padding: 12px 20px !important; font: 600 17px/1.3 var(--a5-font) !important; border-bottom: 1px solid var(--a5-line) !important; } body.ampli-rd #mobile_menu .sub-menu li a { min-height: 48px; font-size: 16px !important; } body.ampli-rd .mobile_menu_bar { min-width: 48px; min-height: 48px; } } /* Schwebender Side-Cart-Korb entfällt auf allen Breiten: Desktop nutzt den Warenkorb-Eintrag im festen Header-Menü, mobil den Header-Warenkorb unten. Side-Cart, Anzahl und Fragmente bleiben unverändert. */ body.ampli-rd .xoo-wsc-basket { display: none !important; } /* Mobiler Header-Warenkorb (et_header_top, Side-Cart-Kurzcode): links neben dem Menüknopf, ersetzt mobil den Warenkorb-Eintrag im aufgeklappten Menü. Desktop: ausgeblendet, dort bleibt der Eintrag im Menü. */ body.ampli-rd .a5-mcart { display: none; } @media (max-width: 980px) { body.ampli-rd #main-header .container { position: relative; } body.ampli-rd .a5-mcart { display: block; position: absolute; top: 50%; right: 56px; z-index: 2; transform: translateY(-50%); } body.ampli-rd .a5-mcart .xoo-wsc-sc-cont { display: block; margin: 0; padding: 0; } body.ampli-rd .a5-mcart .xoo-wsc-cart-trigger { position: relative; display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: var(--a5-r-sm); color: var(--a5-ink); cursor: pointer; } body.ampli-rd .a5-mcart .xoo-wsc-sc-bki { margin: 0 !important; font-size: 26px !important; line-height: 1 !important; color: var(--a5-ink) !important; } body.ampli-rd .a5-mcart .xoo-wsc-sc-subt { display: none !important; } body.ampli-rd .a5-mcart .xoo-wsc-sc-count { position: absolute !important; top: 4px !important; right: 2px !important; left: auto !important; display: flex !important; align-items: center; justify-content: center; min-width: 20px !important; width: auto !important; height: 20px !important; padding: 0 5px; border-radius: 10px; background: var(--a5-red) !important; color: #fff !important; font: 700 11px/20px var(--a5-font) !important; } body.ampli-rd .a5-mcart .xoo-wsc-cart-trigger:focus-visible { outline: 2px solid var(--a5-red); outline-offset: 2px; } /* Warenkorb-Menüpunkt 2333: style.css erzwingt ihn per ID-Selektor, daher hier ebenfalls per ID */ body.ampli-rd #mobile_menu > li#menu-item-2333, body.ampli-rd #mobile_menu li:has(> .xoo-wsc-sc-cont), body.ampli-rd #mobile_menu li:has(> a > .xoo-wsc-sc-cont) { display: none !important; } } /* Sprachwahl (GTranslate) im Header: Desktop rechts neben dem Warenkorb, mobil links neben dem Warenkorb. Vor der Borlabs-Einwilligung Erklärung mit Schalter, danach das GTranslate-Widget (inc/ampli-redesign.php). */ body.ampli-rd .a5-lang { position: relative; z-index: 3; } body.ampli-rd .a5-lang__btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 44px; height: 40px; padding: 0 10px; border: 1px solid var(--a5-line); border-radius: var(--a5-r-sm); background: var(--a5-white); color: var(--a5-ink); cursor: pointer; font: 600 13px/1 var(--a5-font); letter-spacing: .04em; } body.ampli-rd .a5-lang__btn:hover, body.ampli-rd .a5-lang__btn[aria-expanded="true"] { border-color: var(--a5-ink); } body.ampli-rd .a5-lang__btn .a5-icon { width: 18px; height: 18px; vertical-align: 0; } body.ampli-rd .a5-lang__panel { position: absolute; top: calc(100% + 8px); right: 0; width: min(340px, calc(100vw - 32px)); padding: 18px; border: 1px solid var(--a5-line); border-radius: var(--a5-r); background: var(--a5-white); box-shadow: 0 18px 40px rgba(28, 27, 26, .16); text-align: left; font-size: 14px; line-height: 1.5; color: var(--a5-ink); } body.ampli-rd .a5-lang__panel[hidden] { display: none !important; } body.ampli-rd .a5-lang__panel p { margin: 0 0 10px !important; padding: 0 !important; font-size: 14px !important; line-height: 1.5 !important; } body.ampli-rd .a5-lang__title { font-weight: 700 !important; font-size: 15px !important; } body.ampli-rd .a5-lang__hint, body.ampli-rd .a5-lang__legal { color: var(--a5-muted); font-size: 13px !important; } body.ampli-rd .a5-lang__panel a { color: var(--a5-ink) !important; text-decoration: underline; text-decoration-color: var(--a5-red); text-underline-offset: 3px; } body.ampli-rd .a5-lang__consent .brlbs-cmpnt-container { margin: 4px 0 12px; } /* Widget gerendert (nach Einwilligung): Erklärung ausblenden, Widget zeigen */ body.ampli-rd .a5-lang__widget:not(:has(.gtranslate_wrapper > *)) { display: none; } /* Nach Einwilligung bleibt der Schalter sichtbar (Widerruf an derselben Stelle), nur die Erklärung entfällt */ body.ampli-rd .a5-lang:has(.gtranslate_wrapper > *) .a5-lang__consent > p:first-child { display: none; } body.ampli-rd .a5-lang:has(.gtranslate_wrapper > *) .a5-lang__consent { margin-top: 4px; padding-top: 12px; border-top: 1px solid var(--a5-line); } body.ampli-rd .a5-lang__widget { margin: 0 0 12px; } body.ampli-rd .a5-lang__widget a.gt_switcher-popup { display: inline-flex !important; align-items: center; gap: 8px; min-height: 44px; padding: 6px 12px; border: 1.5px solid var(--a5-line-strong); border-radius: var(--a5-r-sm); text-decoration: none !important; font-weight: 600; } body.ampli-rd .a5-lang__widget a.gt_switcher-popup img { width: 22px; height: auto; } @media (min-width: 981px) { body.ampli-rd #et-top-navigation > .a5-lang { float: left; display: flex; align-items: center; height: 74px; margin-left: 14px; } body.ampli-rd.et-fixed-header #et-top-navigation > .a5-lang { height: auto; min-height: 60px; } } @media (max-width: 980px) { /* Ohne transform: Ein transformierter Vorfahr wird zum Bezugsrahmen des festen Panels, das dadurch nur 38 px breit und über 1000 px hoch war (Mobile-QA 12.10.2026, Screenshot 07). Zentrierung über den negativen Rand (Knopf 44 px). */ body.ampli-rd #et-top-navigation > .a5-lang { position: absolute; top: 50%; right: 108px; margin-top: -22px; transform: none; } body.ampli-rd .a5-lang__btn { height: 44px; padding: 0 8px; border-color: transparent; } body.ampli-rd .a5-lang__panel { position: fixed; top: 76px; right: 16px; left: 16px; width: auto; max-width: 420px; margin-left: auto; max-height: calc(100vh - 92px); max-height: calc(100dvh - 92px); overflow-y: auto; overscroll-behavior: contain; } } @media (max-width: 380px) { body.ampli-rd .a5-lang__code { display: none; } body.ampli-rd #et-top-navigation > .a5-lang { right: 106px; } } /* ---------- 5. Seitengerüst und Abschnitte ---------- */ body.ampli-rd .a5-section { padding: var(--a5-section) 0 !important; } body.ampli-rd .a5-section--tint { background: var(--a5-surface) !important; } body.ampli-rd .a5-section--dark { background: var(--a5-dark) !important; color: #f3efe9; } body.ampli-rd .a5-section--tight { padding: clamp(40px, 5vw, 64px) 0 !important; } body.ampli-rd .a5-section--hero { padding: clamp(16px, 3vw, 40px) 0 clamp(32px, 4vw, 48px) !important; background: linear-gradient(180deg, var(--a5-surface) 0%, var(--a5-white) 100%) !important; } body.ampli-rd .a5-section > .et_pb_row, body.ampli-rd .a5-section .a5-row { width: min(var(--a5-fluid), var(--a5-wrap)) !important; max-width: var(--a5-wrap) !important; padding: 0 !important; margin: 0 auto !important; } body.ampli-rd .a5-section .et_pb_text { margin-bottom: 0 !important; } body.ampli-rd .a5-section .et_pb_text_inner > *:last-child { margin-bottom: 0; padding-bottom: 0; } body.ampli-rd .a5-eyebrow, body.ampli-rd .a5-kicker { display: block; margin: 0 0 12px; padding: 0 !important; color: var(--a5-red); font-size: 13px !important; line-height: 1.3 !important; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; } body.ampli-rd .a5-kicker { margin-bottom: 6px; color: var(--a5-muted); font-size: 12px !important; letter-spacing: .1em; } body.ampli-rd .a5-h1, body.ampli-rd .a5-section h1 { margin: 0 0 18px; padding: 0; font-size: var(--a5-fs-h1) !important; line-height: 1.05 !important; font-weight: 700; letter-spacing: -.025em; } body.ampli-rd .a5-section h2 { margin: 0 0 14px; padding: 0; font-size: var(--a5-fs-h2) !important; line-height: 1.12 !important; font-weight: 700; letter-spacing: -.02em; } body.ampli-rd .a5-section h3 { margin: 0 0 8px; padding: 0; font-size: var(--a5-fs-h3) !important; line-height: 1.3 !important; font-weight: 650; } body.ampli-rd .a5-section p { font-size: var(--a5-fs-body); line-height: 1.65; } body.ampli-rd .a5-lead, body.ampli-rd .a5-section .a5-lead { font-size: var(--a5-fs-lead) !important; line-height: 1.55 !important; color: var(--a5-muted); max-width: 58ch; padding: 0 0 4px !important; } body.ampli-rd .a5-muted { color: var(--a5-muted); } body.ampli-rd .a5-nobr, body.ampli-rd a[href^="tel:"] { white-space: nowrap; } /* nur für zusammengehörige Begriffe wie „BZI-Technologie“ */ body.ampli-rd .a5-head { max-width: 760px; margin-bottom: clamp(24px, 3.4vw, 44px); } /* Überschrift über die volle Breite, Fließtext auf lesbare Zeilenlänge begrenzt (z. B. Events) */ body.ampli-rd .a5-head--wide { max-width: none; } body.ampli-rd .a5-head--wide .a5-lead { max-width: 68ch; } body.ampli-rd .a5-head--center { margin-left: auto; margin-right: auto; text-align: center; } body.ampli-rd .a5-head--center .a5-lead { margin-left: auto; margin-right: auto; } body.ampli-rd .a5-head--row { max-width: none; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 40px; } body.ampli-rd .a5-head--row > div { max-width: 680px; } body.ampli-rd .a5-subhead { margin-top: clamp(40px, 5vw, 64px); } body.ampli-rd .a5-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin-top: 28px; } body.ampli-rd .a5-note { font-size: var(--a5-fs-small) !important; line-height: 1.55 !important; color: var(--a5-muted); margin-top: 16px; } body.ampli-rd .a5-section a:not(.a5-btn):not(.a5-card__media):not(.a5-link):not(.a5-video__btn) { color: var(--a5-ink); text-decoration: underline; text-decoration-color: var(--a5-red); text-decoration-thickness: 1.5px; text-underline-offset: .22em; } body.ampli-rd .a5-section--dark a:not(.a5-btn):not(.a5-card__media):not(.a5-link):not(.a5-video__btn) { color: #fff; text-decoration-color: #e9b3a8; } :root body.ampli-rd .a5-section--dark :where(p, li) > a { text-decoration-color: #e9b3a8 !important; } body.ampli-rd .a5-section--dark h2, body.ampli-rd .a5-section--dark h3 { color: #fff; } body.ampli-rd .a5-section--dark p { color: var(--a5-dark-muted); } body.ampli-rd .a5-section--dark .a5-eyebrow { color: #e9b3a8; } body.ampli-rd .a5-split { display: grid; gap: clamp(28px, 5vw, 72px); grid-template-columns: 1fr; align-items: center; } @media (min-width: 981px) { body.ampli-rd .a5-split { grid-template-columns: 1fr 1fr; } body.ampli-rd .a5-split--wide-media { grid-template-columns: 1.15fr 1fr; } body.ampli-rd .a5-split--top { align-items: start; } } /* Sprungnavigation */ body.ampli-rd .a5-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 24px 0 0 !important; padding: 0 !important; list-style: none; } body.ampli-rd .a5-chips li { padding: 0 !important; } body.ampli-rd .a5-chips a { display: inline-flex; align-items: center; min-height: 44px; padding: 8px 16px; border-radius: var(--a5-r-sm); background: var(--a5-white); border: 1px solid var(--a5-line); color: var(--a5-ink) !important; text-decoration: none !important; font-weight: 600; font-size: 15px; } body.ampli-rd .a5-chips a:hover { border-color: var(--a5-ink); } /* Häkchenliste */ body.ampli-rd .a5-checks { list-style: none; margin: 20px 0 0 !important; padding: 0 !important; display: grid; gap: 10px; } body.ampli-rd .a5-checks li { display: flex; gap: 12px; align-items: flex-start; padding: 0 !important; font-size: 16px; line-height: 1.5; } body.ampli-rd .a5-checks .a5-icon { margin-top: 2px; color: var(--a5-red); } body.ampli-rd .a5-check { flex: 0 0 22px; width: 22px; height: 22px; border-radius: 50%; background: var(--a5-red); color: #fff; font-size: 13px; font-weight: 700; line-height: 22px; text-align: center; } body.ampli-rd .a5-section--dark .a5-check { background: #e9b3a8; color: var(--a5-dark); } body.ampli-rd .a5-mt { margin-top: var(--a5-gap); } body.ampli-rd .a5-section--flush { padding-top: 0 !important; } body.ampli-rd .a5-section--page { padding-top: 8px !important; } body.ampli-rd .a5-section--page .a5-head { margin-bottom: 0; } /* Mobil: Einleitung (hell auslaufend) und folgender heller Abschnitt addierten 32 + 56 px Leerraum (Mobile-QA 12.10.2026, Screenshot 08, nach der Sprungnavigation) */ @media (max-width: 980px) { body.ampli-rd .a5-section--hero + .a5-section:not(.a5-section--tint):not(.a5-section--dark) { padding-top: 24px !important; } } /* Rank-Math-Brotkrumen auf den neuen Seiten */ body.ampli-rd .a5-section .rank-math-breadcrumb { margin: 0 0 clamp(20px, 3vw, 36px); } body.ampli-rd .a5-section .rank-math-breadcrumb p { margin: 0; padding: 0; font-size: 14px !important; color: var(--a5-muted); } body.ampli-rd .a5-section .rank-math-breadcrumb a { color: var(--a5-muted) !important; } /* Faktenliste (BZI-Seite) */ body.ampli-rd .a5-facts { display: grid; grid-template-columns: max-content 1fr; gap: 12px 18px; margin: 12px 0 0; } body.ampli-rd .a5-facts dt { font-weight: 700; color: var(--a5-ink); } body.ampli-rd .a5-facts dd { margin: 0; color: var(--a5-muted); line-height: 1.55; } /* „Auf einen Blick“ (BZI-Seite, Durchlauf 11.10.2026): Bezeichnung klein über dem Wert, je Paar eine Zeile Wert; Raster zweispaltig ab 600 px, kein zufälliger Umbruch einzelner Werte */ body.ampli-rd .a5-glance h3 { margin: 0 0 14px !important; } body.ampli-rd .a5-glance__list { display: grid; grid-template-columns: 1fr; gap: 0; margin: 0 !important; } @media (min-width: 600px) { body.ampli-rd .a5-glance__list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; } } body.ampli-rd .a5-glance__list > div { padding: 12px 0; border-top: 1px solid var(--a5-line); } body.ampli-rd .a5-glance__list dt { margin: 0 0 2px; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--a5-muted); } body.ampli-rd .a5-glance__list dd { margin: 0; font-size: 16px; font-weight: 600; line-height: 1.4; color: var(--a5-ink); } body.ampli-rd .a5-glance + .a5-callout { margin-top: 20px !important; } /* Vorführtests (BZI-Seite): je Test Karte mit Ablauf und Bildpaar ohne/mit; Bilder nie größer als ihre Originalbreite */ body.ampli-rd .a5-tests { display: grid; gap: var(--a5-gap); grid-template-columns: 1fr; } @media (min-width: 1100px) { body.ampli-rd .a5-tests { grid-template-columns: repeat(3, minmax(0, 1fr)); } /* Titel, Einleitung, Schritte, Bildpaar und Hinweis stehen in allen drei Karten auf gleicher Höhe */ @supports (grid-template-rows: subgrid) { body.ampli-rd .a5-tests > .a5-test { display: grid; grid-row: span 5; grid-template-rows: subgrid; row-gap: 0; } body.ampli-rd .a5-tests .a5-test__compare { margin-top: 0; align-self: start; } } } body.ampli-rd .a5-test { display: flex; flex-direction: column; padding: clamp(18px, 2.4vw, 24px); border: 1px solid var(--a5-line); border-radius: var(--a5-r); background: var(--a5-white); } body.ampli-rd .a5-section h3.a5-test__title { margin: 0 0 6px !important; font-size: 20px !important; } body.ampli-rd .a5-section p.a5-test__intro { margin: 0 0 10px !important; padding: 0 !important; font-size: 15px !important; line-height: 1.55 !important; color: var(--a5-muted); } body.ampli-rd .a5-test__steps { counter-reset: a5t; display: grid; gap: 6px; align-content: start; margin: 0 0 16px !important; padding: 0 !important; list-style: none !important; } body.ampli-rd .a5-test__steps li { counter-increment: a5t; position: relative; margin: 0 !important; padding: 0 0 0 30px !important; list-style: none !important; font-size: 15px; line-height: 1.5; } body.ampli-rd .a5-test__steps li::before { content: counter(a5t); position: absolute; left: 0; top: 1px; width: 22px; height: 22px; border-radius: 50%; background: var(--a5-red); color: #fff; font: 700 12px/22px var(--a5-font); text-align: center; } body.ampli-rd .a5-test__compare { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: auto; } body.ampli-rd .a5-test__fig { margin: 0; } body.ampli-rd .a5-test__img { display: flex; align-items: center; justify-content: center; aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--a5-r-sm); background: #fff; border: 1px solid var(--a5-line); } body.ampli-rd .a5-test__img img { display: block; width: auto !important; max-width: 100%; height: auto; max-height: 100%; object-fit: contain; } body.ampli-rd .a5-test__fig figcaption { margin-top: 8px; font-size: 14px; line-height: 1.45; color: var(--a5-muted); } body.ampli-rd .a5-test__fig figcaption strong { display: block; color: var(--a5-ink); } body.ampli-rd .a5-test__fig + .a5-test__fig figcaption strong { color: var(--a5-red); } body.ampli-rd .a5-section p.a5-test__note { margin: 14px 0 0 !important; padding: 10px 12px !important; border-radius: var(--a5-r-sm); background: #fbf6ea; font-size: 14px !important; line-height: 1.5 !important; color: var(--a5-ink); } @media (min-width: 640px) and (max-width: 1099px) { body.ampli-rd .a5-test { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 24px; align-items: start; } body.ampli-rd .a5-test > :not(.a5-test__compare) { grid-column: 1; } body.ampli-rd .a5-test__compare { grid-column: 2; grid-row: 1 / span 4; margin-top: 0; } } body.ampli-rd .a5-section--dark .a5-checks li { color: #f3efe9; } body.ampli-rd .a5-section--dark .a5-checks .a5-icon { color: #e9b3a8; } /* ---------- 6. Komponenten ---------- */ /* Versandkosten [ampli_versandkosten] (Versandseite): Werte aus den WooCommerce-Versandzonen */ body.ampli-rd .a5-ship { margin: 16px 0 12px; } body.ampli-rd .a5-ship .a5-table { min-width: 0; } body.ampli-rd .a5-ship th[scope="row"] { width: 42%; font-weight: 700; vertical-align: top; } body.ampli-rd .a5-ship__places { display: block; margin-top: 4px; font-size: 14px; font-weight: 400; line-height: 1.5; color: var(--a5-muted); } body.ampli-rd .a5-ship td ul { margin: 0 !important; padding: 0 !important; list-style: none; } body.ampli-rd .a5-ship td li { margin: 0 0 4px !important; padding: 0 !important; list-style: none; } body.ampli-rd .a5-ship td li::before { content: none !important; } body.ampli-rd .a5-ship__note { margin: 0 0 24px !important; font-size: 15px; color: var(--a5-muted); } /* Familienangebot (Produkt 473): Häkchenlisten der Beschreibung haben keinen Abstand nach unten */ body.ampli-rd.postid-473 .et_pb_text_inner > ul + p { margin-top: 14px; } body.ampli-rd .a5-ship th[scope="row"] { width: 36%; } body.ampli-rd .a5-ship__time { white-space: nowrap; } /* Mobil: Zeilen gestapelt (Lieferziel, Versandarten, Lieferzeit mit Beschriftung), Kopfzeile nur für Screenreader */ @media (max-width: 600px) { body.ampli-rd .a5-ship thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } body.ampli-rd .a5-ship tr { display: block; padding: 14px 0; border-top: 1px solid var(--a5-line); } body.ampli-rd .a5-ship tbody tr:first-child { border-top: 0; } body.ampli-rd .a5-ship :is(th[scope="row"], td) { display: block; width: auto; padding: 0 16px !important; border: 0 !important; } body.ampli-rd .a5-ship td { margin-top: 8px; } body.ampli-rd .a5-ship__time { white-space: normal; } body.ampli-rd .a5-ship__time::before { content: "Lieferzeit: "; font-weight: 600; } } /* 404-Seite (templates/ampli-404.php) */ body.ampli-rd .a5-404 { padding: clamp(32px, 6vw, 88px) 0 !important; } body.ampli-rd .a5-404__wrap { width: min(var(--a5-fluid), var(--a5-wrap)); margin: 0 auto; } body.ampli-rd .a5-404__links { display: flex; flex-wrap: wrap; gap: 6px 24px; margin: 24px 0 0 !important; padding: 18px 0 0 !important; list-style: none; border-top: 1px solid var(--a5-line); } body.ampli-rd .a5-404__links li { padding: 0 !important; list-style: none; } body.ampli-rd .a5-404__links li::before { content: none !important; } /* 6.1 Hero */ body.ampli-rd .a5-hero { display: grid; gap: clamp(24px, 4vw, 64px); align-items: center; grid-template-columns: 1fr; } /* randlos: Seitenrand des Containers (--a5-fluid) aufheben. Zeile ab 400 px 92 % breit, 4,3478 % davon = 4 % der Seitenbreite; darunter mindestens 16 px (vw zählt die Scrollleiste mit) */ body.ampli-rd .a5-hero__media { order: -1; margin: 0 calc(-1 * max(16px, 4.3478%)); } /* Mobil beginnt das Bild bündig unter dem festen Header (Mobile-QA 12.10.2026, Screenshot 01: 16 px Abschnittsabstand darüber); ohne Bild bleibt der Abstand */ /* Mit Brotkrumen im Hero (z. B. BZI-Technologie): 16 px über und unter den Brotkrumen, Bild darunter (Mobile-QA 12.10.2026, Screenshot 28; die Regel oben setzte sonst die Brotkrumen direkt an den Header) */ @media (max-width: 980px) { body.ampli-rd .a5-section--hero:has(.a5-hero__media):not(:has(.rank-math-breadcrumb)) { padding-top: 0 !important; } body.ampli-rd .a5-section--hero:has(.a5-hero__media) .rank-math-breadcrumb { margin-bottom: 16px; } } body.ampli-rd .a5-hero__media picture { display: block; } body.ampli-rd .a5-hero__media img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; max-height: 340px; object-fit: cover; object-position: 50% 30%; } body.ampli-rd .a5-hero h1 .a5-eyebrow { margin-bottom: 14px; } body.ampli-rd .a5-hero__price { margin: 6px 0 0 !important; padding: 0 !important; font-size: 15px !important; color: var(--a5-muted) !important; } body.ampli-rd .a5-hero__price strong { color: var(--a5-ink); font-weight: 700; } body.ampli-rd .a5-hero .a5-actions { margin-top: 24px; } body.ampli-rd .a5-trust { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 26px 0 0 !important; padding: 18px 0 0 !important; list-style: none; border-top: 1px solid var(--a5-line); } body.ampli-rd .a5-trust li { display: flex; align-items: center; gap: 8px; padding: 0 !important; font-size: 14px; line-height: 1.4; color: var(--a5-muted); } body.ampli-rd .a5-trust li::before { content: "✓"; display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 50%; background: var(--a5-red); color: #fff; font-size: 11px; font-weight: 700; } @media (min-width: 981px) { body.ampli-rd .a5-hero { grid-template-columns: 1fr 1fr; } body.ampli-rd .a5-hero--page { grid-template-columns: 1.2fr 1fr; } body.ampli-rd .a5-hero__media { order: 0; margin: 0; } body.ampli-rd .a5-hero__media img { aspect-ratio: 4 / 5; max-height: 620px; border-radius: var(--a5-r-lg); box-shadow: var(--a5-shadow); } body.ampli-rd .a5-hero--page .a5-hero__media img { aspect-ratio: 4 / 3; max-height: 420px; } } /* 6.2 Produktkarten: fünf Zeilen, im Raster per subgrid über alle Karten einer Reihe ausgerichtet */ body.ampli-rd .a5-cards { display: grid; gap: var(--a5-gap); grid-template-columns: 1fr; align-items: stretch; } @media (min-width: 600px) { body.ampli-rd .a5-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 720px) and (max-width: 980px) { body.ampli-rd .a5-cards--gross { grid-template-columns: repeat(3, minmax(0, 1fr)); } body.ampli-rd .a5-cards--gross .a5-card__head, body.ampli-rd .a5-cards--gross .a5-card__facts, body.ampli-rd .a5-cards--gross .a5-card__buy { padding-left: 14px; padding-right: 14px; } body.ampli-rd .a5-cards--gross .a5-card__action { padding: 14px; } body.ampli-rd .a5-cards--gross .a5-card__cta { padding: 10px 8px !important; font-size: 14px !important; } } @media (min-width: 981px) { body.ampli-rd .a5-cards--paar { grid-template-columns: repeat(2, minmax(0, 1fr)); } body.ampli-rd .a5-cards--gross { grid-template-columns: repeat(3, minmax(0, 1fr)); } body.ampli-rd .a5-cards--kompakt { grid-template-columns: repeat(4, minmax(0, 1fr)); } } body.ampli-rd .a5-card { display: grid; grid-template-rows: auto auto 1fr auto auto; background: var(--a5-white); border: 1px solid var(--a5-line); border-radius: var(--a5-r); overflow: hidden; transition: border-color .15s, box-shadow .15s; } @supports (grid-template-rows: subgrid) { body.ampli-rd .a5-cards > .a5-card { grid-row: span 5; grid-template-rows: subgrid; row-gap: 0; } } body.ampli-rd .a5-card:hover { border-color: #cfc8bf; box-shadow: var(--a5-shadow); } body.ampli-rd .a5-card__media { position: relative; display: block; background: var(--a5-surface); } body.ampli-rd .a5-card__media picture { display: block; } body.ampli-rd .a5-card__media img { display: block; width: 100% !important; height: auto !important; aspect-ratio: 4 / 3; object-fit: cover; } body.ampli-rd .a5-card__badge { position: absolute; top: 12px; left: 12px; z-index: 1; } body.ampli-rd .a5-card__head { padding: 18px 20px 0; } body.ampli-rd .a5-card__title { margin: 0 !important; padding: 0 !important; font-size: 21px !important; line-height: 1.25 !important; font-weight: 650 !important; font-family: var(--a5-font) !important; } body.ampli-rd .a5-card--kompakt .a5-card__title { font-size: 18px !important; } body.ampli-rd .a5-card__title a { color: var(--a5-ink) !important; text-decoration: none !important; } body.ampli-rd .a5-card__title a::after { content: ""; position: absolute; inset: 0; } /* ganze Karte klickbar */ body.ampli-rd .a5-card { position: relative; } body.ampli-rd .a5-card__title a:hover { color: var(--a5-red) !important; } body.ampli-rd .a5-card__facts { padding: 6px 20px 0; } body.ampli-rd .a5-card__facts p { -webkit-hyphens: manual; hyphens: manual; margin: 0 0 4px !important; padding: 0 !important; color: var(--a5-muted); font-size: 14.5px !important; line-height: 1.5 !important; text-wrap: pretty; } body.ampli-rd .a5-card__facts p.a5-card__meta { font-size: 13.5px !important; color: var(--a5-muted); } body.ampli-rd .a5-card__scope strong { color: var(--a5-ink); font-weight: 600; } body.ampli-rd .a5-card__buy { padding: 14px 20px 0; } body.ampli-rd .a5-card__price { margin: 0 !important; padding: 0 !important; font-size: 21px !important; font-weight: 700; color: var(--a5-ink); line-height: 1.3 !important; white-space: nowrap; } body.ampli-rd .a5-card__price del { color: var(--a5-muted); font-weight: 400; font-size: 16px; margin-right: 6px; } body.ampli-rd .a5-card__price ins { text-decoration: none; color: var(--a5-red); } /* Preis in Karten klar hervorgehoben (Desktop-QA 12.10.2026, Screenshot 01: WooCommerce-Betrag erschien normal statt fett) */ body.ampli-rd .a5-card__price .amount, body.ampli-rd .a5-card__price bdi { font-weight: 700; } body.ampli-rd .a5-card__price--info { font-size: 16px !important; font-weight: 600; color: var(--a5-muted); white-space: normal; } body.ampli-rd .a5-card__tax { margin: 2px 0 0 !important; padding: 0 !important; font-size: 13px !important; color: var(--a5-muted); line-height: 1.4 !important; } body.ampli-rd .a5-card__tax a { position: relative; z-index: 1; color: var(--a5-muted) !important; } /* Hinweis vor der Kaufentscheidung (z. B. Abverkauf): deutlich, aber ohne Alarmfarbe */ body.ampli-rd .a5-card__facts p.a5-card__note { margin-top: 8px !important; padding: 8px 10px !important; border-left: 3px solid var(--a5-gold); border-radius: var(--a5-r-xs); background: #fbf5e6; color: var(--a5-ink); font-size: 14px !important; } body.ampli-rd .a5-badge--note { background: var(--a5-ink); } /* Produktseite: Hinweis zum Produktzustand. Deutlich (Überschrift, Symbol, Rahmen in Gold), aber keine Fehlermeldung */ body.ampli-rd .a5-defect { display: flex; gap: 14px; align-items: flex-start; margin: 20px 0 20px !important; padding: 16px 18px !important; border: 1px solid #ead9ad; border-left: 4px solid var(--a5-gold); border-radius: var(--a5-r-sm); background: #fbf6ea; color: var(--a5-ink); } body.ampli-rd .a5-defect > .a5-icon { width: 22px; height: 22px; margin-top: 1px; color: #8a5f00; } body.ampli-rd .a5-defect p { margin: 0 !important; padding: 0 !important; -webkit-hyphens: none; hyphens: none; } body.ampli-rd .a5-defect__title { font: 700 16px/1.35 var(--a5-font) !important; color: var(--a5-ink) !important; } body.ampli-rd .a5-defect__text { margin-top: 4px !important; font-size: 15px !important; line-height: 1.55 !important; color: var(--a5-ink) !important; } /* Ersparnis in Karten */ body.ampli-rd .a5-card__save { margin: 2px 0 0 !important; padding: 0 !important; font-size: 13px !important; font-weight: 700; line-height: 1.4 !important; color: var(--a5-red); } body.ampli-rd .a5-card__action { padding: 16px 20px 20px; } body.ampli-rd .a5-card__cta { position: relative; z-index: 1; width: 100%; } body.ampli-rd .a5-card--kompakt .a5-card__head { padding: 18px 18px 0; } body.ampli-rd .a5-card--kompakt .a5-card__facts, body.ampli-rd .a5-card--kompakt .a5-card__buy { padding-left: 18px; padding-right: 18px; } body.ampli-rd .a5-card--kompakt .a5-card__action { padding: 16px 18px 18px; } /* Bis 599 px alle Karten einspaltig mit Bild oben, gleicher Aufbau für große und kompakte Karten (Startseite, Produktübersicht, „Ähnliche Produkte“). Die frühere Listenzeile (Bild 120 px links) ließ dem Text nur ca. 170 px (Mobile-QA 12.10.2026, Screenshots 03 und 15). Innenabstand 16 px wie der Seitenrand. */ @media (max-width: 599px) { body.ampli-rd .a5-card .a5-card__head, body.ampli-rd .a5-card--kompakt .a5-card__head { padding: 16px 16px 0; } body.ampli-rd .a5-card .a5-card__facts, body.ampli-rd .a5-card .a5-card__buy, body.ampli-rd .a5-card--kompakt .a5-card__facts, body.ampli-rd .a5-card--kompakt .a5-card__buy { padding-left: 16px; padding-right: 16px; } body.ampli-rd .a5-card .a5-card__action, body.ampli-rd .a5-card--kompakt .a5-card__action { padding: 14px 16px 16px; } body.ampli-rd .a5-card--kompakt .a5-card__title { font-size: 21px !important; } body.ampli-rd .a5-card__facts p { text-wrap: wrap; } } body.ampli-rd .a5-cards-footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; margin-top: 24px; } /* Aktionshinweis (Familienaktion) als schmale Leiste */ /* Desktop: Text nutzt die Breite, Link rechtsbündig, beides vertikal mittig; mobil untereinander */ body.ampli-rd .a5-promo-strip { display: grid; grid-template-columns: 1fr; gap: 6px 32px; align-items: center; margin-top: var(--a5-gap); padding: 14px 20px; border: 1px solid var(--a5-line); border-left: 4px solid var(--a5-red); border-radius: var(--a5-r); background: var(--a5-surface-2); } @media (min-width: 768px) { body.ampli-rd .a5-promo-strip { grid-template-columns: minmax(0, 1fr) auto; } } body.ampli-rd .a5-promo-strip p { -webkit-hyphens: none; hyphens: none; max-width: none !important; margin: 0 !important; padding: 0 !important; font-size: 16px; line-height: 1.5; } body.ampli-rd .a5-promo-strip .a5-link { justify-self: start; white-space: nowrap; } @media (min-width: 768px) { body.ampli-rd .a5-promo-strip .a5-link { justify-self: end; } } /* 6.3 BZI-Band */ body.ampli-rd .a5-bzi__media img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; max-height: 560px; object-fit: cover; object-position: 50% 25%; border-radius: var(--a5-r-lg); } @media (max-width: 980px) { body.ampli-rd .a5-bzi__media img { aspect-ratio: 16 / 10; max-height: 320px; } } body.ampli-rd .a5-bzi__text { max-width: 560px; } /* 6.4 Merkmale (Material, Verschluss, Verarbeitung): Spalten mit Linie statt Kästen */ body.ampli-rd .a5-specs { display: grid; gap: 28px var(--a5-gap); grid-template-columns: 1fr; margin: 0 !important; padding: 0 !important; list-style: none; } @media (min-width: 600px) { body.ampli-rd .a5-specs { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 981px) { body.ampli-rd .a5-specs { grid-template-columns: repeat(4, minmax(0, 1fr)); } } body.ampli-rd .a5-specs li { padding: 18px 0 0 !important; border-top: 2px solid var(--a5-ink); } body.ampli-rd .a5-specs h3 { margin: 0 0 6px !important; font-size: 18px !important; } body.ampli-rd .a5-specs p { margin: 0; padding: 0 !important; font-size: 16px !important; line-height: 1.6 !important; color: var(--a5-muted); } /* Merkmale mit Symbol ([ampli_merkmale]): gleiche Symbolfläche wie der Vertrauensbereich (44 px, Markenrot auf Rosé) */ body.ampli-rd .a5-specs--icons li { display: flex; flex-direction: column; padding: 22px 0 0 !important; border-top: 1px solid var(--a5-line); } body.ampli-rd .a5-specs__icon { display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; margin-bottom: 16px; border-radius: var(--a5-r-sm); background: var(--a5-red-soft); color: var(--a5-red); } body.ampli-rd .a5-specs__icon .a5-icon { width: 26px; height: 26px; stroke-width: 1.8; } body.ampli-rd .a5-section .a5-specs--icons h3 { margin: 0 0 8px !important; font-size: 18px !important; } body.ampli-rd .a5-specs--icons p { font-size: 15.5px !important; } @media (min-width: 981px) { body.ampli-rd .a5-specs--icons { column-gap: clamp(24px, 3vw, 40px); } } /* Familienaktion ([ampli_familienaktion]): Zeichen „6 für 5“, kurze Botschaft, Link zur Aktionsseite */ body.ampli-rd .a5-family { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px 24px; align-items: center; margin-top: var(--a5-gap); padding: clamp(18px, 2.4vw, 26px) clamp(18px, 2.6vw, 30px); border: 1px solid #ecd6d6; border-radius: var(--a5-r); background: linear-gradient(100deg, var(--a5-red-soft) 0%, var(--a5-surface-2) 70%); } body.ampli-rd .a5-family__mark { display: flex; align-items: center; justify-content: center; gap: 4px; width: 88px; height: 88px; margin: 0 !important; padding: 0 !important; border-radius: 50%; background: var(--a5-red); color: #fff; line-height: 1 !important; } body.ampli-rd .a5-family__mark span { font-size: 30px; font-weight: 800; letter-spacing: -.02em; } body.ampli-rd .a5-family__mark small { font-size: 12px; font-weight: 600; opacity: .9; } body.ampli-rd .a5-section h3.a5-family__title { margin: 0 0 6px !important; font-size: clamp(20px, 2vw, 24px) !important; line-height: 1.2 !important; font-weight: 700; color: var(--a5-ink); } body.ampli-rd .a5-family__text p { margin: 0 !important; padding: 0 !important; max-width: 70ch; font-size: 16px !important; line-height: 1.55 !important; color: var(--a5-ink); } body.ampli-rd .a5-family__text p.a5-family__note { margin-top: 8px !important; font-size: 14px !important; color: var(--a5-muted); } body.ampli-rd .a5-family__action { grid-column: 1 / -1; } @media (min-width: 900px) { body.ampli-rd .a5-family { grid-template-columns: auto minmax(0, 1fr) auto; } body.ampli-rd .a5-family__action { grid-column: auto; align-self: center; } body.ampli-rd .a5-family__action .a5-link { white-space: nowrap; } } @media (max-width: 480px) { body.ampli-rd .a5-family { grid-template-columns: 1fr; } body.ampli-rd .a5-family__mark { width: 72px; height: 72px; } body.ampli-rd .a5-family__mark span { font-size: 24px; } } /* 6.5 Größen */ /* Anleitung und Tabelle oben bündig; drei gleich gewichtete Schritte (Titel, eine Erläuterung), Hinweis kompakt darunter */ body.ampli-rd .a5-sizeguide-block { display: grid; gap: clamp(28px, 4vw, 56px); grid-template-columns: minmax(0, 1fr); align-items: start; } @media (min-width: 900px) { body.ampli-rd .a5-sizeguide-block { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } } body.ampli-rd .a5-steps { counter-reset: a5; list-style: none; margin: 0 !important; padding: 0 !important; display: grid; gap: 0; } body.ampli-rd .a5-steps li { counter-increment: a5; position: relative; display: grid; gap: 2px; padding: 16px 0 16px 52px !important; border-top: 1px solid var(--a5-line); font-size: 16px; line-height: 1.5; min-height: 36px; } body.ampli-rd .a5-steps li:first-child { padding-top: 0 !important; border-top: 0; } body.ampli-rd .a5-steps li strong { display: block; color: var(--a5-ink); font-size: 17px; } body.ampli-rd .a5-steps li span { display: block; color: var(--a5-muted); max-width: 52ch; } body.ampli-rd .a5-steps li:before { content: counter(a5); position: absolute; left: 0; top: 14px; width: 34px; height: 34px; border-radius: 50%; background: var(--a5-red); color: #fff; font-weight: 700; font-size: 15px; display: flex; align-items: center; justify-content: center; } body.ampli-rd .a5-steps li:first-child:before { top: -2px; } body.ampli-rd .a5-sizeguide-block .a5-note { margin-top: 8px; padding-top: 14px; border-top: 1px solid var(--a5-line); max-width: 60ch; } body.ampli-rd .a5-steps li { list-style: none !important; } body.ampli-rd .a5-steps li::marker { content: none; } body.ampli-rd .a5-sizetable th { -webkit-hyphens: none; hyphens: none; } /* Produktseiten: Größenabschnitt (früher Text, Bild, Tabelle in zwei Spalten) über die volle Zeilenbreite */ body.ampli-rd .et_pb_row:has(.a5-sizeguide-block) > .et_pb_column:not(:has(.a5-sizeguide-block)) { display: none !important; } body.ampli-rd .et_pb_row:has(.a5-sizeguide-block) > .et_pb_column:has(.a5-sizeguide-block) { width: 100% !important; margin-right: 0 !important; } body.ampli-rd .a5-sizetable { width: 100%; border-collapse: collapse; margin: 0 !important; background: var(--a5-white); border: 1px solid var(--a5-line) !important; border-radius: var(--a5-r); overflow: hidden; font-variant-numeric: tabular-nums; } body.ampli-rd .a5-sizetable th, body.ampli-rd .a5-sizetable td { padding: 11px 14px !important; border: 0 !important; border-top: 1px solid var(--a5-line) !important; text-align: left; font-size: 16px; line-height: 1.35; } body.ampli-rd .a5-sizetable thead th { border-top: 0 !important; background: var(--a5-surface); font-size: 14px; font-weight: 700; color: var(--a5-ink); vertical-align: bottom; } body.ampli-rd .a5-sizetable thead th span { display: block; font-weight: 400; color: var(--a5-muted); font-size: 13px; } /* Spaltenköpfe dürfen umbrechen (weiche Trennung in „Handgelenk­umfang“), Werte nicht; schmale Bildschirme ohne Überlauf */ body.ampli-rd .a5-sizetable { table-layout: fixed; } body.ampli-rd .a5-sizetable thead th { -webkit-hyphens: manual; hyphens: manual; overflow-wrap: anywhere; } body.ampli-rd .a5-sizetable tbody td { white-space: nowrap; } body.ampli-rd .a5-sizetable thead th:first-child { width: 22%; } body.ampli-rd .a5-sizetable tbody th { font-weight: 700; width: 22%; } body.ampli-rd .a5-sizetable td:last-child { color: var(--a5-muted); } @media (max-width: 420px) { body.ampli-rd .a5-sizetable th, body.ampli-rd .a5-sizetable td { padding: 9px 10px !important; font-size: 15px; } } /* Größenhilfe direkt unter dem Feld „Größe“ (in derselben Tabellenzelle, vor „Farbe“) */ body.ampli-rd .a5-sizeguide { margin: 8px 0 0; border: 1px solid var(--a5-line); border-radius: var(--a5-r-sm); background: var(--a5-white); } body.ampli-rd .a5-sizeguide summary { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 8px 14px; cursor: pointer; font-weight: 600; font-size: 15px; color: var(--a5-ink); list-style: none; } body.ampli-rd .a5-sizeguide summary > span { flex: 1 1 auto; } body.ampli-rd .a5-sizeguide summary .a5-icon { color: var(--a5-red); width: 18px; height: 18px; } body.ampli-rd .a5-sizeguide summary:hover > span { text-decoration: underline; text-decoration-color: var(--a5-red); text-underline-offset: 3px; } body.ampli-rd .a5-sizeguide summary::-webkit-details-marker { display: none; } body.ampli-rd .a5-sizeguide summary::after, body.ampli-rd .a5-disclosure summary::after { content: ""; flex: 0 0 auto; width: 9px; height: 9px; margin-right: 4px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-2px); transition: transform .15s; } body.ampli-rd .a5-sizeguide[open] summary::after, body.ampli-rd .a5-disclosure[open] summary::after { transform: rotate(-135deg) translateY(-2px); } body.ampli-rd .a5-sizeguide__body { padding: 4px 14px 14px; border-top: 1px solid var(--a5-line); } body.ampli-rd .a5-sizeguide__steps { counter-reset: a5sg; margin: 10px 0 12px !important; padding: 0 !important; list-style: none !important; display: grid; gap: 6px; } body.ampli-rd .a5-sizeguide__steps li { counter-increment: a5sg; position: relative; margin: 0 !important; padding: 0 0 0 28px !important; list-style: none !important; font-size: 14px; line-height: 1.45; color: var(--a5-ink); } body.ampli-rd .a5-sizeguide__steps li::before { content: counter(a5sg); position: absolute; left: 0; top: 0; width: 20px; height: 20px; border-radius: 50%; background: var(--a5-surface); color: var(--a5-red); font: 700 12px/20px var(--a5-font); text-align: center; } body.ampli-rd .a5-sizeguide__body p { margin: 0 !important; padding: 0 !important; font-size: 14px; line-height: 1.5; color: var(--a5-muted); } body.ampli-rd .a5-sizeguide__hint { margin: 10px 0 0 !important; } body.ampli-rd .a5-sizeguide__more { margin: 4px 0 0 !important; } body.ampli-rd .a5-sizeguide__more .a5-link { min-height: 40px; font-size: 14px; } /* Kompakte Tabelle: feste Spaltenanteile, keine Umbrüche in Werten, Zahlen tabellarisch; ab 320 px ohne Überlauf */ /* Divi setzt an jedes span der Auswahlzelle einen Select-Pfeil (td.value span:after); in der Größenhilfe nicht */ body.ampli-rd .a5-sizeguide span::after { content: none !important; display: none !important; } body.ampli-rd .a5-sizeguide .a5-sizetable { table-layout: fixed; border-radius: var(--a5-r-sm); } body.ampli-rd .a5-sizetable th, body.ampli-rd .a5-sizetable td { vertical-align: middle !important; } body.ampli-rd .a5-sizeguide .a5-sizetable th, body.ampli-rd .a5-sizeguide .a5-sizetable td { padding: 7px 10px !important; font-size: 14px; line-height: 1.3; white-space: nowrap; } body.ampli-rd .a5-sizeguide .a5-sizetable thead th { font-size: 12px; line-height: 1.25; white-space: normal; vertical-align: bottom; -webkit-hyphens: manual; hyphens: manual; } body.ampli-rd .a5-sizeguide .a5-sizetable thead th:first-child { width: 22%; } body.ampli-rd .a5-sizeguide .a5-sizetable tbody tr:nth-child(even) > * { background: var(--a5-surface-2); } body.ampli-rd .a5-sizeguide .a5-sizetable tbody th { width: auto; } @media (max-width: 380px) { body.ampli-rd .a5-sizeguide .a5-sizetable th, body.ampli-rd .a5-sizeguide .a5-sizetable td { padding: 7px 6px !important; font-size: 13px; } body.ampli-rd .a5-sizeguide__body { padding: 4px 10px 12px; } } /* 6.6 Kauf- und Serviceinformationen */ body.ampli-rd .a5-info { list-style: none; margin: 0 !important; padding: 0 !important; display: grid; gap: 12px; } body.ampli-rd .a5-info__item { display: flex; gap: 14px; align-items: flex-start; padding: 0 !important; font-size: 15px; line-height: 1.55; color: var(--a5-ink); } body.ampli-rd .a5-info__item strong { display: block; font-size: 16px; margin-bottom: 2px; } body.ampli-rd .a5-info__item a { color: var(--a5-ink) !important; text-decoration: underline; text-decoration-color: var(--a5-red); text-decoration-thickness: 1.5px; text-underline-offset: .22em; } body.ampli-rd .a5-info__icon { flex: 0 0 40px; width: 40px; height: 40px; border-radius: var(--a5-r-sm); background: var(--a5-surface) center/20px no-repeat; } body.ampli-rd .a5-info__item--truck .a5-info__icon { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23860000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 5h14v11H1zM15 9h4l4 4v3h-8'/%3E%3Ccircle cx='6' cy='18' r='2'/%3E%3Ccircle cx='18' cy='18' r='2'/%3E%3C/svg%3E"); } body.ampli-rd .a5-info__item--return .a5-info__icon { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23860000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 14L4 9l5-5'/%3E%3Cpath d='M4 9h11a5 5 0 010 10h-3'/%3E%3C/svg%3E"); } body.ampli-rd .a5-info__item--card .a5-info__icon { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23860000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='5' width='20' height='14' rx='2'/%3E%3Cpath d='M2 10h20'/%3E%3C/svg%3E"); } body.ampli-rd .a5-info--karten { grid-template-columns: 1fr; gap: var(--a5-gap); } @media (min-width: 981px) { body.ampli-rd .a5-info--karten { grid-template-columns: repeat(3, minmax(0, 1fr)); } } body.ampli-rd .a5-info--karten .a5-info__item { padding: 22px !important; background: var(--a5-white); border: 1px solid var(--a5-line); border-radius: var(--a5-r); } body.ampli-rd .a5-section--tint .a5-info--karten .a5-info__icon { background-color: var(--a5-surface); } /* 6.7 Kundenstimmen: originales Trustindex-Widget (Gestaltung aus dem Trustindex-Konto) in einheitlichem Rahmen. Nur Einbettung angepasst: volle Breite, keine Listenpunkte oder Abstände aus Theme-Stilen, Quellenhinweis darunter. */ body.ampli-rd .a5-ti { width: 100%; } body.ampli-rd .a5-ti .ti-widget { margin: 0 !important; } body.ampli-rd .a5-ti .ti-widget ul, body.ampli-rd .a5-ti .ti-widget ol { margin: 0 !important; padding: 0 !important; list-style: none !important; } body.ampli-rd .a5-ti .ti-widget li { padding: 0 !important; list-style: none !important; } body.ampli-rd .a5-ti .ti-widget li::before, body.ampli-rd .a5-ti .ti-widget li::marker { content: none !important; display: none !important; } body.ampli-rd .a5-ti .ti-widget p { padding: 0 !important; } body.ampli-rd .a5-ti .ti-widget img { max-width: none; } body.ampli-rd .a5-ti__note { margin: 16px 0 0 !important; padding: 0 !important; max-width: 820px; font-size: 14px !important; line-height: 1.55 !important; color: var(--a5-muted); } body.ampli-rd .a5-ti__note a { color: var(--a5-ink) !important; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; } body.ampli-rd .a5-ti__note .a5-icon { width: 14px; height: 14px; margin-left: 4px; vertical-align: -.1em; } /* Borlabs-Platzhalter bis zur Einwilligung im Kartenstil */ body.ampli-rd .a5-ti .brlbs-cmpnt-container { border-radius: var(--a5-r); overflow: hidden; } /* Produktseiten: Abschnitt „Kundenbewertungen“ auf Inhaltsbreite */ body.ampli-rd.single-product .et_pb_text .a5-ti { padding: clamp(24px, 4vw, 48px) 0; } /* 6.7b Vertrauensbereich [ampli_vertrauen]: ruhiges Raster, gleiche Textdichte, Symbole ergänzen die Überschrift */ body.ampli-rd .a5-trust-grid { display: grid; gap: 0 var(--a5-gap); grid-template-columns: 1fr; margin: 0 !important; padding: 0 !important; list-style: none; } @media (min-width: 640px) { body.ampli-rd .a5-trust-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 981px) { body.ampli-rd .a5-trust-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px var(--a5-gap); } } body.ampli-rd .a5-trust-item { display: grid; grid-template-columns: 44px minmax(0, 1fr); grid-template-rows: auto 1fr auto; column-gap: 16px; align-content: start; padding: 22px 0 !important; border-top: 1px solid var(--a5-line); list-style: none; } /* Unter 981 px natürliche Höhen: keine gestreckte Mittelzeile (1fr) und keine an die Zeilenhöhe der Nachbarkachel angeglichene Kachel; der Link folgt direkt dem Text (Befund 10.10.2026: Leerflächen mobil und bei 768 px). */ @media (max-width: 980px) { body.ampli-rd .a5-trust-grid { align-items: start; } body.ampli-rd .a5-trust-item { grid-template-rows: auto auto auto; padding: 20px 0 !important; } body.ampli-rd .a5-trust-item__more { margin-top: 8px; } } @media (min-width: 981px) { body.ampli-rd .a5-trust-grid { grid-auto-rows: auto; } body.ampli-rd .a5-trust-item { padding: 26px 0 !important; } } body.ampli-rd .a5-trust-item__icon { grid-row: 1 / span 3; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: var(--a5-r-sm); background: var(--a5-red-soft); color: var(--a5-red); } body.ampli-rd .a5-trust-item__icon .a5-icon { width: 26px; height: 26px; stroke-width: 1.9; } body.ampli-rd .a5-section h3.a5-trust-item__head { margin: 2px 0 6px !important; font-size: 18px !important; line-height: 1.3 !important; } body.ampli-rd .a5-trust-item__text { margin: 0 !important; padding: 0 !important; font-size: 15px !important; line-height: 1.55 !important; color: var(--a5-muted); } body.ampli-rd .a5-trust-item__more { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; margin-top: 10px; font-size: 15px; line-height: 1.45; } body.ampli-rd .a5-trust-item__more > a:not(.a5-link) { color: var(--a5-ink) !important; font-weight: 600; text-decoration: underline; text-decoration-color: var(--a5-red); text-underline-offset: 3px; } body.ampli-rd .a5-trust-item__more .a5-link { min-height: 36px; font-size: 15px; } body.ampli-rd .a5-trust-item__tel { font-size: 17px; white-space: nowrap; } body.ampli-rd .a5-trust-item__more .a5-nextevents { width: 100%; margin: 0 0 2px !important; } body.ampli-rd .a5-trust-item__more .a5-nextevents li { padding: 0 !important; border: 0; font-size: 14px; } body.ampli-rd .a5-trust-item__meta { color: var(--a5-muted); font-size: 14px; } body.ampli-rd .a5-trust-service { margin-top: clamp(28px, 4vw, 44px); padding-top: clamp(24px, 3vw, 32px); border-top: 2px solid var(--a5-ink); } body.ampli-rd .a5-trust-service h3 { margin: 0 0 16px !important; font-size: 15px !important; letter-spacing: .1em; text-transform: uppercase; } /* Produktseite: kompakte Fassung unter dem Kaufbutton */ body.ampli-rd .a5-trust-compact { display: grid; gap: 10px; margin: 18px 0 0 !important; padding: 16px 0 0 !important; list-style: none; border-top: 1px solid var(--a5-line); } body.ampli-rd .a5-trust-compact li { display: flex; gap: 12px; align-items: flex-start; margin: 0 !important; padding: 0 !important; list-style: none !important; font-size: 15px; line-height: 1.5; color: var(--a5-muted); } body.ampli-rd .a5-trust-compact li::before { content: none !important; } body.ampli-rd .a5-trust-compact li > .a5-icon { width: 22px; height: 22px; margin-top: 1px; color: var(--a5-red); } body.ampli-rd .a5-trust-compact strong { display: block; color: var(--a5-ink); font-size: 15px; } body.ampli-rd .a5-trust-compact a:not(.a5-link) { color: var(--a5-ink) !important; font-weight: 600; white-space: nowrap; } body.ampli-rd .a5-trust-compact__more { padding-left: 34px !important; } body.ampli-rd .a5-trust-compact .a5-link { min-height: 36px; font-size: 15px; } /* 6.7c Kontaktblock: Einladung, Telefon, Servicezeiten, Formular als eigene Aktion */ body.ampli-rd .a5-contact { display: grid; gap: 8px; justify-items: start; margin-top: 16px; padding: 20px 22px 22px; border: 1px solid var(--a5-line); border-radius: var(--a5-r); background: var(--a5-white); max-width: 420px; } body.ampli-rd .a5-contact p { margin: 0 !important; padding: 0 !important; } body.ampli-rd .a5-contact__intro { font-size: 16px !important; color: var(--a5-ink); } body.ampli-rd .a5-contact__tel a { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; color: var(--a5-ink) !important; text-decoration: none !important; font-size: 18px; font-weight: 700; letter-spacing: 0; white-space: nowrap; } body.ampli-rd .a5-contact__tel a span { text-decoration: underline; text-decoration-color: var(--a5-red); text-decoration-thickness: 2px; text-underline-offset: 5px; } body.ampli-rd .a5-contact__tel .a5-icon { width: 20px; height: 20px; color: var(--a5-red); } body.ampli-rd .a5-contact__tel a span { text-decoration-thickness: 1.5px !important; text-underline-offset: 4px !important; } body.ampli-rd .a5-contact__hours { display: flex; align-items: center; gap: 10px; font-size: 15px !important; color: var(--a5-muted); } body.ampli-rd .a5-contact__hours .a5-icon { width: 20px; height: 20px; margin: 0; } body.ampli-rd .a5-contact__action { margin-top: 8px !important; } body.ampli-rd .a5-contact__action .a5-btn { min-height: 44px; padding: 10px 18px !important; font-size: 15px !important; } /* Unterüberschrift innerhalb eines Abschnitts: Abstand nach oben (.a5-section h3 setzte margin-top auf 0) */ body.ampli-rd .a5-section h3.a5-subhead { margin: clamp(32px, 4vw, 48px) 0 0 !important; } /* Events, Rückblick: Jahreslinks als gleichmäßiges Raster, Video oben bündig mit dem Text */ body.ampli-rd #rueckblick .a5-split { align-items: start; } body.ampli-rd #rueckblick .a5-chips { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 176px), 1fr)); } body.ampli-rd #rueckblick .a5-chips a { justify-content: center; width: 100%; font-size: 14px; } @media (min-width: 981px) { body.ampli-rd #rueckblick .a5-video { margin-top: 44px; } } body.ampli-rd .a5-empty .a5-contact { background: var(--a5-white); } /* 6.7d Kontaktseite (scripts/redesign-2026-r6.php) und Formulare (Contact Form 7) im Hauptinhalt: Felder wie in Kasse und Konto (48 px, 1,5-px-Rahmen, 8 px Radius), Beschriftung über dem Feld, Formular als ruhige Karte statt rotem Rahmen (Mobile-QA 12.10.2026, Screenshot 25). Funktion, Feldnamen und Einwilligung unverändert. */ body.ampli-rd .a5-contactpage { display: grid; gap: var(--a5-gap); grid-template-columns: minmax(0, 1fr); align-items: start; margin-top: clamp(24px, 3vw, 40px); } @media (min-width: 900px) { body.ampli-rd .a5-contactpage { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: clamp(32px, 4vw, 56px); } } body.ampli-rd .a5-formcard { padding: clamp(16px, 3vw, 32px); border: 1px solid var(--a5-line); border-radius: var(--a5-r); background: var(--a5-white); } body.ampli-rd .a5-section h2.a5-formcard__title, body.ampli-rd .a5-section h2.a5-contactpage__title { margin: 0 0 16px !important; font-size: 22px !important; line-height: 1.25 !important; } body.ampli-rd .a5-contactpage__aside { padding: clamp(16px, 3vw, 28px); border-radius: var(--a5-r); background: var(--a5-surface); } body.ampli-rd .a5-ways { display: grid; gap: 18px; margin: 0 !important; padding: 0 !important; list-style: none !important; } body.ampli-rd .a5-way { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 14px; align-items: start; margin: 0 !important; padding: 0 !important; list-style: none !important; } body.ampli-rd .a5-way::before { content: none !important; } body.ampli-rd .a5-way__icon { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: var(--a5-r-sm); background: var(--a5-white); color: var(--a5-red); } body.ampli-rd .a5-way__icon .a5-icon { width: 20px; height: 20px; } body.ampli-rd .a5-section .a5-way p { margin: 0 !important; padding: 0 !important; font-size: 16px; line-height: 1.5; } body.ampli-rd .a5-section .a5-way p.a5-way__label { font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--a5-muted); } body.ampli-rd .a5-section .a5-way p.a5-way__value { color: var(--a5-ink); } body.ampli-rd .a5-section .a5-way p.a5-way__value a { color: var(--a5-ink) !important; font-weight: 700; text-decoration: underline !important; text-decoration-color: var(--a5-red) !important; text-decoration-thickness: 1.5px !important; text-underline-offset: 4px; border: 0 !important; background: none !important; white-space: nowrap; } body.ampli-rd .a5-section .a5-way p.a5-way__meta { font-size: 14px; color: var(--a5-muted); } body.ampli-rd #main-content .wpcf7 form > p, body.ampli-rd #main-content .wpcf7 .a5-field { margin: 0 0 16px !important; padding: 0 !important; } body.ampli-rd #main-content .wpcf7 form br { display: none; } body.ampli-rd #main-content .wpcf7 label { display: block; margin: 0 0 6px; padding: 0 !important; font: 600 15px/1.35 var(--a5-font) !important; color: var(--a5-ink); text-transform: none; } body.ampli-rd #main-content .wpcf7 .a5-req { color: var(--a5-red); font-weight: 700; } body.ampli-rd #main-content .wpcf7 .wpcf7-form-control-wrap { display: block; } body.ampli-rd #main-content .wpcf7 :is(input[type="text"], input[type="email"], input[type="tel"], input[type="number"], select, textarea) { display: block; width: 100% !important; min-height: var(--a5-btn-h); margin: 0 !important; padding: 10px 14px !important; border: 1.5px solid var(--a5-line-strong) !important; border-radius: var(--a5-r-sm) !important; background: var(--a5-white) !important; color: var(--a5-ink) !important; font: 400 16px/1.4 var(--a5-font) !important; box-shadow: none !important; } body.ampli-rd #main-content .wpcf7 textarea { height: 160px; min-height: 120px; resize: vertical; } body.ampli-rd #main-content .wpcf7 :is(input, select, textarea):focus { border-color: var(--a5-ink) !important; } body.ampli-rd #main-content .wpcf7 ::placeholder { color: #8d8780; opacity: 1; } body.ampli-rd #main-content .wpcf7 :is(input, select, textarea).wpcf7-not-valid { border-color: var(--a5-error) !important; } body.ampli-rd #main-content .wpcf7 .wpcf7-not-valid-tip { margin-top: 6px; font-size: 14px; font-weight: 600; color: var(--a5-error); } body.ampli-rd #main-content .wpcf7 .wpcf7-acceptance .wpcf7-list-item { margin: 0; } body.ampli-rd #main-content .wpcf7 .wpcf7-acceptance label { display: flex; gap: 10px; align-items: flex-start; font-weight: 400 !important; font-size: 15px !important; line-height: 1.5 !important; } body.ampli-rd #main-content .wpcf7 .wpcf7-acceptance input[type="checkbox"] { flex: 0 0 20px; width: 20px !important; height: 20px; margin: 2px 0 0 !important; accent-color: var(--a5-red); } body.ampli-rd #main-content .wpcf7 .wpcf7-acceptance a { color: var(--a5-ink) !important; text-decoration: underline; text-decoration-color: var(--a5-red); text-underline-offset: 3px; } body.ampli-rd #main-content .wpcf7 p.a5-form-hint { margin: 0 0 16px !important; font-size: 14px !important; color: var(--a5-muted); } body.ampli-rd #main-content .wpcf7 .a5-form-submit, body.ampli-rd #main-content .wpcf7 .a5-form-submit > p { display: block; margin: 0 !important; padding: 0 !important; } body.ampli-rd #main-content .wpcf7 .wpcf7-submit { width: 100%; margin: 0 !important; } @media (min-width: 600px) { body.ampli-rd #main-content .wpcf7 .wpcf7-submit { width: auto; } } body.ampli-rd #main-content .wpcf7 .wpcf7-submit:disabled { opacity: 1 !important; background: #b9a3a3 !important; border-color: #b9a3a3 !important; color: #fff !important; cursor: not-allowed; } body.ampli-rd #main-content .wpcf7 .wpcf7-response-output { margin: 16px 0 0 !important; padding: 12px 14px !important; border: 1px solid var(--a5-line) !important; border-left: 4px solid var(--a5-line-strong) !important; border-radius: var(--a5-r-sm); background: var(--a5-surface-2); font-size: 15px; color: var(--a5-ink); } body.ampli-rd #main-content .wpcf7 form.invalid .wpcf7-response-output, body.ampli-rd #main-content .wpcf7 form.unaccepted .wpcf7-response-output { border-left-color: var(--a5-error) !important; } body.ampli-rd #main-content .wpcf7 form.sent .wpcf7-response-output { border-left-color: var(--a5-success) !important; } /* 6.8 Video (Zwei-Klick) */ body.ampli-rd .a5-video { margin: 0; } body.ampli-rd .a5-video__btn { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--a5-r-lg); background: var(--a5-dark); color: #fff !important; text-decoration: none !important; } body.ampli-rd .a5-video__btn picture, body.ampli-rd .a5-video__img { display: block; width: 100%; height: 100%; } body.ampli-rd .a5-video__img { object-fit: cover; opacity: .82; transition: opacity .2s, transform .4s; } body.ampli-rd .a5-video__btn:hover .a5-video__img { opacity: .7; transform: scale(1.02); } body.ampli-rd .a5-video__play { position: absolute; top: 50%; left: 50%; display: flex; align-items: center; justify-content: center; width: 76px; height: 76px; margin: -38px 0 0 -38px; border-radius: 50%; background: var(--a5-red); box-shadow: 0 8px 24px rgba(0, 0, 0, .35); transition: transform .15s; } body.ampli-rd .a5-video__play .a5-icon { width: 30px; height: 30px; margin-left: 4px; } body.ampli-rd .a5-video__btn:hover .a5-video__play { transform: scale(1.06); } body.ampli-rd .a5-video__label { position: absolute; left: 0; right: 0; bottom: 0; padding: 40px 22px 18px; font-size: 17px; font-weight: 650; line-height: 1.35; background: linear-gradient(0deg, rgba(0, 0, 0, .7), rgba(0, 0, 0, 0)); } body.ampli-rd .a5-video iframe { display: block; width: 100%; aspect-ratio: 16 / 9; height: auto; border: 0; border-radius: var(--a5-r-lg); background: #000; } body.ampli-rd .a5-video__note { margin-top: 10px; font-size: 13px; line-height: 1.5; color: var(--a5-muted); } body.ampli-rd .a5-section--dark .a5-video__note { color: var(--a5-dark-muted); } body.ampli-rd .a5-video__note a { color: inherit !important; text-decoration: underline; } /* 6.9 Veranstaltungen: kompakte Einträge, auf Desktop drei Spalten, laufende Termine markiert (Status im Browser nachgeführt, assets/ampli-redesign.js) */ body.ampli-rd .a5-events__title { margin: 0 0 4px !important; } body.ampli-rd .a5-section h3.a5-events__month { margin: 28px 0 4px !important; padding: 0 0 8px !important; border-bottom: 2px solid var(--a5-ink); font-size: 14px !important; font-weight: 700 !important; letter-spacing: .08em; text-transform: uppercase; } body.ampli-rd .a5-events__list { display: grid; gap: 0; margin: 0 !important; padding: 0 !important; list-style: none; } body.ampli-rd .a5-event { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 14px; padding: 14px 0 !important; border-bottom: 1px solid var(--a5-line); list-style: none; } /* Status-Nachführung im Browser blendet per hidden aus (Termine, Monatsüberschriften, Badges, Leerzustand) */ body.ampli-rd [data-a5-events] [hidden], body.ampli-rd .a5-badge[hidden] { display: none !important; } body.ampli-rd .a5-event__date { margin: 0 !important; padding: 0 !important; } body.ampli-rd .a5-event__date time { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: var(--a5-r-sm); background: var(--a5-surface); line-height: 1.1; } body.ampli-rd .a5-event.is-running .a5-event__date time { background: var(--a5-red); color: #fff; } body.ampli-rd .a5-event__day { font-size: 19px; font-weight: 700; } body.ampli-rd .a5-event__month { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; } body.ampli-rd .a5-section h3.a5-event__name { margin: 0 0 2px !important; font-size: 17px !important; line-height: 1.3 !important; } body.ampli-rd .a5-event__when, body.ampli-rd .a5-event__where { margin: 0 !important; padding: 0 !important; font-size: 14px !important; line-height: 1.45 !important; color: var(--a5-ink); } body.ampli-rd .a5-event__when .a5-badge { margin-right: 8px; padding: 2px 6px; font-size: 11px; vertical-align: 1px; } body.ampli-rd .a5-event__where { color: var(--a5-muted); } body.ampli-rd .a5-event__venue { display: block; color: var(--a5-muted); } @media (min-width: 700px) { body.ampli-rd .a5-events__list:not(.a5-events__list--past) { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; } } @media (min-width: 1100px) { body.ampli-rd .a5-events__list:not(.a5-events__list--past) { grid-template-columns: repeat(3, minmax(0, 1fr)); } } body.ampli-rd .a5-events__list--past { margin-top: 12px !important; } body.ampli-rd .a5-events__list--past li { padding: 8px 0 !important; border-bottom: 1px solid var(--a5-line); font-size: 15px; line-height: 1.5; color: var(--a5-muted); } body.ampli-rd .a5-events__list--past strong { color: var(--a5-ink); font-weight: 600; } body.ampli-rd .a5-events__pastdate { display: inline-block; min-width: 13em; } body.ampli-rd .a5-empty { padding: clamp(24px, 4vw, 40px); border: 1px solid var(--a5-line); border-radius: var(--a5-r); background: var(--a5-surface-2); } /* Kurzliste (Startseite) */ body.ampli-rd .a5-nextevents { margin: 0 !important; padding: 0 !important; list-style: none; } body.ampli-rd .a5-nextevents li { display: grid; gap: 1px; padding: 10px 0 !important; border-bottom: 1px solid var(--a5-line); font-size: 15px; line-height: 1.4; list-style: none; } body.ampli-rd .a5-nextevents li:first-child { padding-top: 0 !important; } body.ampli-rd .a5-nextevents__date { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: var(--a5-red); letter-spacing: .02em; } body.ampli-rd .a5-nextevents__date .a5-badge { padding: 2px 6px; font-size: 10px; } body.ampli-rd .a5-nextevents__place { color: var(--a5-muted); font-size: 14px; } /* 6.10 Ausklappbereiche (Vergangene Termine, FAQ) */ body.ampli-rd .a5-disclosure { border-bottom: 1px solid var(--a5-line); } body.ampli-rd .a5-disclosure summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 56px; padding: 14px 0; cursor: pointer; list-style: none; font-weight: 650; font-size: 17px; line-height: 1.4; color: var(--a5-ink); } body.ampli-rd .a5-disclosure summary::-webkit-details-marker { display: none; } body.ampli-rd .a5-disclosure summary:hover { color: var(--a5-red); } body.ampli-rd .a5-disclosure > p { margin: 0 0 18px !important; padding: 0 !important; max-width: 70ch; font-size: 16px; line-height: 1.65; color: var(--a5-muted); } body.ampli-rd .a5-faq { border-top: 1px solid var(--a5-line); } body.ampli-rd .a5-events .a5-disclosure { margin-top: 32px; border-top: 1px solid var(--a5-line); } /* 6.11 Journal */ body.ampli-rd .a5-posts { display: grid; gap: var(--a5-gap); grid-template-columns: 1fr; } @media (min-width: 600px) { body.ampli-rd .a5-posts { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 981px) { body.ampli-rd .a5-posts { grid-template-columns: repeat(3, minmax(0, 1fr)); } } body.ampli-rd .a5-post { position: relative; display: flex; flex-direction: column; background: var(--a5-white); border: 1px solid var(--a5-line); border-radius: var(--a5-r); overflow: hidden; transition: border-color .15s, box-shadow .15s; } body.ampli-rd .a5-post:hover { border-color: #cfc8bf; box-shadow: var(--a5-shadow); } body.ampli-rd .a5-post__media img { display: block; width: 100%; height: auto; aspect-ratio: 5 / 3; object-fit: cover; } body.ampli-rd .a5-post__body { display: flex; flex-direction: column; flex: 1; padding: 20px 22px 22px; } body.ampli-rd .a5-post__title { margin: 0 0 8px !important; padding: 0 !important; font-size: 20px !important; line-height: 1.3 !important; font-weight: 650 !important; } body.ampli-rd .a5-post__title a { color: var(--a5-ink) !important; text-decoration: none !important; } body.ampli-rd .a5-post__title a::after { content: ""; position: absolute; inset: 0; } body.ampli-rd .a5-post__teaser { flex: 1; margin: 0 !important; padding: 0 !important; font-size: 15px !important; line-height: 1.6 !important; color: var(--a5-muted); } body.ampli-rd .a5-post__more { display: flex; align-items: center; gap: 6px; margin: 16px 0 0 !important; padding: 0 !important; font-size: 15px !important; font-weight: 600; color: var(--a5-red); } body.ampli-rd .a5-post:hover .a5-post__title a { color: var(--a5-red) !important; } @media (min-width: 900px) { body.ampli-rd .a5-post--top { display: grid; grid-template-columns: 1.2fr 1fr; } body.ampli-rd .a5-post--top .a5-post__media img { height: 100%; aspect-ratio: auto; min-height: 320px; } body.ampli-rd .a5-post--top .a5-post__body { justify-content: center; padding: clamp(28px, 4vw, 48px); } body.ampli-rd .a5-post--top .a5-post__title { font-size: clamp(24px, 2.4vw, 32px) !important; line-height: 1.2 !important; } body.ampli-rd .a5-post--top .a5-post__teaser { flex: 0; font-size: 17px !important; } } body.ampli-rd .a5-journal__group { margin-top: clamp(40px, 5vw, 64px); } body.ampli-rd .a5-section h2.a5-journal__title { margin: 0 0 20px !important; padding: 0 0 10px !important; border-bottom: 2px solid var(--a5-ink); font-size: 15px !important; font-weight: 700 !important; letter-spacing: .1em; text-transform: uppercase; } /* 6.11b Artikel-Template (templates/ampli-article.php): Titelbereich, Metadaten, Beitragsbild, Lesespalte mit Inhaltsverzeichnis, Zwischenüberschriften, Tabellen, Quellen und Infoboxen, Produktverweis, weiterführende Artikel */ body.ampli-rd .a5-article__wrap { width: min(var(--a5-fluid), 880px); margin: 0 auto; } body.ampli-rd .a5-article__wrap--wide { width: min(var(--a5-fluid), var(--a5-wrap)); } /* Kopfbereich durchgehend getönt, Beitragsbild vollständig darin (vorher lief die Kante bei 70 % quer durch das Bild) */ body.ampli-rd .a5-article__header { padding: clamp(28px, 4vw, 56px) 0 clamp(28px, 4vw, 48px); background: var(--a5-surface); } body.ampli-rd .a5-article__title { margin: 0 0 14px !important; padding: 0 !important; font: 700 clamp(30px, 4vw, 48px)/1.1 var(--a5-font) !important; letter-spacing: -.025em; color: var(--a5-ink) !important; -webkit-hyphens: none; hyphens: none; } body.ampli-rd .a5-article__meta { display: flex; flex-wrap: wrap; gap: 4px 18px; margin: 0 !important; padding: 0 0 clamp(20px, 3vw, 32px) !important; font-size: 15px !important; color: var(--a5-muted); } body.ampli-rd .a5-article__meta span + span::before { content: "·"; margin-right: 18px; color: var(--a5-line-strong); } @media (max-width: 600px) { body.ampli-rd .a5-article__meta { flex-direction: column; gap: 2px; } body.ampli-rd .a5-article__meta span + span::before { content: none; } } body.ampli-rd .a5-article__figure { width: min(var(--a5-fluid), 880px); margin: 0 auto !important; } /* Beitragsbild: ein Bild-Plugin legt die Klasse a5-article__img auf ; das darin war unbegrenzt (Befund 10.10.2026, /lederarmband-reinigen/: 880 × 528 in 440 px Box). Regeln daher am Figure-Element, natürliches Seitenverhältnis ohne Beschnitt (Titelgrafiken enthalten Text). */ body.ampli-rd .a5-article__figure picture { display: block; width: 100%; max-height: none; } body.ampli-rd .a5-article__figure img { display: block; width: 100%; max-width: 100%; height: auto; border-radius: var(--a5-r-lg); box-shadow: 0 1px 2px rgba(28, 27, 26, .06), 0 12px 32px rgba(28, 27, 26, .10); } /* Desktop: Kopfbereich auf dem Raster des Beitrags (Zeilenbreite wie 8.1 bis 1200 px, Inhaltsverzeichnis 240 px, Abstand 56 px, Lesespalte bis 760 px). Rubrik, Titel und Metadaten beginnen an der linken Kante der Beitragszeile und nutzen ihre Breite (vorher 880 px zentriert, um 120 px gegen Inhaltsverzeichnis und Lesespalte versetzt, Titel ab ca. 30 Zeichen zweizeilig; Desktop-QA 12.10.2026, Screenshot 08). Das Beitragsbild steht genau über der Lesespalte, das Inhaltsverzeichnis darunter links daneben. Ebenso der Produkthinweis am Ende. Mobil unverändert. */ @media (min-width: 981px) { body.ampli-rd .a5-article__header > .a5-article__wrap, body.ampli-rd .a5-article__footer > .a5-article__wrap { width: min(var(--a5-fluid), var(--a5-wrap)); } body.ampli-rd .a5-article__title { max-width: 1040px; font-size: clamp(34px, 3.5vw, 50px) !important; text-wrap: balance; } body.ampli-rd .a5-article__figure, body.ampli-rd .a5-article__footer > .a5-article__wrap { display: grid; grid-template-columns: 240px minmax(0, 1fr); column-gap: 56px; width: min(var(--a5-fluid), var(--a5-wrap)); } body.ampli-rd .a5-article__figure > *, body.ampli-rd .a5-article__footer > .a5-article__wrap > * { grid-column: 2; width: 100%; max-width: 760px; } /* Beitragsbild über die ganze Beitragszeile (Release-Korrektur 12.10.2026): linksbündig mit Rubrik, Titel und Inhaltsverzeichnis, rechts bündig mit der Lesespalte (240 + 56 + 760 px). Beitragsbilder sind 1000 × 600 px, daher keine breitere Hero-Fläche (Hochskalierung); natürliches Seitenverhältnis, kein Beschnitt. */ body.ampli-rd .a5-article__figure > * { grid-column: 1 / -1; max-width: calc(240px + 56px + 760px); } } /* Produktverweis im Artikeltext (ersetzt animierte Banner) */ body.ampli-rd .a5-article-cta { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 18px; align-items: center; margin: 32px 0 !important; padding: 16px; border: 1px solid var(--a5-line); border-radius: var(--a5-r); background: var(--a5-white); } body.ampli-rd .a5-article-cta__media { display: block; border-radius: var(--a5-r-sm); overflow: hidden; } body.ampli-rd .a5-article-cta__media img, body.ampli-rd .a5-article-cta__media picture { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; } body.ampli-rd .a5-article__content .et_pb_column:last-child .a5-article-cta p { margin: 0 !important; padding: 0 !important; } body.ampli-rd .a5-article__content .et_pb_column:last-child .a5-article-cta .a5-kicker { margin-bottom: 4px !important; font-size: 12px !important; line-height: 1.3 !important; color: var(--a5-red) !important; } body.ampli-rd .a5-article__content .et_pb_column:last-child p.a5-article-cta__title { font: 700 19px/1.3 var(--a5-font) !important; color: var(--a5-ink) !important; } body.ampli-rd .a5-article__content .et_pb_column:last-child p.a5-article-cta__text { margin-top: 4px !important; font-size: 15px !important; line-height: 1.5 !important; color: var(--a5-muted) !important; } body.ampli-rd .a5-article__content .et_pb_column:last-child .a5-article-cta a.a5-link { color: var(--a5-ink) !important; text-decoration: none !important; min-height: 40px; } body.ampli-rd .a5-article__content .et_pb_column:last-child p.a5-article-cta__price { margin-top: 6px !important; font-size: 15px !important; line-height: 1.4 !important; color: var(--a5-ink) !important; } /* Bis 599 px wie die Produktkarten: Bild oben über die Breite, Angaben darunter (Mobile-QA 12.10.2026, Screenshot 19: Text neben 84 px Bild nur ca. 190 px breit) */ @media (max-width: 599px) { body.ampli-rd .a5-article-cta { grid-template-columns: minmax(0, 1fr); gap: 0; padding: 0; overflow: hidden; } body.ampli-rd .a5-article-cta__media { border-radius: 0; } body.ampli-rd .a5-article-cta__media img, body.ampli-rd .a5-article-cta__media picture { aspect-ratio: 4 / 3; } body.ampli-rd .a5-article-cta__body { padding: 16px; } } /* Seitenleiste (Desktop, unter dem Inhaltsverzeichnis) */ body.ampli-rd .a5-article-side[hidden] { display: none !important; } body.ampli-rd .a5-article-side { display: grid; gap: 10px; margin-top: 28px; padding: 16px; border: 1px solid var(--a5-line); border-radius: var(--a5-r); background: var(--a5-white); } body.ampli-rd .a5-article-side__media { border-radius: var(--a5-r-sm); overflow: hidden; } body.ampli-rd .a5-article-side__media img, body.ampli-rd .a5-article-side__media picture { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; } body.ampli-rd .a5-article-side p { margin: 0 !important; padding: 0 !important; } body.ampli-rd .a5-article-side__title { font: 700 16px/1.35 var(--a5-font); color: var(--a5-ink); } body.ampli-rd .a5-article-side__price { font-size: 14px; color: var(--a5-muted); } body.ampli-rd .a5-article__content .et_pb_column:first-child .a5-article-side a { margin: 0 !important; padding-left: 0; border-left: 0 !important; font-size: 14px !important; } body.ampli-rd .a5-article__content .et_pb_column:first-child .a5-article-side .a5-btn { width: 100%; min-height: 44px; padding: 10px 14px !important; color: #fff !important; font-size: 15px !important; } /* Zitate in Artikeln (Divi-Testimonial „Zitat“, blockquote): groß, ruhig, typografisches Anführungszeichen, Quelle getrennt, kein breiter Balken */ body.ampli-rd .a5-article__content .et_pb_testimonial, body.ampli-rd .a5-article__content blockquote { position: relative; margin: 44px 0 !important; padding: 0 0 0 clamp(0px, 4vw, 40px) !important; border: 0 !important; background: transparent !important; box-shadow: none !important; text-align: left !important; } /* Kurze Linie in Markenrot statt Balken; die Zitattexte enthalten bereits typografische Anführungszeichen */ body.ampli-rd .a5-article__content .et_pb_testimonial::before, body.ampli-rd .a5-article__content blockquote::before { content: "" !important; display: block !important; position: static !important; width: 48px; height: 3px; margin: 0 0 18px; border-radius: 2px; background: var(--a5-red) !important; } body.ampli-rd .a5-article__content .et_pb_testimonial em, body.ampli-rd .a5-article__content blockquote em { font-style: normal; } body.ampli-rd .a5-article__content .et_pb_testimonial .et_pb_testimonial_description_inner, body.ampli-rd .a5-article__content .et_pb_testimonial .et_pb_testimonial_content { padding: 0 !important; } body.ampli-rd .a5-article__content .et_pb_column:last-child .et_pb_testimonial_content p, body.ampli-rd .a5-article__content .et_pb_column:last-child blockquote p { font: 500 clamp(21px, 2.2vw, 25px)/1.45 var(--a5-font) !important; font-style: normal !important; letter-spacing: -.01em; color: var(--a5-ink) !important; } body.ampli-rd .a5-article__content .et_pb_testimonial_meta { display: block; margin: 0 !important; padding: 0 !important; } /* Divi 5 setzt die Beschreibung als Flex-Spalte mit 30 px Abstand; Quelle und Zusatz gehören zusammen */ body.ampli-rd .a5-article__content .et_pb_testimonial_description { row-gap: 0 !important; gap: 0 !important; } body.ampli-rd .a5-article__content .et_pb_testimonial_author { display: block; margin: 18px 0 0 !important; padding: 0 !important; font: 700 15px/1.4 var(--a5-font) !important; color: var(--a5-ink) !important; } body.ampli-rd .a5-article__content .et_pb_testimonial_meta > span, body.ampli-rd .a5-article__content .et_pb_testimonial_position { display: block; margin: 2px 0 0 !important; font-size: 14px !important; line-height: 1.4 !important; color: var(--a5-muted) !important; } body.ampli-rd .a5-article__content .et_pb_testimonial_portrait { display: none !important; } @media (max-width: 600px) { body.ampli-rd .a5-article__content .et_pb_testimonial, body.ampli-rd .a5-article__content blockquote { padding-left: 0 !important; } } /* Beitragsinhalt (Divi-Zeile „Beitrag Row“: Inhaltsverzeichnis links, Text rechts) */ body.ampli-rd .a5-article__content { padding: clamp(28px, 4vw, 48px) 0 0 !important; } body.ampli-rd .a5-article__content .et_pb_section { padding: 0 !important; background: transparent !important; } body.ampli-rd .a5-article__content .et_pb_row { width: min(var(--a5-fluid), 1120px) !important; max-width: 1120px !important; padding: 0 !important; } @media (min-width: 981px) { body.ampli-rd .a5-article__content .et_pb_row:has(> .et_pb_column + .et_pb_column) { display: grid !important; grid-template-columns: 240px minmax(0, 1fr); gap: 56px; align-items: start; } body.ampli-rd .a5-article__content .et_pb_row:has(> .et_pb_column + .et_pb_column) > .et_pb_column { width: auto !important; margin: 0 !important; float: none !important; } body.ampli-rd .a5-article__content .et_pb_row:has(> .et_pb_column + .et_pb_column) > .et_pb_column:first-child { position: sticky; top: 110px; max-height: calc(100vh - 130px); overflow-y: auto; } } body.ampli-rd .a5-article__content .et_pb_column:last-child { max-width: 760px; } /* Inhaltsverzeichnis (Textmodul „Inhaltsverzeichnis“) */ body.ampli-rd .a5-article__content .et_pb_column:first-child h2, body.ampli-rd .a5-article__content .et_pb_column:first-child h3, body.ampli-rd .a5-article__content .et_pb_column:first-child h4 { margin: 0 0 10px !important; padding: 0 !important; font: 700 13px/1.3 var(--a5-font) !important; letter-spacing: .1em; text-transform: uppercase; color: var(--a5-muted) !important; } body.ampli-rd .a5-article__content .et_pb_column:first-child ul, body.ampli-rd .a5-article__content .et_pb_column:first-child ol { margin: 0 !important; padding: 0 !important; list-style: none !important; border-left: 2px solid var(--a5-line); } body.ampli-rd .a5-article__content .et_pb_column:first-child li { margin: 0 !important; padding: 0 !important; list-style: none !important; border: 0 !important; } body.ampli-rd .a5-article__content .et_pb_column:first-child li::before { content: none !important; } body.ampli-rd .a5-article__content .et_pb_column:first-child li a { display: block; padding: 7px 0 7px 14px; margin-left: -2px; border-left: 2px solid transparent; font-size: 14px !important; line-height: 1.4; color: var(--a5-ink) !important; text-decoration: none !important; } body.ampli-rd .a5-article__content .et_pb_column:first-child li a:hover, body.ampli-rd .a5-article__content .et_pb_column:first-child li a.is-active { border-left-color: var(--a5-red); color: var(--a5-red) !important; } /* Aufklappbar per JS (articleTocToggle): ab 981 px offen ohne , darunter zugeklappt über dem Artikeltext */ body.ampli-rd .a5-toc__summary { display: none; } @media (max-width: 980px) { body.ampli-rd .a5-article__content .et_pb_column:first-child { margin-bottom: 28px !important; padding: 16px 18px !important; border: 1px solid var(--a5-line); border-radius: var(--a5-r); background: var(--a5-surface-2); } /* style.css blendet die Spalte mobil aus (alte Vorlage: festes Panel über einer Leiste am unteren Rand) */ body.ampli-rd .a5-article__content #inhaltsverzeichnis-spalte { display: block !important; position: static !important; float: none !important; width: 100% !important; z-index: auto; background: var(--a5-surface-2) !important; } body.ampli-rd.a5-js .a5-article__content #inhaltsverzeichnis-spalte:has(.a5-toc), body.ampli-rd.a5-js .a5-article__content #inhaltsverzeichnis-spalte:has(.a5-toc) .et_pb_text { padding: 0 !important; } body.ampli-rd .a5-toc__summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; padding: 0 18px; font: 700 15px/1.3 var(--a5-font); color: var(--a5-ink); cursor: pointer; list-style: none; } body.ampli-rd .a5-toc__summary::-webkit-details-marker { display: none; } body.ampli-rd .a5-toc__summary::after { content: ""; flex: none; width: 9px; height: 9px; margin-top: -4px; border: solid var(--a5-ink); border-width: 0 2px 2px 0; transform: rotate(45deg); transition: transform .2s; } body.ampli-rd .a5-toc[open] > .a5-toc__summary::after { margin-top: 4px; transform: rotate(-135deg); } body.ampli-rd .a5-toc__summary:focus-visible { outline: 2px solid var(--a5-red); outline-offset: -2px; border-radius: var(--a5-r); } body.ampli-rd .a5-toc .a5-toc__heading { display: none !important; } body.ampli-rd .a5-toc[open] > :is(ul, ol) { margin: 0 18px 14px !important; } /* Rote Oberkante der alten Vorlage (style.css, Textmodul 2 px) lief über die gerundeten Ecken der Box (Mobile-QA 12.10.2026, Screenshot 17); die Box trägt nur ihren eigenen Rahmen */ body.ampli-rd .a5-article__content .et_pb_column:first-child > .et_pb_text { border-top: 0 !important; } body.ampli-rd .a5-article__content .et_pb_column:first-child { margin-bottom: 20px !important; } } /* Mobiles Inhaltsverzeichnis als Leiste unten und Bottom-Sheet (bis 980 px; assets/ampli-redesign.js, articleTocSheet). Die vorhandene Liste wird verschoben, nicht kopiert; die aufklappbare Box über dem Text entfällt dann (Mobile-QA 12.10.2026, Screenshot 21). Desktop unverändert. */ body.ampli-rd .a5-tocbar, body.ampli-rd .a5-tocsheet { display: none; } @media (max-width: 980px) { body.ampli-rd.a5-has-tocbar .a5-article__content #inhaltsverzeichnis-spalte { display: none !important; } body.ampli-rd.a5-has-tocbar { padding-bottom: calc(76px + env(safe-area-inset-bottom)); } body.ampli-rd.a5-has-tocbar .et_pb_scroll_top { bottom: calc(84px + env(safe-area-inset-bottom)) !important; } body.ampli-rd .a5-tocbar { position: fixed; left: 50%; bottom: calc(14px + env(safe-area-inset-bottom)); z-index: 9980; display: inline-flex; align-items: center; gap: 10px; min-height: 48px; margin-left: calc(min(260px, 100vw - 32px) / -2); width: min(260px, 100vw - 32px); justify-content: center; padding: 10px 18px; border: 1px solid rgba(255, 255, 255, .12); border-radius: var(--a5-r-sm); background: var(--a5-ink); color: #fff; box-shadow: 0 10px 28px rgba(28, 27, 26, .28); font: 600 15px/1.2 var(--a5-font); cursor: pointer; } body.ampli-rd .a5-tocbar[hidden] { display: none; } body.ampli-rd .a5-tocbar .a5-icon { width: 20px; height: 20px; } body.ampli-rd .a5-tocsheet:not([hidden]) { display: block; position: fixed; inset: 0; z-index: 100000; } body.ampli-rd .a5-tocsheet__backdrop { position: absolute; inset: 0; background: rgba(28, 27, 26, .45); } body.ampli-rd .a5-tocsheet__panel { position: absolute; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; max-height: 78vh; max-height: 78dvh; padding-bottom: env(safe-area-inset-bottom); border-radius: var(--a5-r-lg) var(--a5-r-lg) 0 0; background: var(--a5-white); box-shadow: 0 -12px 40px rgba(28, 27, 26, .2); } body.ampli-rd .a5-tocsheet__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 8px 10px 16px; border-bottom: 1px solid var(--a5-line); } body.ampli-rd .a5-tocsheet__title { margin: 0 !important; padding: 0 !important; font: 700 16px/1.3 var(--a5-font) !important; color: var(--a5-ink) !important; } body.ampli-rd .a5-tocsheet__close { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: var(--a5-r-sm); background: transparent; color: var(--a5-ink); font-size: 26px; line-height: 1; cursor: pointer; } body.ampli-rd .a5-tocsheet__close:hover { background: var(--a5-surface); } body.ampli-rd .a5-tocsheet__body { overflow-y: auto; overscroll-behavior: contain; padding: 6px 0 12px; } body.ampli-rd .a5-tocsheet__body :is(ul, ol) { margin: 0 !important; padding: 0 !important; list-style: none !important; } body.ampli-rd .a5-tocsheet__body li { margin: 0 !important; padding: 0 !important; list-style: none !important; border: 0 !important; } body.ampli-rd .a5-tocsheet__body li::before { content: none !important; } body.ampli-rd .a5-tocsheet__body a { display: block; min-height: 44px; padding: 11px 16px 11px 14px; border-left: 3px solid transparent; color: var(--a5-ink) !important; font: 500 16px/1.4 var(--a5-font); text-decoration: none !important; } body.ampli-rd .a5-tocsheet__body li li a { padding-left: 32px; font-size: 15px; color: var(--a5-muted) !important; } body.ampli-rd .a5-tocsheet__body a.is-active { border-left-color: var(--a5-red); background: var(--a5-surface-2); color: var(--a5-red) !important; font-weight: 600; } body.ampli-rd.a5-tocsheet-open { overflow: hidden; } } /* Lesetext */ body.ampli-rd .a5-article__content .et_pb_text { margin-bottom: 0 !important; } /* Textmodule ohne Box tragen keinen eigenen oberen Innenabstand (Divi-Einstellung 40 px); der Abstand kommt von der Zwischenüberschrift. Vorher 32 + 40 + 36 px zwischen Newsletter-Box und „Unser Fazit“ (Mobile-QA 12.10.2026, Screenshot 21). */ body.ampli-rd .a5-article__content .et_pb_column:last-child > .et_pb_text:not(.info-box):not(.expert-box):not(.key-facts):not(.action-box) { padding-top: 0 !important; } body.ampli-rd .a5-article__content .et_pb_column:last-child p, body.ampli-rd .a5-article__content .et_pb_column:last-child li { font-size: 18px !important; line-height: 1.7 !important; color: var(--a5-ink); } body.ampli-rd .a5-article__content .et_pb_column:last-child h2 { margin: clamp(36px, 4vw, 52px) 0 14px !important; padding: 0 !important; font: 700 clamp(24px, 2.6vw, 31px)/1.2 var(--a5-font) !important; letter-spacing: -.02em; color: var(--a5-ink) !important; scroll-margin-top: 110px; -webkit-hyphens: none; hyphens: none; } body.ampli-rd .a5-article__content .et_pb_column:last-child h3 { margin: 28px 0 10px !important; padding: 0 !important; font: 700 21px/1.3 var(--a5-font) !important; color: var(--a5-ink) !important; scroll-margin-top: 110px; } body.ampli-rd .a5-article__content .et_pb_column:last-child a:not(.et_pb_button) { color: inherit !important; text-decoration: underline; text-decoration-color: var(--a5-red) !important; text-decoration-thickness: 1.5px !important; text-underline-offset: .22em; } body.ampli-rd .a5-article__content .et_pb_column:last-child a:not(.et_pb_button):hover { color: var(--a5-red) !important; } body.ampli-rd .a5-article__content .et_pb_column:last-child ul { padding-left: 1.2em !important; } /* Mobile Leseskala (bis 600 px): Fließtext und Listen 17/1,65 wie --a5-fs-body der übrigen Seiten, Zwischenüberschriften 24 bzw. 19 px, Infoboxen 15 px (eine Stufe unter dem Fließtext), Zitate 20 px. Desktop unverändert (18/1,7). */ @media (max-width: 600px) { body.ampli-rd .a5-article__content .et_pb_column:last-child p, body.ampli-rd .a5-article__content .et_pb_column:last-child li { font-size: 17px !important; line-height: 1.65 !important; } body.ampli-rd .a5-article__content .et_pb_column:last-child h2 { font-size: 24px !important; } body.ampli-rd .a5-article__content .et_pb_column:last-child h3 { margin-top: 24px !important; font-size: 19px !important; } body.ampli-rd .a5-article__content .et_pb_column:last-child .et_pb_testimonial_content p, body.ampli-rd .a5-article__content .et_pb_column:last-child blockquote p { font-size: 20px !important; } } /* Infoboxen der Beiträge (Textmodule mit Hintergrund): Außen- und Innenabstand getrennt, ruhiger Rand */ body.ampli-rd .a5-article__content .info-box, body.ampli-rd .a5-article__content .expert-box, body.ampli-rd .a5-article__content .key-facts { margin: 28px 0 !important; padding: 20px 24px !important; border: 1px solid var(--a5-line) !important; border-left: 4px solid var(--a5-red) !important; border-radius: var(--a5-r-sm) !important; background: var(--a5-surface-2) !important; box-shadow: none !important; } body.ampli-rd .a5-article__content .key-facts { border-left-color: var(--a5-ink) !important; } /* Symbol der Expertenbox (style.css: .expert-box > div::before, 75 px bei left -85 px, gedacht für 100 px Innenabstand): feste 32 px innerhalb der Box, Text mit Platz daneben. Nur Artikel-Template. */ body.ampli-rd .a5-article__content .expert-box { padding-left: 72px !important; } body.ampli-rd .a5-article__content .expert-box > div { position: relative; } body.ampli-rd .a5-article__content .expert-box > div::before { top: -4px !important; left: -48px !important; width: 32px !important; height: 32px !important; background-size: 32px 32px !important; background-repeat: no-repeat; } /* Mobil: Symbol über dem Text statt in einer 60-px-Einrückung, Text nutzt die volle Boxbreite (Mobile-QA 12.10.2026, Screenshot 20) */ @media (max-width: 600px) { body.ampli-rd .a5-article__content :is(.info-box, .expert-box, .key-facts) { margin: 24px 0 !important; padding: 16px !important; } body.ampli-rd .a5-article__content .expert-box > div::before { position: static !important; display: block !important; width: 28px !important; height: 28px !important; margin: 0 0 10px !important; background-size: 28px 28px !important; } } /* Infoboxen: Selektor mit .et_pb_column:last-child, sonst gewann die Lesetext-Regel (18 px) über die Boxgröße (Mobile-QA 12.10.2026, Screenshot 18) */ body.ampli-rd .a5-article__content .et_pb_column:last-child :is(.info-box, .expert-box, .key-facts) :is(p, li) { font-size: 16px !important; line-height: 1.6 !important; } body.ampli-rd .a5-article__content .et_pb_column:last-child :is(.info-box, .expert-box, .key-facts) :is(ul, ol) { margin: 0 !important; } body.ampli-rd .a5-article__content .et_pb_column:last-child :is(.info-box, .expert-box, .key-facts) li { margin: 0 0 6px !important; padding-bottom: 0 !important; } body.ampli-rd .a5-article__content .et_pb_column:last-child :is(.info-box, .expert-box, .key-facts) h2, body.ampli-rd .a5-article__content .et_pb_column:last-child :is(.info-box, .expert-box, .key-facts) h3 { margin: 0 0 8px !important; font-size: 18px !important; line-height: 1.3 !important; } @media (max-width: 600px) { body.ampli-rd .a5-article__content .et_pb_column:last-child :is(.info-box, .expert-box, .key-facts) :is(p, li) { font-size: 15px !important; line-height: 1.55 !important; } body.ampli-rd .a5-article__content .et_pb_column:last-child :is(.info-box, .expert-box, .key-facts) :is(h2, h3) { font-size: 17px !important; } } body.ampli-rd .a5-article__content :is(.info-box, .expert-box, .key-facts) .et_pb_text_inner > :last-child { margin-bottom: 0 !important; padding-bottom: 0 !important; } body.ampli-rd .a5-article__content .table-template { margin: 28px 0 !important; } body.ampli-rd .a5-article__content table:not(.tablepress) { width: 100%; border-collapse: collapse; margin: 20px 0; font-size: 15px; } body.ampli-rd .a5-article__content table:not(.tablepress) th, body.ampli-rd .a5-article__content table:not(.tablepress) td { padding: 10px 12px; border-top: 1px solid var(--a5-line); text-align: left; vertical-align: top; } /* Abschluss: Produktverweis und weiterführende Artikel */ body.ampli-rd .a5-article__footer { padding-top: clamp(36px, 5vw, 64px); } body.ampli-rd .a5-article__product { padding: 22px 24px; border: 1px solid var(--a5-line); border-radius: var(--a5-r); background: var(--a5-surface-2); } body.ampli-rd .a5-article__product .a5-eyebrow { margin-bottom: 6px; } body.ampli-rd .a5-article__product-text { margin: 0 0 4px !important; padding: 0 !important; font-size: 16px !important; color: var(--a5-ink); } body.ampli-rd .a5-article__related { margin-top: clamp(40px, 5vw, 72px); padding: clamp(40px, 5vw, 72px) 0; background: var(--a5-surface); } body.ampli-rd .a5-article__related-title { margin: 0 0 22px !important; padding: 0 !important; font: 700 clamp(24px, 2.6vw, 32px)/1.2 var(--a5-font) !important; color: var(--a5-ink) !important; } body.ampli-rd .a5-article__journal { margin: 20px 0 0 !important; padding: 0 !important; } /* Kommentar- und Newsletterbox des Beitrags bleiben; Abstände angleichen */ body.ampli-rd .a5-article__content .action-box, body.ampli-rd .a5-article__content [class*="action-box"] { margin: 32px 0 !important; border-radius: var(--a5-r) !important; } /* Hinweis- und Newsletterboxen der Beiträge (action-box): ruhige Fläche im System, Link als Sekundärbutton statt rotem Großbuchstaben-Rahmen (Befund 11.10.2026, Screenshot 07) */ body.ampli-rd .a5-article__content .action-box { padding: 24px 26px !important; border: 1px solid var(--a5-line) !important; background: var(--a5-surface-2) !important; box-shadow: none !important; } body.ampli-rd .a5-article__content .action-box .et_pb_text_inner > * { text-align: left !important; } body.ampli-rd .a5-article__content .action-box h3 { margin: 0 0 6px !important; font: 700 19px/1.3 var(--a5-font) !important; } body.ampli-rd .a5-article__content .et_pb_column:last-child .action-box p { margin: 0 0 6px !important; padding: 0 !important; font-size: 16px !important; line-height: 1.6 !important; } body.ampli-rd .a5-article__content .et_pb_column:last-child .action-box a:not(.et_pb_button) { display: inline-flex; align-items: center; justify-content: center; gap: .5em; min-height: var(--a5-btn-h); margin-top: 14px; padding: 12px 22px; border: 1.5px solid var(--a5-ink) !important; border-radius: var(--a5-r-sm) !important; background: var(--a5-white) !important; color: var(--a5-ink) !important; font: 600 16px/1.2 var(--a5-font) !important; letter-spacing: 0 !important; text-transform: none !important; text-decoration: none !important; box-shadow: none !important; } body.ampli-rd .a5-article__content .et_pb_column:last-child .action-box a:not(.et_pb_button):hover { background: var(--a5-ink) !important; color: var(--a5-white) !important; } body.ampli-rd .a5-article__content .action-box a::after { display: none !important; } /* style.css: .popup-newsletter { height: 375px !important } gilt dem Popup-Inhalt, traf aber auch den Auslöser-Link */ body.ampli-rd a.popup-newsletter, body.ampli-rd a.popup-newsletteraktion { width: auto !important; height: auto !important; max-height: none !important; } /* 6.12 Spalten ohne Kästen (Mehr entdecken, Dokumente) */ /* Spalten teilen sich die Zeilen (Titel, Einleitung, Liste, Link) per subgrid: Titel und Abschlusslinks stehen bündig, ohne die Spalten künstlich zu strecken */ body.ampli-rd .a5-cols { display: grid; gap: 36px var(--a5-gap); grid-template-columns: 1fr; margin: 0 !important; padding: 0 !important; list-style: none; } @media (min-width: 768px) { body.ampli-rd .a5-cols { grid-template-columns: repeat(3, minmax(0, 1fr)); } body.ampli-rd .a5-cols--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(32px, 5vw, 72px); } } body.ampli-rd .a5-cols > li, body.ampli-rd .a5-cols > div { display: flex; flex-direction: column; padding: 20px 0 0 !important; border-top: 2px solid var(--a5-ink); } @supports (grid-template-rows: subgrid) { @media (min-width: 768px) { body.ampli-rd .a5-cols--sub { row-gap: 0; } body.ampli-rd .a5-cols--sub > div { display: grid; grid-row: span 4; grid-template-rows: subgrid; align-content: start; } body.ampli-rd .a5-cols--sub > div > .a5-link, body.ampli-rd .a5-cols--sub > div > p:has(> .a5-link:only-child) { align-self: end; justify-self: start; margin: 0 !important; } } } /* Automatische Absätze von Divi um Kurzcodes: leere Absätze belegen keine Rasterzeile */ body.ampli-rd .a5-section .et_pb_text_inner p:empty { display: none; } body.ampli-rd .a5-cols h3 { margin: 0 0 8px !important; } body.ampli-rd .a5-section .a5-cols h2.a5-cols__title { margin: 0 0 8px !important; font-size: clamp(22px, 2.2vw, 26px) !important; } body.ampli-rd .a5-cols p { margin: 0 0 14px !important; padding: 0 !important; font-size: 16px !important; color: var(--a5-muted); } body.ampli-rd .a5-cols .a5-link { margin-top: auto; padding-top: 8px; } body.ampli-rd .a5-linklist { margin: 0 0 12px !important; padding: 0 !important; list-style: none; } body.ampli-rd .a5-linklist li { padding: 0 !important; border-bottom: 1px solid var(--a5-line); } body.ampli-rd .a5-linklist a { display: block; padding: 11px 0; font-size: 15px; line-height: 1.4; color: var(--a5-ink) !important; text-decoration: none !important; font-weight: 600; } body.ampli-rd .a5-linklist a:hover { color: var(--a5-red) !important; } /* Dokumente (Untersuchungsunterlagen) */ body.ampli-rd .a5-docs { display: grid; gap: var(--a5-gap); grid-template-columns: 1fr; margin: 0 !important; padding: 0 !important; list-style: none; } @media (min-width: 900px) { body.ampli-rd .a5-docs { grid-template-columns: repeat(2, minmax(0, 1fr)); } } body.ampli-rd .a5-doc { display: flex; flex-direction: column; padding: 24px !important; background: var(--a5-white); border: 1px solid var(--a5-line); border-radius: var(--a5-r); } body.ampli-rd .a5-doc h3 { margin: 0 0 4px !important; } body.ampli-rd .a5-doc__type { margin: 0 0 12px !important; padding: 0 !important; font-size: 14px !important; color: var(--a5-muted); } body.ampli-rd .a5-doc p { font-size: 16px !important; } body.ampli-rd .a5-doc dl { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; margin: 4px 0 16px; font-size: 15px; line-height: 1.5; } body.ampli-rd .a5-doc dt { font-weight: 650; color: var(--a5-ink); } body.ampli-rd .a5-doc dd { margin: 0; color: var(--a5-muted); } body.ampli-rd .a5-doc__files { display: flex; flex-wrap: wrap; gap: 8px 20px; margin: auto 0 0 !important; padding: 12px 0 0 !important; list-style: none; border-top: 1px solid var(--a5-line); } body.ampli-rd .a5-doc__files li { padding: 0 !important; } body.ampli-rd .a5-doc__files a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-weight: 600; color: var(--a5-ink) !important; } body.ampli-rd .a5-doc__files .a5-icon { color: var(--a5-red); } /* Hinweis- und Zitatflächen */ body.ampli-rd .a5-panel { padding: clamp(22px, 3vw, 36px) !important; background: var(--a5-white); border: 1px solid var(--a5-line); border-radius: var(--a5-r); } /* Infobox: Außenabstand (margin) zu vorherigem und folgendem Inhalt getrennt vom Innenabstand (padding) */ body.ampli-rd .a5-callout { margin: 24px 0 !important; padding: 18px 22px !important; border-left: 4px solid var(--a5-red); border-radius: var(--a5-r-sm); background: var(--a5-surface-2); } body.ampli-rd .a5-callout:first-child { margin-top: 0 !important; } body.ampli-rd .a5-callout:last-child { margin-bottom: 0 !important; } body.ampli-rd .a5-section--tint .a5-callout { background: var(--a5-white); } body.ampli-rd .a5-callout p { margin: 0 !important; padding: 0 !important; font-size: 16px !important; color: var(--a5-ink); } body.ampli-rd .a5-quote { max-width: 860px; margin: 0 auto !important; padding: 0 !important; border: 0 !important; text-align: center; } body.ampli-rd .a5-quote p { font-size: clamp(21px, 2.3vw, 28px) !important; line-height: 1.4 !important; font-weight: 500; color: var(--a5-ink); letter-spacing: -.01em; } body.ampli-rd .a5-quote footer { margin-top: 14px; font-size: 14px; color: var(--a5-muted); } body.ampli-rd .a5-label { display: inline-block; margin-bottom: 14px; padding: 4px 10px; border: 1px solid var(--a5-line-strong); border-radius: var(--a5-r-xs); font-size: 13px; font-weight: 600; color: var(--a5-muted); } /* 6.13 Tabellen (Vergleich) */ body.ampli-rd .a5-table-wrap { overflow-x: auto; border: 1px solid var(--a5-line); border-radius: var(--a5-r); background: #fff; } body.ampli-rd .a5-table { width: 100%; min-width: 560px; border-collapse: collapse; margin: 0 !important; border: 0 !important; } body.ampli-rd .a5-table th, body.ampli-rd .a5-table td { padding: 14px 16px !important; text-align: left; vertical-align: top; border: 0 !important; border-bottom: 1px solid var(--a5-line) !important; font-size: 15px; line-height: 1.45; } body.ampli-rd .a5-table thead th { border-bottom: 2px solid var(--a5-ink) !important; font-size: 16px; } body.ampli-rd .a5-table thead th a { color: var(--a5-ink) !important; } body.ampli-rd .a5-table tbody th { font-weight: 700; width: 18%; color: var(--a5-ink); } body.ampli-rd .a5-table tbody tr:last-child th, body.ampli-rd .a5-table tbody tr:last-child td { border-bottom: 0 !important; } body.ampli-rd .a5-compare { margin: 24px 0 8px; } body.ampli-rd .a5-compare__title { margin: 0 0 12px !important; padding: 0 !important; font-size: 22px !important; font-weight: 700 !important; } body.ampli-rd .a5-compare__table th[scope=row] { white-space: nowrap; } body.ampli-rd .a5-compare__hint { margin: 10px 0 0; font-size: 15px; color: var(--a5-muted); } body.ampli-rd .a5-compare__table tr, body.ampli-rd .a5-compare__table td, body.ampli-rd .a5-compare__table th { box-sizing: border-box; } /* Gegenüberstellung mobil: je Merkmal eine Karte mit beiden beschrifteten Werten */ @media (max-width: 600px) { body.ampli-rd .a5-compare .a5-table-wrap { overflow: visible; border: 0; } body.ampli-rd .a5-compare__table, body.ampli-rd .a5-compare__table tbody, body.ampli-rd .a5-compare__table tr, body.ampli-rd .a5-compare__table th, body.ampli-rd .a5-compare__table td { display: block; width: 100% !important; } body.ampli-rd .a5-compare__table { min-width: 0 !important; table-layout: auto; } body.ampli-rd .a5-compare__table thead { display: none; } /* #main-content: Divi setzt „#content-area table tr“ mobil auf padding 0, die Überschrift klebte am Rahmen (Mobile-QA 12.10.2026, Screenshot 13) */ body.ampli-rd #main-content .a5-compare__table tr, body.ampli-rd .a5-compare__table tr { margin: 0 0 10px; padding: 14px 16px; border: 1px solid var(--a5-line); border-radius: var(--a5-r); background: var(--a5-white); } body.ampli-rd .a5-compare__table th[scope=row] { padding: 0 0 8px !important; border: 0 !important; font-size: 16px; line-height: 1.35; white-space: normal; background: transparent !important; } body.ampli-rd .a5-compare__table td { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 12px; padding: 6px 0 !important; border: 0 !important; border-top: 1px solid var(--a5-line) !important; font-size: 15px; line-height: 1.45; } body.ampli-rd .a5-compare__table td::before { content: attr(data-label); font-weight: 700; color: var(--a5-ink); font-size: 14px; } body.ampli-rd .a5-compare__table td + td::before { color: var(--a5-red); } } /* Produktvergleich [ampli_vergleich]: Desktop Tabelle, bis 600 px je Produkt eine Karte mit denselben Angaben (Mobile-QA 12.10.2026, Screenshot 09: Tabelle 560 px breit, Spalten abgeschnitten). Die jeweils andere Form ist per display: none auch für Screenreader ausgeblendet. */ body.ampli-rd .a5-vcards { display: none; } @media (max-width: 600px) { body.ampli-rd .a5-vergleich .a5-table-wrap { display: none; } body.ampli-rd .a5-vcards { display: grid; gap: 12px; margin: 0 !important; padding: 0 !important; list-style: none !important; } body.ampli-rd .a5-vcard { margin: 0 !important; padding: 14px 16px !important; list-style: none !important; border: 1px solid var(--a5-line); border-radius: var(--a5-r); background: var(--a5-white); } body.ampli-rd .a5-vcard::before { content: none !important; } body.ampli-rd .a5-section .a5-vcard h3.a5-vcard__title { margin: 0 0 8px !important; font-size: 17px !important; line-height: 1.35 !important; } body.ampli-rd .a5-section .a5-vcard__title a { color: var(--a5-ink) !important; text-decoration: underline; text-decoration-color: var(--a5-red); text-underline-offset: 3px; } body.ampli-rd .a5-vcard dl { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 0 12px; margin: 0; font-size: 15px; line-height: 1.45; } body.ampli-rd .a5-vcard dt, body.ampli-rd .a5-vcard dd { margin: 0; padding: 6px 0; border-top: 1px solid var(--a5-line); } body.ampli-rd .a5-vcard dt { font-size: 14px; font-weight: 700; color: var(--a5-ink); } body.ampli-rd .a5-vcard dd { color: var(--a5-ink); } } /* Produktvergleich Desktop (Desktop-QA 12.10.2026, Screenshot 02): Merkmalsspalte 19 %, drei gleich breite Produktspalten (feste Tabellenaufteilung statt Breite nach Textmenge), keine Silbentrennung (wp-Typography setzt weiche Trennstellen, die vorher „geflochte-nen“ ergaben), Preiszeile hervorgehoben. Überschrift des Abschnitts über die Inhaltsbreite. Mobil weiter Karten je Produkt. */ body.ampli-rd .a5-head:has(+ .a5-vergleich), body.ampli-rd .a5-head:has(+ p > .a5-vergleich) { max-width: none; } body.ampli-rd .a5-head h2 { text-wrap: balance; } body.ampli-rd .a5-table--compare { table-layout: fixed; min-width: 640px; } body.ampli-rd .a5-table--compare thead th:first-child, body.ampli-rd .a5-table--compare tbody th { width: 19%; } body.ampli-rd .a5-table--compare th, body.ampli-rd .a5-table--compare td, body.ampli-rd .a5-compare__table th, body.ampli-rd .a5-compare__table td { -webkit-hyphens: none; hyphens: none; overflow-wrap: break-word; } body.ampli-rd .a5-table--compare th, body.ampli-rd .a5-table--compare td { padding: 16px 18px !important; font-size: 15.5px; } body.ampli-rd .a5-table--compare thead th { vertical-align: bottom; font-size: 16px; line-height: 1.3; } body.ampli-rd .a5-table thead th a { text-decoration: underline; text-decoration-color: var(--a5-red); text-decoration-thickness: 1.5px; text-underline-offset: .22em; } body.ampli-rd .a5-table thead th a:hover { color: var(--a5-red) !important; } body.ampli-rd .a5-table tr.a5-table__price td { font-size: 17px; font-weight: 700; color: var(--a5-ink); } body.ampli-rd .a5-compare__table { table-layout: fixed; } body.ampli-rd .a5-compare__table thead th:first-child, body.ampli-rd .a5-compare__table tbody th { width: 24%; } /* Produktpaar neben der Einleitung (Produktübersicht „Für Hunde und als Anhänger“, Desktop-QA 12.10.2026, Screenshot 01): ab 1100 px drei gleich breite Spalten (Einleitung, zwei Karten) statt Einleitung über die halbe Breite und zwei schmalen Karten in der anderen Hälfte. Die Karten werden dafür Teil des äußeren Rasters (display: contents) und teilen sich weiter Bild-, Titel-, Preis- und Buttonzeilen. Darunter Einleitung über den Karten, mobil einspaltig wie bisher. */ @media (min-width: 981px) and (max-width: 1099px) { body.ampli-rd .a5-split:has(> div > .a5-cards--paar) { grid-template-columns: minmax(0, 1fr); } } @media (min-width: 1100px) { body.ampli-rd .a5-split:has(> div > .a5-cards--paar) { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--a5-gap); row-gap: 0; align-items: stretch; } body.ampli-rd .a5-split:has(> div > .a5-cards--paar) > div:has(> .a5-cards--paar), body.ampli-rd .a5-split:has(> div > .a5-cards--paar) .a5-cards--paar { display: contents; } body.ampli-rd .a5-split:has(> div > .a5-cards--paar) > div:first-child { grid-row: 1 / span 5; padding-top: 4px; } body.ampli-rd .a5-split:has(> div > .a5-cards--paar) .a5-card__facts p { max-width: none; } } /* ---------- 7. Produktseite ---------- */ body.ampli-rd.single-product .et_pb_wc_title h1 { font-size: clamp(28px, 3.4vw, 40px) !important; line-height: 1.12 !important; font-weight: 700; letter-spacing: -.02em; } /* wp-Typography bindet das letzte Wort mit   an; bei 375 px brach „Energiearmband Leder“ als „Lede / r“ um */ @media (max-width: 480px) { body.ampli-rd.single-product .et_pb_wc_title h1 { font-size: 25px !important; -webkit-hyphens: manual !important; hyphens: manual !important; } } body.ampli-rd.single-product .et_pb_wc_price .price, body.ampli-rd.single-product .et_pb_wc_price .price .amount, body.ampli-rd.single-product .woocommerce-variation-price .price { color: var(--a5-ink) !important; font-size: 28px !important; font-weight: 700 !important; } body.ampli-rd.single-product .et_pb_wc_price .price del .amount { color: var(--a5-muted) !important; font-size: 20px !important; font-weight: 400 !important; } body.ampli-rd.single-product .et_pb_wc_price .price ins .amount { color: var(--a5-red) !important; } /* Kurzpunkte unter dem Titel */ body.ampli-rd.single-product .kategorie-einleitung ul, body.ampli-rd.single-product .et_pb_wc_title + .et_pb_text ul, body.ampli-rd.single-product .kategorie-einleitung ul li, body.ampli-rd.single-product .et_pb_wc_title + .et_pb_text ul li { list-style: none !important; padding: 0 !important; margin: 0; display: grid; gap: 6px; } body.ampli-rd.single-product .kategorie-einleitung ul li, body.ampli-rd.single-product .et_pb_wc_title + .et_pb_text ul li { display: block; position: relative; padding-left: 28px !important; font-size: 16px; line-height: 1.5; } body.ampli-rd.single-product .kategorie-einleitung ul li:before, body.ampli-rd.single-product .et_pb_wc_title + .et_pb_text ul li:before { content: ""; position: absolute; left: 0; top: .25em; width: 18px; height: 18px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='none' stroke='%23860000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round' d='M4 10.5l4 4 8-9'/%3E%3C/svg%3E") center/18px no-repeat; } body.ampli-rd.single-product .kategorie-einleitung ul li a, body.ampli-rd.single-product .et_pb_wc_title + .et_pb_text ul li a { color: var(--a5-ink) !important; font-weight: 600; text-decoration: underline; text-decoration-color: var(--a5-red); text-underline-offset: 3px; } /* Variantenwahl: Beschriftung über dem Feld, große Bedienflächen. Nur die Zeilen der Variantentabelle selbst (Kindselektoren): die Größentabelle in der Größenhilfe steckt in derselben Zelle und blieb sonst nicht als Tabelle erhalten (Befund 11.10.2026, Screenshot 03: Kopf und Zeilen untereinander). */ body.ampli-rd form.cart table.variations, body.ampli-rd form.cart table.variations > tbody, body.ampli-rd form.cart table.variations > tbody > tr, body.ampli-rd form.cart table.variations > tbody > tr > th, body.ampli-rd form.cart table.variations > tbody > tr > td { display: block; width: 100% !important; padding: 0 !important; border: 0 !important; float: none !important; height: auto !important; } body.ampli-rd form.cart table.variations { margin: 0 0 8px !important; } /* Einheitliche Abstände: Label 6 px, Feld, Größenhilfe 8 px, nächstes Merkmal 18 px */ body.ampli-rd form.cart table.variations > tbody > tr { margin-bottom: 18px; } body.ampli-rd form.cart table.variations > tbody > tr:last-child { margin-bottom: 8px; } /* Beschriftung zurückhaltend (klein, grau); der Platzhalter „Größe auswählen“ trägt die Aufforderung */ body.ampli-rd form.cart table.variations .label label, body.ampli-rd form.cart table.variations th label { display: block; margin: 0 0 6px; font: 600 14px/1.3 var(--a5-font) !important; letter-spacing: 0; text-transform: none; color: var(--a5-muted) !important; } body.ampli-rd form.cart table.variations select { cursor: pointer; } body.ampli-rd form.cart table.variations select:has(option[value=""]:checked) { color: var(--a5-muted) !important; } body.ampli-rd form.cart table.variations select:hover { border-color: var(--a5-ink) !important; } body.ampli-rd form.cart table.variations select { width: 100% !important; max-width: 100% !important; } body.ampli-rd form.cart .reset_variations { display: inline-block; margin-top: 6px; font-size: 14px; color: var(--a5-muted) !important; } body.ampli-rd form.cart .woocommerce-variation-add-to-cart, body.ampli-rd form.cart:not(.variations_form) { display: flex !important; flex-wrap: wrap; gap: 12px; align-items: stretch; } body.ampli-rd form.cart .single_variation_wrap, body.ampli-rd form.cart .woocommerce-variation-add-to-cart { width: 100% !important; max-width: 100% !important; float: none !important; margin-left: 0 !important; } body.ampli-rd form.cart .quantity { flex: 0 0 auto; float: none !important; margin: 0 !important; } body.ampli-rd form.cart .quantity input.qty, body.ampli-rd #main-content form.cart .quantity input.qty, body.ampli-rd.et-db #et-boc .et-l .et_pb_wc_add_to_cart .quantity input.qty { width: 76px !important; max-width: 76px !important; min-height: var(--a5-btn-h); padding: 0 8px !important; border: 1.5px solid var(--a5-line-strong) !important; border-radius: var(--a5-r-sm) !important; background: #fff !important; color: var(--a5-ink) !important; font-size: 16px !important; text-align: center; } body.ampli-rd form.cart .single_add_to_cart_button.button { flex: 1 1 220px; font-size: 17px !important; } /* Divi-5-Modul-CSS (.et-db #et-boc .et-l …) mit gleicher Verankerung überschreiben */ body.ampli-rd.et-db #et-boc .et-l .et_pb_wc_add_to_cart .single_add_to_cart_button.button.disabled, body.ampli-rd.et-db #et-boc .et-l .et_pb_wc_add_to_cart .single_add_to_cart_button.button:disabled { background: #b9a3a3 !important; border-color: #b9a3a3 !important; color: #fff !important; cursor: not-allowed; } body.ampli-rd.et-db #et-boc .et-l .et_pb_wc_add_to_cart .single_add_to_cart_button.button:not(.disabled) { background: var(--a5-red) !important; border-color: var(--a5-red) !important; color: #fff !important; border-radius: var(--a5-r-sm) !important; } body.ampli-rd.single-product .woocommerce-variation-availability, body.ampli-rd.single-product .stock { font-size: 15px; font-weight: 600; } body.ampli-rd.single-product .stock.in-stock { color: var(--a5-success) !important; } /* Kaufbereich: klare Reihenfolge Titel, Preis, Kurzpunkte, Hinweis, Steuer/Versand/Lieferzeit, Auswahl, Button (Durchlauf 11.10.2026: Abstände vorher 0 bis 4 px, Pflichtangaben klebten aneinander) */ body.ampli-rd.single-product .et_pb_wc_title h1 { margin-bottom: 4px !important; } body.ampli-rd.single-product .et_pb_wc_price { margin-bottom: 14px !important; } body.ampli-rd.single-product .et_pb_wc_price .price { margin: 0 !important; padding: 0 !important; line-height: 1.2 !important; } body.ampli-rd.single-product .et_pb_wc_title + .et_pb_wc_price + .et_pb_text, body.ampli-rd.single-product .et_pb_wc_price + .kategorie-einleitung { margin-bottom: 4px !important; } body.ampli-rd.single-product .et_pb_wc_add_to_cart .wc-gzd-additional-info-placeholder { display: none !important; } body.ampli-rd.single-product .et_pb_wc_add_to_cart .legal-price-info { margin: 12px 0 0; } body.ampli-rd.single-product .et_pb_wc_add_to_cart .legal-price-info p, body.ampli-rd.single-product .et_pb_wc_add_to_cart p.delivery-time-info { margin: 0 !important; padding: 0 !important; font-size: 14px !important; line-height: 1.6 !important; color: var(--a5-muted) !important; } body.ampli-rd.single-product .et_pb_wc_add_to_cart .legal-price-info a { color: var(--a5-muted) !important; } body.ampli-rd.single-product .et_pb_wc_add_to_cart p.delivery-time-info { color: var(--a5-success) !important; font-weight: 600; } body.ampli-rd.single-product .et_pb_wc_add_to_cart form.cart { margin-top: 22px !important; } body.ampli-rd.single-product .et_pb_wc_add_to_cart .a5-defect + .legal-price-info { margin-top: 0; } /* Zahlungsarten unter dem Kaufbutton (nur Anzeige) */ body.ampli-rd .a5-paybox { margin: 18px 0 0; padding: 14px 0 0; border-top: 1px solid var(--a5-line); } body.ampli-rd .a5-paybox p { margin: 0 !important; padding: 0 !important; font-size: 14px !important; line-height: 1.5 !important; color: var(--a5-muted); } body.ampli-rd .a5-paybox__title { margin-bottom: 8px !important; font-weight: 700; color: var(--a5-ink) !important; font-size: 14px !important; } /* p.-Selektor: „.a5-paybox p { margin: 0 !important }“ war spezifischer, der Hinweis klebte an den Logos (Mobile-QA 12.10.2026, Screenshot 12) */ body.ampli-rd .a5-paybox p.a5-paybox__note { margin-top: 12px !important; font-size: 13px !important; } body.ampli-rd .a5-paybox p.a5-paybox__note + p.a5-paybox__note { margin-top: 6px !important; font-size: 14px !important; } body.ampli-rd .a5-paybox__note a { color: var(--a5-ink) !important; text-decoration: underline; text-decoration-color: var(--a5-red); text-underline-offset: 3px; } body.ampli-rd .a5-paylogos { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 !important; padding: 0 !important; list-style: none !important; } body.ampli-rd .a5-paylogos li { display: flex; align-items: center; justify-content: center; height: 34px; min-width: 52px; margin: 0 !important; padding: 4px 8px !important; list-style: none !important; border: 1px solid var(--a5-line); border-radius: var(--a5-r-xs); background: #fff; } body.ampli-rd .a5-paylogos li::before { content: none !important; } body.ampli-rd .a5-paylogos img { display: block; width: auto !important; height: 22px !important; max-width: 72px; } body.ampli-rd .a5-paybox + .a5-trust-compact { margin-top: 18px !important; padding-top: 18px !important; } /* Dokumentlink (Produkttext, z. B. Pflegeanleitung; inc/ampli-redesign.php, Filter render_block_divi/button): Symbol, unterstrichener Titel, „PDF“-Kennung wie im Footer */ body.ampli-rd a.a5-doclink { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 6px 0; color: var(--a5-ink) !important; font: 600 16px/1.35 var(--a5-font); text-decoration: none !important; } body.ampli-rd .a5-doclink > .a5-icon { width: 22px; height: 22px; color: var(--a5-red); } body.ampli-rd .a5-doclink__text { text-decoration: underline; text-decoration-color: var(--a5-red); text-decoration-thickness: 1.5px; text-underline-offset: 4px; -webkit-hyphens: none; hyphens: none; } body.ampli-rd .a5-doclink__meta { flex: none; padding: 1px 5px; border: 1px solid var(--a5-line-strong); border-radius: var(--a5-r-xs); font-size: 11px; font-weight: 700; letter-spacing: .06em; color: var(--a5-muted); } body.ampli-rd a.a5-doclink:hover { color: var(--a5-red) !important; } body.ampli-rd .et_pb_button_module_wrapper:has(> .a5-doclink) { margin: 8px 0 0 !important; } body.ampli-rd.single-product .a5-kaufinfo { margin-top: 20px; padding: 18px !important; background: var(--a5-surface-2); border: 1px solid var(--a5-line); border-radius: var(--a5-r); } body.ampli-rd.single-product #richtige-groesse { scroll-margin-top: 110px; } /* Mobil: kürzerer Weg zur Variantenwahl */ @media (max-width: 980px) { body.ampli-rd.single-product .et_pb_wc_images { margin-bottom: 8px !important; } body.ampli-rd.single-product .et_pb_wc_images .rtwpvg-images { margin-bottom: 10px !important; } body.ampli-rd.single-product .et_pb_wc_images + *, body.ampli-rd.single-product .et_pb_column .et_pb_divider:first-child { margin-top: 0 !important; } body.ampli-rd.single-product .et_pb_column .et_pb_divider:first-child { display: none !important; } body.ampli-rd.single-product .et_pb_row .et_pb_column:empty { display: none; } body.ampli-rd.single-product .et_pb_wc_title { margin-top: 6px !important; } body.ampli-rd.single-product .et_pb_wc_title + .et_pb_text { margin-top: 8px !important; } body.ampli-rd.single-product .et_pb_wc_price { margin-bottom: 0 !important; } body.ampli-rd.single-product .et_pb_wc_price p, body.ampli-rd.single-product .et_pb_wc_price .price { margin-bottom: 4px !important; } body.ampli-rd.single-product form.variations_form { margin-top: 8px !important; } body.ampli-rd.single-product .et_pb_wc_images .rtwpvg-thumbnail-image img { height: 54px !important; width: 100% !important; object-fit: cover; } body.ampli-rd.single-product .et_pb_wc_images .rtwpvg-thumbnail-image { height: auto !important; } } /* Merkmale untereinander: Größenhilfe gehört unmittelbar zum Feld „Größe“ (früher Größe und Farbe nebeneinander) */ /* Mobile Kaufleiste */ body.ampli-rd .a5-buybar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 9990; background: rgba(255, 255, 255, .97); border-top: 1px solid var(--a5-line); box-shadow: 0 -8px 24px rgba(28, 27, 26, .12); padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); } body.ampli-rd .a5-buybar[hidden] { display: none !important; } body.ampli-rd .a5-buybar__inner { display: flex; align-items: center; gap: 12px; max-width: 720px; margin: 0 auto; } body.ampli-rd .a5-buybar__text { display: flex; flex-direction: column; min-width: 0; flex: 1; } body.ampli-rd .a5-buybar__name { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } body.ampli-rd .a5-buybar__price { font-size: 17px; font-weight: 700; } body.ampli-rd .a5-buybar__price del { font-size: 13px; color: var(--a5-muted); font-weight: 400; } body.ampli-rd .a5-buybar__price ins { text-decoration: none; color: var(--a5-red); } body.ampli-rd .a5-buybar__btn { flex: 0 0 auto; min-height: 46px; padding: 10px 18px !important; font-size: 15px !important; } body.ampli-rd.a5-has-buybar { padding-bottom: 76px; } /* Divi „Nach oben“ lag sonst über der Kaufleiste (Staging-Sichtprüfung 08.10.2026) */ body.ampli-rd.a5-has-buybar .et_pb_scroll_top { bottom: 96px !important; } @media (min-width: 981px) { body.ampli-rd .a5-buybar { display: none !important; } } /* 7.2 Kaufbereich Desktop (Desktop-QA 12.10.2026, Screenshots 03 und 04). Ursache des Leerraums: Die Galeriespalte (ca. 550 px) und die Informationsspalte (bis 1.700 px mit Vergleich, Kaufinfo und Dokument) standen als Divi-Floats nebeneinander, unter der Galerie blieb über 1.100 px Fläche frei. Jetzt: Raster mit zwei Spalten, die Galerie bleibt beim Scrollen neben dem Kaufbereich stehen (sticky), Vergleich, Dokument und Beschreibung stehen in eigenen Abschnitten über die volle Breite (scripts/redesign-2026-r7.php). Mobil unverändert untereinander. */ @media (min-width: 981px) { body.ampli-rd.single-product .produktdetails-spalte { display: grid !important; grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); column-gap: clamp(36px, 4.5vw, 72px); align-items: start; } body.ampli-rd.single-product .produktdetails-spalte::after { content: none !important; } body.ampli-rd.single-product .produktdetails-spalte > .et_pb_column { width: auto !important; margin: 0 !important; float: none !important; } body.ampli-rd.single-product .produktdetails-spalte > .et_pb_column:first-child { position: sticky !important; top: 100px; } } /* Kaufinfo-Modul der Altfassung (Produkt Leder): Versand und Widerruf stehen jetzt in der Servicegruppe */ body.ampli-rd.single-product .produkt-infos .et_pb_text.a5-kaufinfo { display: none !important; } /* Servicegruppe unter den Zahlungsarten (inc/ampli-product.php): ruhige Liste, Links im Fließtextstil */ body.ampli-rd .a5-trust-compact a:not(.a5-link) { font-weight: 600; text-decoration: underline; text-decoration-color: var(--a5-red); text-decoration-thickness: 1.5px; text-underline-offset: .22em; } body.ampli-rd .a5-trust-compact li > span { color: var(--a5-muted); } /* 7.3 Produktbeschreibung (scripts/content/redesign-2026-r7.php): Text links auf Lesebreite, „Auf einen Blick“ rechts (Desktop mitlaufend), Fotos darunter. Einheitliche Leseskala: Fließtext und Listen 17/1,65, Zwischenüberschriften 20 px, Metaangaben 15 px (Desktop-QA 12.10.2026, Screenshot 05: vorher 15 bis 17 px gemischt). */ body.ampli-rd .a5-section--pd { padding-top: clamp(40px, 5vw, 72px) !important; } body.ampli-rd .a5-pd { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(28px, 4vw, 56px); align-items: start; } @media (min-width: 981px) { body.ampli-rd .a5-pd { grid-template-columns: minmax(0, 1fr) minmax(300px, 380px); } body.ampli-rd .a5-pd__facts { position: sticky; top: 100px; } } body.ampli-rd .a5-pd__main { max-width: 720px; } body.ampli-rd .a5-section .a5-pd__main h2 { margin-bottom: 14px; font-size: clamp(26px, 2.6vw, 34px) !important; text-wrap: balance; } body.ampli-rd .a5-section .a5-pd__main h3 { margin: 32px 0 8px !important; } body.ampli-rd .a5-section .a5-pd__main .a5-lead { max-width: none; margin-bottom: 4px; } body.ampli-rd .a5-section .a5-pd__main p, body.ampli-rd .a5-pd-list li, body.ampli-rd .a5-pd-steps li { font-size: var(--a5-fs-body) !important; line-height: 1.65 !important; } body.ampli-rd .a5-section .a5-pd__main p { margin: 0 0 14px !important; padding: 0 !important; } body.ampli-rd .a5-pd-list, body.ampli-rd .a5-pd-steps { display: grid; gap: 8px; margin: 0 0 14px !important; padding: 0 !important; list-style: none !important; } body.ampli-rd .a5-pd-list li { position: relative; margin: 0 !important; padding: 0 0 0 26px !important; list-style: none !important; } body.ampli-rd .a5-pd-list li::before { content: "" !important; position: absolute; left: 4px; top: .7em; width: 7px; height: 7px; border-radius: 50%; background: var(--a5-red); } body.ampli-rd .a5-pd-steps { counter-reset: a5pd; } body.ampli-rd .a5-pd-steps li { counter-increment: a5pd; position: relative; margin: 0 !important; padding: 0 0 0 38px !important; list-style: none !important; } body.ampli-rd .a5-pd-steps li::before { content: counter(a5pd) !important; position: absolute; left: 0; top: 1px; width: 26px; height: 26px; border-radius: 50%; background: var(--a5-red); color: #fff; font: 700 13px/26px var(--a5-font); text-align: center; } body.ampli-rd .a5-pd__main .a5-callout { margin: 20px 0 !important; } body.ampli-rd .a5-pd__main .a5-callout p { margin: 0 !important; font-size: 16px !important; } body.ampli-rd .a5-pd__main .a5-yt { margin-top: 32px; } body.ampli-rd .a5-pd__main .a5-promo-strip { margin-top: 32px; } body.ampli-rd .a5-pd__facts { padding: clamp(18px, 2.4vw, 26px); border: 1px solid var(--a5-line); border-radius: var(--a5-r); background: var(--a5-surface-2); } body.ampli-rd .a5-section h3.a5-pd__facts-title { margin: 0 0 6px !important; font-size: 13px !important; line-height: 1.3 !important; letter-spacing: .1em; text-transform: uppercase; color: var(--a5-muted); } body.ampli-rd .a5-pd__dl { margin: 0 !important; } body.ampli-rd .a5-pd__dl > div { padding: 10px 0; border-bottom: 1px solid var(--a5-line); } body.ampli-rd .a5-pd__dl > div:last-child { border-bottom: 0; } body.ampli-rd .a5-pd__dl dt { margin: 0 0 2px; font-size: 13px; font-weight: 700; color: var(--a5-muted); } body.ampli-rd .a5-pd__dl dd { margin: 0; font-size: 15px; line-height: 1.5; color: var(--a5-ink); } body.ampli-rd .a5-section p.a5-pd__doc { margin: 10px 0 0 !important; padding: 12px 0 0 !important; border-top: 1px solid var(--a5-line); } body.ampli-rd .a5-section .a5-pd__doc a.a5-doclink { color: var(--a5-ink); text-decoration: none; } body.ampli-rd .a5-pd__qty { margin-top: 12px; padding-top: 14px; border-top: 1px solid var(--a5-line); scroll-margin-top: 110px; } body.ampli-rd .a5-pd__photos { display: grid; gap: var(--a5-gap); grid-template-columns: 1fr; margin-top: clamp(32px, 4vw, 56px); } @media (min-width: 600px) { body.ampli-rd .a5-pd__photos--2, body.ampli-rd .a5-pd__photos--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 981px) { body.ampli-rd .a5-pd__photos--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } body.ampli-rd .a5-pd__photos--1 { max-width: 720px; } } body.ampli-rd .a5-pd__photo { margin: 0; overflow: hidden; border-radius: var(--a5-r); background: var(--a5-surface); } body.ampli-rd .a5-pd__photo img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; } @media (min-width: 600px) and (max-width: 980px) { body.ampli-rd .a5-pd__photos--3 .a5-pd__photo:last-child { display: none; } } /* Mengenpreise (Sportarmband, Staffel aus Woo Discount Rules) */ body.ampli-rd .a5-qtyprices { width: 100%; margin: 0 !important; border-collapse: collapse; font-variant-numeric: tabular-nums; } body.ampli-rd .a5-qtyprices caption { margin: 0 0 6px; text-align: left; font-size: 13px; font-weight: 700; color: var(--a5-muted); } body.ampli-rd .a5-qtyprices thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } body.ampli-rd .a5-qtyprices th, body.ampli-rd .a5-qtyprices td { padding: 7px 0 !important; border: 0 !important; border-top: 1px solid var(--a5-line) !important; font-size: 15px; text-align: left; } body.ampli-rd .a5-qtyprices td { text-align: right; font-weight: 700; white-space: nowrap; } body.ampli-rd .a5-qtyprices th { font-weight: 400; } body.ampli-rd .a5-section p.a5-qtyprices__note { margin: 8px 0 0 !important; font-size: 13px !important; line-height: 1.5 !important; color: var(--a5-muted); } /* Verschluss [ampli_verschluss] und weitere Text-Medien-Paare: oben bündig, Medien so breit wie der Text */ body.ampli-rd .a5-pd-split { display: grid; gap: clamp(28px, 4vw, 64px); grid-template-columns: minmax(0, 1fr); align-items: center; } @media (min-width: 981px) { body.ampli-rd .a5-pd-split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } } body.ampli-rd .a5-pd-split__text { max-width: 600px; } body.ampli-rd .a5-pd-split__text .a5-checks li { font-size: 16px; line-height: 1.55; } /* Video im Produkttext [ampli_yt]: 16:9, YouTube erst nach Einwilligung (Borlabs-Inhaltsblocker) */ body.ampli-rd .a5-yt { margin: 0; } body.ampli-rd .a5-yt__frame { overflow: hidden; border-radius: var(--a5-r-lg); background: var(--a5-dark); } body.ampli-rd .a5-yt__frame iframe { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; border: 0; } body.ampli-rd .a5-section .a5-yt__caption, body.ampli-rd .a5-yt__caption { margin: 8px 0 0; font-size: 14px; line-height: 1.45; color: var(--a5-muted); } /* Borlabs-Platzhalter für YouTube (alle Seiten): Vorschaubild abgedunkelt, Erklärung als helle Karte, Schaltflächen im System. Vorher Text halbtransparent über dem Bild, Schaltflächen rot auf rot (#860000 auf #ff0000), bei schmalen Spalten abgeschnitten (Desktop-QA 12.10.2026, Screenshot 06). Einwilligungslogik unverändert. */ body.ampli-rd .brlbs-cmpnt-content-blocker[data-borlabs-cookie-content-blocker-id="youtube-content-blocker"] .brlbs-cmpnt-cb-preset-c { position: relative !important; display: flex !important; align-items: center; justify-content: center; min-height: 0 !important; height: auto !important; aspect-ratio: 16 / 9; padding: clamp(12px, 3vw, 28px) !important; background: var(--a5-dark) !important; } body.ampli-rd .brlbs-cmpnt-content-blocker[data-borlabs-cookie-content-blocker-id="youtube-content-blocker"] .brlbs-cmpnt-cb-thumbnail { position: absolute !important; inset: 0; background-size: cover !important; background-position: center !important; opacity: .45; filter: none !important; } body.ampli-rd .brlbs-cmpnt-content-blocker[data-borlabs-cookie-content-blocker-id="youtube-content-blocker"] .brlbs-cmpnt-cb-play-button { display: none !important; } body.ampli-rd .brlbs-cmpnt-content-blocker[data-borlabs-cookie-content-blocker-id="youtube-content-blocker"] .brlbs-cmpnt-cb-main { position: relative !important; inset: auto !important; transform: none !important; width: 100%; max-width: 480px; margin: 0 auto !important; padding: 18px 20px !important; border-radius: var(--a5-r) !important; background: rgba(255, 255, 255, .97) !important; box-shadow: 0 12px 32px rgba(0, 0, 0, .25); } body.ampli-rd .brlbs-cmpnt-content-blocker .brlbs-cmpnt-cb-description { margin: 0 !important; padding: 0 0 8px !important; color: var(--a5-ink) !important; font-size: 14.5px !important; line-height: 1.5 !important; text-align: left; } body.ampli-rd .brlbs-cmpnt-content-blocker a.brlbs-cmpnt-cb-provider-toggle { display: inline-block; margin: 0 0 12px; color: var(--a5-ink) !important; font-size: 14px !important; text-decoration: underline !important; text-decoration-color: var(--a5-red) !important; text-underline-offset: 3px; } body.ampli-rd .brlbs-cmpnt-content-blocker .brlbs-cmpnt-cb-buttons { display: grid !important; gap: 8px; margin: 0 !important; } body.ampli-rd .brlbs-cmpnt-content-blocker a.brlbs-cmpnt-cb-btn { display: flex !important; align-items: center; justify-content: center; width: 100%; min-height: 44px; margin: 0 !important; padding: 10px 16px !important; border: 1.5px solid var(--a5-red) !important; border-radius: var(--a5-r-sm) !important; background: var(--a5-red) !important; color: #fff !important; font: 600 15px/1.3 var(--a5-font) !important; text-align: center; text-decoration: none !important; -webkit-hyphens: none; hyphens: none; } body.ampli-rd .brlbs-cmpnt-content-blocker a.brlbs-cmpnt-cb-btn:hover { background: var(--a5-red-dark) !important; border-color: var(--a5-red-dark) !important; } body.ampli-rd .brlbs-cmpnt-content-blocker a.brlbs-cmpnt-cb-btn + a.brlbs-cmpnt-cb-btn { background: #fff !important; color: var(--a5-ink) !important; border-color: var(--a5-line-strong) !important; } body.ampli-rd .brlbs-cmpnt-content-blocker a.brlbs-cmpnt-cb-btn + a.brlbs-cmpnt-cb-btn:hover { border-color: var(--a5-ink) !important; } @media (max-width: 480px) { body.ampli-rd .brlbs-cmpnt-content-blocker[data-borlabs-cookie-content-blocker-id="youtube-content-blocker"] .brlbs-cmpnt-cb-preset-c { aspect-ratio: auto; padding: 12px !important; } body.ampli-rd .brlbs-cmpnt-content-blocker[data-borlabs-cookie-content-blocker-id="youtube-content-blocker"] .brlbs-cmpnt-cb-main { padding: 14px !important; } } /* Abschnitte der Produktseite: Größenanker unter dem festen Header, ähnliche Produkte in a5-Abschnitten ohne Zusatzabstand */ body.ampli-rd.single-product #richtige-groesse { scroll-margin-top: 110px; } body.ampli-rd .a5-section .a5-related { padding-top: 0; } body.ampli-rd .a5-section .a5-contact { margin-top: 28px; } /* ---------- 8. Bestandsseiten (Divi-Altlayouts) ---------- */ /* Seitentypen mit Altlayout (Bericht Abschnitt 11): Produkttexte, Rechtstexte und Standardseiten (AGB, Datenschutz, Impressum, Widerruf, Versand, Zahlung, Kontakt, Sitemap, Bestätigungsseiten), Event-Jahresarchive, Unternehmensbeiträge, Familienangebot. Gemeinsame Bausteine: kategorie-einleitung-*, breadcrumb-container, action-shop-container (Band „Unser Produktsortiment“), Divi-Buttons, TablePress. Inhalte und URLs unverändert, nur Darstellung. */ /* 8.1 Gleiche Containerkanten wie Header und neue Seiten */ body.ampli-rd #main-content .et_pb_section:not(.a5-section) > .et_pb_row:not(.et_pb_row_fullwidth) { width: min(var(--a5-fluid), var(--a5-wrap)) !important; max-width: var(--a5-wrap) !important; } /* Mobil: Die Altcontainer (style.css: produktseite-, kategorie-einleitung-, kundenbewertungen-container u. a., 20 px seitlich) addierten sich zum Seitenrand der Zeile, ca. 33 statt 16 px (Mobile-QA 12.10.2026, Screenshots 10, 11, 16). Den Rand setzt allein die Zeile. Desktop unverändert. */ @media (max-width: 980px) { body.ampli-rd #main-content .et_pb_section:not(.a5-section):has(> .et_pb_row:not(.et_pb_row_fullwidth)) { padding-left: 0 !important; padding-right: 0 !important; } /* Divi gibt Spalten mobil 30 px Abstand nach unten, auch der letzten sichtbaren vor einer leeren (ausgeblendeten) Spalte */ body.ampli-rd #main-content .et_pb_row > .et_pb_column:not(:empty):has(+ .et_pb_column:empty:last-child) { margin-bottom: 0 !important; } /* Zwei Einleitungsabschnitte hintereinander (z. B. Event-Jahresarchive): Abstand nur einmal */ body.ampli-rd .kategorie-einleitung-container + .kategorie-einleitung-container { padding-top: 0 !important; } body.ampli-rd .kategorie-einleitung-container .et_pb_text_inner p:empty { display: none; } } /* 8.2 Brotkrumen: einmal oben, klein und ruhig; die zweite Ausgabe am Seitenende entfällt */ body.ampli-rd .et_pb_section.breadcrumb-container { padding: 16px 0 0 !important; background: transparent !important; } body.ampli-rd .et_pb_section.breadcrumb-container ~ .et_pb_section.breadcrumb-container { display: none !important; } /* Produktseiten ohne sichtbare Brotkrumen (Mobile-QA 12.10.2026, Screenshot 10). Nur Anzeige: Rank-Math-Schema (BreadcrumbList im JSON-LD) und WooCommerce-Daten unverändert. */ body.ampli-rd.single-product #main-content .et_pb_section.breadcrumb-container { display: none !important; } @media (max-width: 980px) { body.ampli-rd.single-product #main-content .et_pb_section.breadcrumb-container + .et_pb_section { padding-top: 16px !important; } } /* Mobil einheitlich 24 px zwischen Brotkrumen und Seiteninhalt; Divi-Abschnitte der Altlayouts brachten 50 px mit (Mein Konto: 96 px Leerraum vor „Anmelden“, Mobile-QA 12.10.2026, Screenshot 23) */ @media (max-width: 980px) { body.ampli-rd:not(.single-product) #main-content .et_pb_section.breadcrumb-container + .et_pb_section:not(.a5-section) { padding-top: 24px !important; } body.ampli-rd #main-content .et_pb_section.breadcrumb-container + .a5-section--page { padding-top: 16px !important; } /* dazu die Divi-Zeilenpolsterung (30 px) der ersten Zeile und ein leerer Absatz von wpautop vor Kurzcodes (Mein Konto) */ body.ampli-rd #main-content .et_pb_section.breadcrumb-container + .et_pb_section:not(.a5-section) > .et_pb_row:first-child { padding-top: 0 !important; } body.ampli-rd #main-content .et_pb_text_inner > p:first-child:empty { display: none; } body.ampli-rd .a5-section--hero:has(.a5-hero__media):has(.rank-math-breadcrumb) { padding-top: 16px !important; } } /* Kasse und Bestellbestätigung: eigene Schrittanzeige statt Brotkrumen (Mobile-QA 12.10.2026, Screenshot 27) */ body.ampli-rd.woocommerce-checkout #main-content .et_pb_section.breadcrumb-container { display: none !important; } body.ampli-rd .rank-math-breadcrumb p, body.ampli-rd .breadcrumb-container .et_pb_text_inner { margin: 0 !important; padding: 0 !important; font-size: 14px !important; line-height: 1.5 !important; color: var(--a5-muted) !important; } body.ampli-rd .rank-math-breadcrumb a { color: var(--a5-muted) !important; text-decoration: underline; text-decoration-color: var(--a5-line-strong) !important; text-underline-offset: 3px; } body.ampli-rd .rank-math-breadcrumb a:hover { color: var(--a5-red) !important; } body.ampli-rd .rank-math-breadcrumb .separator { margin: 0 6px; color: var(--a5-line-strong); } /* 8.3 Texte und Überschriften (kategorie-einleitung-*) */ body.ampli-rd .kategorie-einleitung-container { padding-top: clamp(24px, 3vw, 40px) !important; padding-bottom: clamp(32px, 4vw, 56px) !important; } body.ampli-rd .kategorie-einleitung-container .et_pb_text h1, body.ampli-rd .kategorie-einleitung-container .et_pb_text h2, body.ampli-rd .kategorie-einleitung-container .et_pb_text h3 { font-family: var(--a5-font) !important; font-weight: 700 !important; letter-spacing: -.015em; color: var(--a5-ink) !important; text-transform: none !important; -webkit-hyphens: none; hyphens: none; } body.ampli-rd .kategorie-einleitung-container .et_pb_text h1 { font-size: clamp(30px, 3.6vw, 44px) !important; line-height: 1.1 !important; } body.ampli-rd .kategorie-einleitung-container .et_pb_text h2 { font-size: clamp(24px, 2.6vw, 32px) !important; line-height: 1.2 !important; } body.ampli-rd .kategorie-einleitung-container .et_pb_text h3 { font-size: 20px !important; line-height: 1.3 !important; } body.ampli-rd .kategorie-einleitung-container img { border-radius: var(--a5-r); } body.ampli-rd .kategorie-einleitung-container p, body.ampli-rd .kategorie-einleitung-container li { font-size: 17px; line-height: 1.65; } body.ampli-rd .kategorie-einleitung-container .et_pb_text a:not(.et_pb_button) { color: inherit !important; text-decoration: underline; text-decoration-color: var(--a5-red) !important; text-decoration-thickness: 1.5px !important; text-underline-offset: .22em; } /* Dekorative Liniensymbole der Altlayouts (Standort, Hand, Sterne) kleiner und ruhiger */ body.ampli-rd .kategorie-einleitung-container .small-icon img { max-width: 96px; opacity: .8; border-radius: 0; } /* 8.4 Divi-Buttons der Altlayouts (früher gelb umrandet): Sekundärbutton des Systems */ body.ampli-rd #main-content .et_pb_button:not(.a5-btn) { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 10px 20px !important; border: 1.5px solid var(--a5-ink) !important; border-radius: var(--a5-r-sm) !important; background: var(--a5-white) !important; color: var(--a5-ink) !important; font: 600 15px/1.2 var(--a5-font) !important; letter-spacing: 0 !important; text-transform: none !important; text-decoration: none !important; } body.ampli-rd #main-content .et_pb_button:not(.a5-btn):hover { background: var(--a5-ink) !important; color: var(--a5-white) !important; } body.ampli-rd #main-content .et_pb_button:not(.a5-btn)::after { display: none !important; } /* Jahresknöpfe der Event-Archive als Reihe statt Liste breiter Knöpfe */ body.ampli-rd .et_pb_column:has(> .et_pb_button_module_wrapper + .et_pb_button_module_wrapper) { display: flex !important; flex-wrap: wrap; gap: 8px; width: 100% !important; } body.ampli-rd .et_pb_column:has(> .et_pb_button_module_wrapper + .et_pb_button_module_wrapper) > .et_pb_button_module_wrapper { margin: 0 !important; } body.ampli-rd .et_pb_column:has(> .et_pb_button_module_wrapper + .et_pb_button_module_wrapper) .et_pb_button { width: auto !important; } body.ampli-rd .et_pb_row:has(> .et_pb_column > .et_pb_button_module_wrapper + .et_pb_button_module_wrapper) > .et_pb_column:empty { display: none !important; } /* 8.5 Band „Unser Produktsortiment“ (action-shop-container, Divi-Vollbreiten-Kopf): Abschluss im Stil des Systems */ body.ampli-rd .action-shop-container { padding: 0 !important; background: transparent !important; } body.ampli-rd .action-shop-container .et_pb_fullwidth_header { width: min(var(--a5-fluid), var(--a5-wrap)); margin: clamp(24px, 4vw, 48px) auto !important; padding: clamp(28px, 4vw, 44px) !important; border-radius: var(--a5-r-lg); background: var(--a5-dark) !important; background-image: none !important; text-align: left !important; } body.ampli-rd .action-shop-container .et_pb_fullwidth_header .et_pb_fullwidth_header_container, body.ampli-rd .action-shop-container .et_pb_fullwidth_header .header-content-container, body.ampli-rd .action-shop-container .et_pb_fullwidth_header .header-content { width: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 !important; text-align: left !important; } body.ampli-rd .action-shop-container .et_pb_fullwidth_header .et_pb_module_header { margin: 0 0 6px !important; color: #fff !important; font: 700 clamp(22px, 2.4vw, 28px)/1.2 var(--a5-font) !important; text-transform: none !important; letter-spacing: -.01em; } body.ampli-rd .action-shop-container .et_pb_fullwidth_header .et_pb_header_content_wrapper, body.ampli-rd .action-shop-container .et_pb_fullwidth_header .et_pb_header_content_wrapper p { color: var(--a5-dark-muted) !important; font-size: 16px !important; } body.ampli-rd .action-shop-container .et_pb_fullwidth_header .et_pb_button { margin-top: 16px !important; border: 2px solid var(--a5-white) !important; background: var(--a5-white) !important; color: var(--a5-ink) !important; border-radius: var(--a5-r-sm) !important; font: 600 16px/1.2 var(--a5-font) !important; text-transform: none !important; padding: 12px 22px !important; } body.ampli-rd .action-shop-container .et_pb_fullwidth_header .et_pb_button:hover { background: transparent !important; color: #fff !important; } /* 8.6 TablePress mit DataTables (Event-Jahresarchive): Kopf und Inhalt als eine Tabelle. Ursache der Trennung: Beim horizontalen Scrollen klont DataTables den Kopf in eine eigene Tabelle; Rahmen und Radius lagen auf beiden Tabellen, der unsichtbare Größenkopf im Inhalt erschien als leere Zeile. */ body.ampli-rd .tablepress { width: 100% !important; margin: 0 !important; border-collapse: collapse !important; border: 0 !important; background: #fff; font-variant-numeric: tabular-nums; } body.ampli-rd .tablepress th, body.ampli-rd .tablepress td { padding: 10px 14px !important; border: 0 !important; border-top: 1px solid var(--a5-line) !important; font-size: 15px; line-height: 1.45; text-align: left; vertical-align: top; } body.ampli-rd .tablepress thead th, body.ampli-rd .tablepress tfoot th { background: var(--a5-surface) !important; color: var(--a5-ink) !important; font-weight: 700; border-top: 0 !important; white-space: nowrap; } body.ampli-rd .tablepress tbody tr:nth-child(even) td { background: var(--a5-surface-2) !important; } body.ampli-rd .tablepress tbody tr:hover td { background: #f6efe6 !important; } body.ampli-rd .dataTables_wrapper, body.ampli-rd .dt-container { margin: 8px 0 0; } body.ampli-rd .dataTables_scroll, body.ampli-rd .dt-scroll, body.ampli-rd .dataTables_wrapper > table.tablepress, body.ampli-rd .dt-container > table.tablepress, body.ampli-rd .et_pb_text_inner > table.tablepress { border: 1px solid var(--a5-line) !important; border-radius: var(--a5-r); overflow: hidden; } body.ampli-rd .dataTables_scrollHead, body.ampli-rd .dt-scroll-head { border: 0 !important; background: var(--a5-surface); } body.ampli-rd .dataTables_scrollHead table, body.ampli-rd .dt-scroll-head table, body.ampli-rd .dataTables_scrollBody table, body.ampli-rd .dt-scroll-body table { border: 0 !important; border-radius: 0 !important; margin: 0 !important; } body.ampli-rd .dataTables_scrollBody, body.ampli-rd .dt-scroll-body { border: 0 !important; } body.ampli-rd .dataTables_scrollBody thead tr, body.ampli-rd .dt-scroll-body thead tr { height: 0 !important; } body.ampli-rd .dataTables_scrollBody thead th, body.ampli-rd .dt-scroll-body thead th { padding-top: 0 !important; padding-bottom: 0 !important; border: 0 !important; height: 0 !important; line-height: 0 !important; background: transparent !important; } body.ampli-rd .dataTables_scrollBody tbody tr:first-child td, body.ampli-rd .dt-scroll-body tbody tr:first-child td { border-top: 0 !important; } body.ampli-rd .dataTables_filter, body.ampli-rd .dt-search { display: flex; align-items: center; gap: 10px; margin: 0 0 12px !important; float: none !important; text-align: left !important; } body.ampli-rd .dataTables_filter label, body.ampli-rd .dt-search label { display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 600; color: var(--a5-ink); } body.ampli-rd .dataTables_filter input, body.ampli-rd .dt-search input { min-height: 44px; width: min(320px, 70vw) !important; margin: 0 !important; padding: 8px 12px !important; border: 1.5px solid var(--a5-line-strong) !important; border-radius: var(--a5-r-sm) !important; background: #fff !important; font-size: 16px !important; } /* Export-Knöpfe des TablePress-Moduls (z. B. PDF in Ratgebern) als sekundärer Button, Funktion unverändert */ body.ampli-rd .dt-buttons { margin: 12px 0 0; } body.ampli-rd .dt-buttons .dt-button { min-height: 36px; margin: 0 8px 0 0 !important; padding: 6px 14px !important; border: 1.5px solid var(--a5-line-strong) !important; border-radius: var(--a5-r-sm) !important; background: #fff !important; box-shadow: none !important; font: 600 14px/1.2 var(--a5-font) !important; color: var(--a5-ink) !important; cursor: pointer; } body.ampli-rd .dt-buttons .dt-button:hover { border-color: var(--a5-ink) !important; } body.ampli-rd .dataTables_info, body.ampli-rd .dt-info { padding-top: 10px !important; font-size: 14px; color: var(--a5-muted); } @media (max-width: 767px) { body.ampli-rd .tablepress th, body.ampli-rd .tablepress td { padding: 8px 10px !important; font-size: 14px; } /* Aufklappsymbol (+) der zusammengeklappten Tabelle lag über dem Datum: Platz wie von DataTables vorgesehen */ body.ampli-rd .tablepress td.dtr-control, body.ampli-rd .tablepress th.dtr-control { padding-left: 34px !important; } /* Suche linksbündig über der Tabelle (DataTables zentriert mobil Beschriftung und Feld untereinander) */ body.ampli-rd .dt-container .dt-layout-row { margin: 0 !important; } body.ampli-rd .dt-container .dt-layout-cell { padding: 0 !important; text-align: left !important; } body.ampli-rd .dataTables_filter, body.ampli-rd .dt-search { justify-content: flex-start; flex-wrap: wrap; gap: 6px 10px; } body.ampli-rd .dataTables_filter input, body.ampli-rd .dt-search input { flex: 1 1 180px; width: auto !important; } } /* 8.6b Rechts- und Serviceseiten: Seitensymbol statt Linien-SVG (inc/ampli-components.php, ampli_rd_page_icons()), Text auf Lesebreite. Desktop: Text links bis 820 px, Symbol rechts oben; bis 980 px ohne Symbol (dekorativ). */ body.ampli-rd .a5-page-icon { display: flex; align-items: center; justify-content: center; width: 72px; height: 72px; border-radius: var(--a5-r); background: var(--a5-red-soft); color: var(--a5-red); } body.ampli-rd .a5-page-icon .a5-icon { width: 36px; height: 36px; stroke-width: 1.6; } @media (min-width: 981px) { body.ampli-rd .et_pb_row:has(> .et_pb_column > .a5-page-icon) { display: grid !important; grid-template-columns: minmax(0, 820px) 1fr; gap: 48px; align-items: start; } body.ampli-rd .et_pb_row:has(> .et_pb_column > .a5-page-icon)::after { content: none !important; } body.ampli-rd .et_pb_row:has(> .et_pb_column > .a5-page-icon) > .et_pb_column { width: auto !important; margin: 0 !important; float: none !important; } body.ampli-rd .et_pb_row:has(> .et_pb_column > .a5-page-icon) > .et_pb_column:has(> .a5-page-icon:only-child) { display: flex; justify-content: flex-end; padding-top: 8px; } } @media (max-width: 980px) { body.ampli-rd .et_pb_column:has(> .a5-page-icon:only-child) { display: none !important; } } /* 8.6c Zahlungsarten ([ampli_zahlungsarten]) */ body.ampli-rd .a5-pays { display: grid; gap: 12px; margin: 20px 0 8px !important; padding: 0 !important; list-style: none !important; } body.ampli-rd .a5-pay { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 18px; align-items: center; margin: 0 !important; padding: 16px 18px !important; list-style: none !important; border: 1px solid var(--a5-line); border-radius: var(--a5-r); background: var(--a5-white); } body.ampli-rd .a5-pay::before { content: none !important; } body.ampli-rd .a5-pay__logo { display: flex; align-items: center; justify-content: center; height: 56px; border-radius: var(--a5-r-sm); background: var(--a5-surface-2); } body.ampli-rd .a5-pay__logo img { width: auto !important; height: 28px !important; max-width: 76px; } body.ampli-rd .a5-pays h3.a5-pay__title { margin: 0 0 2px !important; padding: 0 !important; font: 700 17px/1.3 var(--a5-font) !important; color: var(--a5-ink) !important; text-transform: none !important; } body.ampli-rd .a5-pay p { margin: 0 !important; padding: 0 !important; font-size: 15px !important; line-height: 1.55 !important; color: var(--a5-muted); } /* Bis 599 px Logo oben, Titel und Text darunter über die volle Kartenbreite (Mobile-QA 12.10.2026, Screenshot 11: Text neben dem Logo nur ca. 170 px breit) */ @media (max-width: 599px) { body.ampli-rd .a5-pay { grid-template-columns: minmax(0, 1fr); gap: 12px; align-items: start; padding: 16px !important; } body.ampli-rd .a5-pay__logo { justify-self: start; width: 112px; height: 48px; } } /* 8.6e Rechtstexte (AGB, Widerruf, Datenschutz): Divi-Akkordeons als ruhige Liste mit Linien statt Pillenrahmen, Text 16 px auf Lesebreite. Nur Darstellung, Inhalte unverändert. Einleitung nutzt die volle Lesebreite, wenn die zweite Spalte leer ist. */ body.ampli-rd .kategorie-einleitung-container .et_pb_row:has(> .et_pb_column:empty) > .et_pb_column:not(:empty) { width: 100% !important; max-width: 820px; margin-right: 0 !important; } body.ampli-rd .kategorie-einleitung-container .et_pb_row:has(> .et_pb_column:empty) > .et_pb_column:empty { display: none !important; } body.ampli-rd .akkordeon-container .et_pb_accordion { max-width: 880px; } body.ampli-rd .akkordeon-container .et_pb_toggle { margin: 0 !important; padding: 0 !important; border: 0 !important; border-bottom: 1px solid var(--a5-line) !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; } body.ampli-rd .akkordeon-container .et_pb_toggle:first-child { border-top: 1px solid var(--a5-line) !important; } body.ampli-rd .akkordeon-container .et_pb_toggle_title { position: relative; padding: 16px 44px 16px 0 !important; font: 650 17px/1.4 var(--a5-font) !important; color: var(--a5-ink) !important; cursor: pointer; } body.ampli-rd .akkordeon-container .et_pb_toggle_title:hover { color: var(--a5-red) !important; } body.ampli-rd .akkordeon-container .et_pb_toggle_title::before { right: 8px !important; color: var(--a5-red) !important; } body.ampli-rd .akkordeon-container .et_pb_toggle_content { padding: 0 0 22px !important; } body.ampli-rd .akkordeon-container .et_pb_toggle_content, body.ampli-rd .akkordeon-container .et_pb_toggle_content p, body.ampli-rd .akkordeon-container .et_pb_toggle_content li { max-width: 72ch; font-size: 16px !important; line-height: 1.7 !important; color: var(--a5-ink); } body.ampli-rd .akkordeon-container .et_pb_toggle_content p { margin: 0 0 12px !important; padding: 0 !important; } body.ampli-rd .akkordeon-container .et_pb_text h2, body.ampli-rd .akkordeon-container .et_pb_text h3 { margin: 32px 0 12px !important; } /* 8.6d HTML-Sitemap ([ampli_sitemap]): Gruppen in Spalten, Links als ruhige Liste */ body.ampli-rd .a5-sitemap { display: grid; gap: 32px var(--a5-gap); grid-template-columns: minmax(0, 1fr); margin-top: 24px; } @media (min-width: 700px) { body.ampli-rd .a5-sitemap { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1100px) { body.ampli-rd .a5-sitemap { grid-template-columns: repeat(3, minmax(0, 1fr)); } } body.ampli-rd .a5-sitemap__group { padding-top: 14px; border-top: 2px solid var(--a5-ink); } body.ampli-rd .kategorie-einleitung-container .et_pb_text h2.a5-sitemap__title, body.ampli-rd h2.a5-sitemap__title { margin: 0 0 6px !important; padding: 0 !important; font: 700 14px/1.3 var(--a5-font) !important; letter-spacing: .1em; text-transform: uppercase !important; } body.ampli-rd .a5-sitemap .a5-linklist { margin: 0 !important; } body.ampli-rd .a5-sitemap .a5-linklist li { margin: 0 !important; list-style: none !important; } body.ampli-rd .a5-sitemap .a5-linklist li::before { content: none !important; } body.ampli-rd .a5-sitemap .a5-linklist a { padding: 9px 0; font-weight: 500; font-size: 15px; text-decoration: none !important; } body.ampli-rd .a5-sitemap .a5-linklist a:hover { text-decoration: underline !important; } /* 8.7 Borlabs-Platzhalter für Videos in Produkttexten im Kartenstil */ body.ampli-rd .brlbs-cmpnt-container.brlbs-cmpnt-content-blocker { border-radius: var(--a5-r); overflow: hidden; } /* 8.8 Produktseiten: „Ähnliche Produkte“ mit den Produktkarten der Auswahl */ body.ampli-rd .a5-related { width: 100%; padding: clamp(32px, 4vw, 56px) 0 0; } body.ampli-rd .a5-related__title { margin: 0 0 20px !important; padding: 0 !important; font: 700 clamp(24px, 2.6vw, 32px)/1.2 var(--a5-font) !important; letter-spacing: -.015em; color: var(--a5-ink) !important; text-transform: none !important; } body.ampli-rd .et_pb_column:has(.a5-related) .et_pb_divider, body.ampli-rd .et_pb_row:has(.a5-related) .et_pb_divider { display: none !important; } /* ---------- 9. Footer ---------- */ body.ampli-rd #main-footer { background: var(--a5-dark) !important; border-top: 0; } body.ampli-rd #main-footer > .container { width: 100% !important; max-width: none !important; padding: 0 !important; } body.ampli-rd .a5-footer { width: min(var(--a5-fluid), var(--a5-wrap)); margin: 0 auto; padding: clamp(48px, 6vw, 80px) 0 0; color: var(--a5-dark-muted); font-size: 15px; line-height: 1.55; } /* Bis 599 px einspaltig: Gruppen untereinander, getrennt durch eine Linie (Mobile-QA 12.10.2026, Screenshot 06: zwei Spalten von je ca. 150 px brachen Linktexte um). Ab 600 px zwei, ab 981 px vier Spalten. */ body.ampli-rd .a5-footer__grid { display: grid; gap: 28px var(--a5-gap); grid-template-columns: minmax(0, 1fr); padding-bottom: clamp(36px, 5vw, 56px); } @media (max-width: 599px) { body.ampli-rd .a5-footer__grid > * + * { padding-top: 24px; border-top: 1px solid rgba(243, 239, 233, .15); } } @media (min-width: 600px) { body.ampli-rd .a5-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 20px; } } @media (min-width: 981px) { body.ampli-rd .a5-footer__grid { grid-template-columns: 1.25fr 1fr 1fr 1fr; gap: 40px var(--a5-gap); } } body.ampli-rd .a5-footer__logo { display: inline-block; margin-bottom: 14px; } /* Logo-SVG ist dunkel; auf dem dunklen Footer in Weiß */ body.ampli-rd .a5-footer__logo img { display: block; width: clamp(200px, 20vw, 240px); height: auto; aspect-ratio: 1774 / 588; filter: brightness(0) invert(1); } body.ampli-rd .a5-footer__claim { margin: 0 0 24px !important; padding: 0 !important; color: #fff; font-weight: 600; font-size: 15px; } body.ampli-rd .a5-footer__title { margin: 0 0 14px !important; padding: 0 !important; color: #fff !important; font: 700 13px/1.3 var(--a5-font) !important; letter-spacing: .12em; text-transform: uppercase; } body.ampli-rd .a5-footer__subtitle { margin: 22px 0 8px !important; padding: 0 !important; color: #fff !important; font: 650 14px/1.3 var(--a5-font) !important; } body.ampli-rd .a5-footer__links { margin: 0 !important; padding: 0 !important; list-style: none !important; } body.ampli-rd .a5-footer__links + .a5-footer__links { margin-top: 0 !important; } body.ampli-rd .a5-footer__links li { margin: 0 !important; padding: 0 !important; list-style: none !important; } body.ampli-rd .a5-footer__links li::before { display: none !important; } body.ampli-rd .a5-footer a { color: #f3efe9 !important; text-decoration: underline; text-decoration-color: rgba(243, 239, 233, .35); text-underline-offset: 4px; text-decoration-thickness: 1px; transition: color .15s, text-decoration-color .15s; } body.ampli-rd .a5-footer__links a { display: inline-flex; align-items: center; gap: 6px; padding: 5px 0; min-height: 34px; } body.ampli-rd .a5-footer a:hover { color: #fff !important; text-decoration-color: #e9b3a8; text-decoration-thickness: 2px; } body.ampli-rd .a5-footer .a5-icon { width: 15px; height: 15px; opacity: .75; } body.ampli-rd .a5-footer__meta { display: inline-block; margin-left: 2px; padding: 1px 5px; border: 1px solid rgba(243, 239, 233, .35); border-radius: var(--a5-r-xs); font-size: 11px; font-weight: 700; letter-spacing: .06em; text-decoration: none; } body.ampli-rd .a5-footer__contact { margin: 0 !important; padding: 0 !important; list-style: none !important; display: grid; gap: 14px; } body.ampli-rd .a5-footer__contact li { display: flex; gap: 12px; align-items: flex-start; margin: 0 !important; padding: 0 !important; } body.ampli-rd .a5-footer__contact li > .a5-icon { width: 18px; height: 18px; margin-top: 3px; color: #e9b3a8; opacity: 1; } body.ampli-rd .a5-footer__contact li > span { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; } body.ampli-rd .a5-footer__contact .a5-footer__meta { margin: 0; padding: 0; border: 0; font-size: 14px; font-weight: 400; letter-spacing: 0; } body.ampli-rd .a5-footer__links--inline { display: flex; flex-wrap: wrap; gap: 0 18px; } body.ampli-rd .a5-footer__band { display: grid; gap: 28px var(--a5-gap); grid-template-columns: 1fr; padding: 28px 0 32px; border-top: 1px solid rgba(243, 239, 233, .15); } @media (min-width: 981px) { body.ampli-rd .a5-footer__band { grid-template-columns: 1fr 1fr; align-items: start; } } body.ampli-rd .a5-logos { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 0 !important; padding: 0 !important; list-style: none !important; } body.ampli-rd .a5-logos li { margin: 0 !important; padding: 0 !important; list-style: none !important; } body.ampli-rd .a5-logos li::before { display: none !important; } /* Logoflächen: helle Kachel je Logo (Imagify packt Bilder in ). Engagement-Logos lesbar groß, Breite nach Seitenverhältnis: Querformat (novatree) breiter, runde Siegel quadratisch; nichts beschnitten oder verzerrt */ body.ampli-rd .a5-logos li { display: flex !important; align-items: center; justify-content: center; padding: 8px 12px !important; background: #fff; border-radius: var(--a5-r-sm); } body.ampli-rd .a5-logos li a, body.ampli-rd .a5-logos li picture { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; text-decoration: none !important; } body.ampli-rd .a5-logos img { display: block; width: 100% !important; height: 100% !important; object-fit: contain; } body.ampli-rd .a5-logos__item--wide { width: 220px; height: 106px; padding: 6px 10px !important; } body.ampli-rd .a5-logos__item--round { width: 106px; height: 106px; padding: 6px !important; } @media (max-width: 600px) { body.ampli-rd .a5-logos__item--wide { width: 170px; height: 82px; } body.ampli-rd .a5-logos__item--round { width: 82px; height: 82px; } } body.ampli-rd .a5-logos--pay li { width: auto; height: 48px; padding: 6px 12px !important; } body.ampli-rd .a5-logos--pay li { min-width: 64px; } body.ampli-rd .a5-logos--pay img { width: auto !important; height: 30px !important; max-width: 96px; } body.ampli-rd .a5-logos li:has(a:hover) { box-shadow: 0 0 0 2px #e9b3a8; } /* Untere Leiste (Divi „Footer Credits“) */ body.ampli-rd #footer-bottom { background: #0f0e0d !important; padding: 16px 0 !important; } body.ampli-rd #footer-bottom, body.ampli-rd #footer-bottom a, body.ampli-rd #footer-info { color: #d9d3cb !important; font-size: 14px; } body.ampli-rd #footer-bottom .container { width: min(var(--a5-fluid), var(--a5-wrap)) !important; margin: 0 auto !important; float: none !important; } body.ampli-rd #footer-info { width: auto !important; margin: 0 !important; float: none !important; } /* ---------- 10. Warenkorb und Kasse (inc/ampli-cart-checkout.php) ---------- */ body.ampli-rd .a5-page-title { font-size: clamp(28px, 4vw, 40px) !important; font-weight: 700 !important; line-height: 1.15 !important; letter-spacing: -.02em; margin: 4px 0 24px !important; padding: 0 !important; grid-column: 1 / -1; } body.ampli-rd.woocommerce-cart .woocommerce, body.ampli-rd.woocommerce-checkout .woocommerce { max-width: var(--a5-wrap); margin: 0 auto; font-size: 16px; } body.ampli-rd.woocommerce-cart .woocommerce input[type=checkbox], body.ampli-rd.woocommerce-checkout .woocommerce input[type=checkbox], body.ampli-rd.woocommerce-cart .woocommerce input[type=radio], body.ampli-rd.woocommerce-checkout .woocommerce input[type=radio] { accent-color: var(--a5-red); width: 20px; height: 20px; margin: 0; flex: 0 0 auto; } body.ampli-rd form.woocommerce-checkout input[type=checkbox] { width: 20px !important; min-width: 20px; height: 20px !important; flex: 0 0 20px; } /* 10.1 Hinweise */ body.ampli-rd.woocommerce-cart .woocommerce-error, body.ampli-rd.woocommerce-cart .woocommerce-info, body.ampli-rd.woocommerce-cart .woocommerce-message, body.ampli-rd.woocommerce-checkout .woocommerce-error, body.ampli-rd.woocommerce-checkout .woocommerce-info, body.ampli-rd.woocommerce-checkout .woocommerce-message { background: var(--a5-white) !important; color: var(--a5-ink) !important; border: 1px solid var(--a5-line) !important; border-left: 4px solid var(--a5-muted) !important; border-radius: var(--a5-r-sm) !important; padding: 14px 18px !important; margin: 0 0 16px !important; font-size: 16px !important; line-height: 1.5; list-style: none; } body.ampli-rd.woocommerce-cart .woocommerce-error, body.ampli-rd.woocommerce-checkout .woocommerce-error { border-left-color: var(--a5-error) !important; background: #fdf3f4 !important; } body.ampli-rd.woocommerce-cart .woocommerce-message, body.ampli-rd.woocommerce-checkout .woocommerce-message { border-left-color: var(--a5-success) !important; } body.ampli-rd .woocommerce-error li { margin: 0 0 4px; padding: 0; } body.ampli-rd .woocommerce-error::before, body.ampli-rd .woocommerce-info::before, body.ampli-rd .woocommerce-message::before { display: none !important; } body.ampli-rd .woocommerce-error a, body.ampli-rd .woocommerce-info a, body.ampli-rd .woocommerce-message a { color: var(--a5-red) !important; text-decoration: underline; } /* 10.2 Sekundäre Buttons (Gutschein, Bestellung bearbeiten, Anmelden, Zurück zum Shop) */ body.ampli-rd .woocommerce .coupon button.button, body.ampli-rd .woocommerce form.checkout_coupon button.button, body.ampli-rd .woocommerce form.woocommerce-form-login button.button, body.ampli-rd .woocommerce .wc-gzd-checkout-edit a, body.ampli-rd .woocommerce a.wc-gzd-edit-order, body.ampli-rd .woocommerce .button.wc-backward, body.ampli-rd .woocommerce .return-to-shop a, body.ampli-rd .woocommerce-checkout-review-order-table .actions a.button { display: inline-flex !important; align-items: center; justify-content: center; min-height: var(--a5-btn-h); max-width: none !important; margin: 0 !important; padding: 10px 20px !important; border: 1.5px solid var(--a5-ink) !important; border-radius: var(--a5-r-sm) !important; background: var(--a5-white) !important; color: var(--a5-ink) !important; font: 600 15px/1.2 var(--a5-font) !important; text-transform: none !important; letter-spacing: 0 !important; text-decoration: none !important; transition: background .15s, color .15s; } body.ampli-rd .woocommerce-checkout-review-order-table .actions a.button { min-height: 44px; margin: 4px 0 !important; padding: 8px 18px !important; } body.ampli-rd .woocommerce .coupon button.button:hover, body.ampli-rd .woocommerce form.checkout_coupon button.button:hover, body.ampli-rd .woocommerce form.woocommerce-form-login button.button:hover, body.ampli-rd .woocommerce .wc-gzd-checkout-edit a:hover, body.ampli-rd .woocommerce a.wc-gzd-edit-order:hover, body.ampli-rd .woocommerce .button.wc-backward:hover, body.ampli-rd .woocommerce .return-to-shop a:hover, body.ampli-rd .woocommerce-checkout-review-order-table .actions a.button:hover { background: var(--a5-ink) !important; color: var(--a5-white) !important; } body.ampli-rd.woocommerce-cart .woocommerce .button::after, body.ampli-rd.woocommerce-checkout .woocommerce .button::after { display: none !important; } /* 10.3 Warenkorb: Raster mit Summenbox rechts */ @media (min-width: 981px) { body.ampli-rd.woocommerce-cart .woocommerce:has(> form.woocommerce-cart-form) { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 0 36px; align-items: start; } body.ampli-rd.woocommerce-cart .woocommerce:has(> form.woocommerce-cart-form) > *:not(form):not(.cart-collaterals) { grid-column: 1 / -1; } body.ampli-rd.woocommerce-cart .woocommerce > .cart-collaterals { position: sticky; top: 110px; } } body.ampli-rd .woocommerce-cart-form__contents { width: 100%; background: var(--a5-white) !important; border: 1px solid var(--a5-line) !important; border-radius: var(--a5-r) !important; border-collapse: separate !important; border-spacing: 0; overflow: hidden; margin: 0 0 24px !important; } body.ampli-rd .woocommerce-cart-form__contents th { background: var(--a5-surface-2) !important; color: var(--a5-muted) !important; font: 700 14px/1.3 var(--a5-font) !important; text-transform: none !important; padding: 12px 16px !important; border: 0 !important; } body.ampli-rd .woocommerce-cart-form__contents td { padding: 16px !important; vertical-align: middle !important; border: 0 !important; border-top: 1px solid var(--a5-line) !important; background: transparent !important; font-size: 16px; color: var(--a5-ink); } body.ampli-rd .woocommerce-cart-form__contents td.product-thumbnail { width: 112px; } body.ampli-rd .woocommerce-cart-form__contents td.product-thumbnail img, body.ampli-rd .woocommerce-checkout-review-order-table img { width: 96px !important; height: 96px !important; max-width: none; object-fit: cover; border-radius: var(--a5-r-sm); } body.ampli-rd .woocommerce-cart-form__contents td.product-price, body.ampli-rd .woocommerce-cart-form__contents td.product-subtotal { white-space: nowrap; } body.ampli-rd .woocommerce-cart-form__contents td.product-subtotal { font-weight: 700; } body.ampli-rd .a5-item-name { display: block; font-weight: 700; font-size: 17px; line-height: 1.35; color: var(--a5-ink); } body.ampli-rd .a5-item-name a { color: var(--a5-ink) !important; text-decoration: none !important; } body.ampli-rd .a5-item-name a:hover { color: var(--a5-red) !important; text-decoration: underline !important; } body.ampli-rd .a5-variant { display: block; margin-top: 4px; color: var(--a5-muted); font-size: 15px; line-height: 1.5; font-weight: 400; } body.ampli-rd .a5-variant__row { display: block; } body.ampli-rd .a5-variant__label { color: var(--a5-ink); font-weight: 600; } body.ampli-rd .woocommerce-cart-form__contents a.remove { display: inline-flex !important; align-items: center; justify-content: center; width: 40px !important; height: 40px !important; border: 1.5px solid var(--a5-line); border-radius: var(--a5-r-sm) !important; color: var(--a5-muted) !important; font-size: 24px !important; line-height: 1 !important; background: var(--a5-white) !important; text-decoration: none !important; } body.ampli-rd .woocommerce-cart-form__contents a.remove:hover { color: var(--a5-white) !important; background: var(--a5-red) !important; border-color: var(--a5-red); } /* Menge mit − / + */ body.ampli-rd .woocommerce-cart-form .quantity.a5-qty { display: inline-flex !important; align-items: center; height: 46px; border: 1.5px solid var(--a5-line-strong); border-radius: var(--a5-r-sm); overflow: hidden; background: var(--a5-white); float: none !important; margin: 0 !important; } body.ampli-rd .woocommerce-cart-form .quantity.a5-qty br { display: none; } body.ampli-rd .woocommerce-cart-form .quantity.a5-qty input.qty { width: 44px !important; height: 44px !important; min-height: 0 !important; padding: 0 !important; margin: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; color: var(--a5-ink) !important; font: 700 17px/1 var(--a5-font) !important; text-align: center; -moz-appearance: textfield; appearance: textfield; } body.ampli-rd .woocommerce-cart-form .quantity.a5-qty input.qty::-webkit-inner-spin-button, body.ampli-rd .woocommerce-cart-form .quantity.a5-qty input.qty::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; } body.ampli-rd .a5-qty-btn { width: 44px; height: 44px; padding: 0; border: 0; background: transparent; color: var(--a5-ink); font: 600 22px/1 var(--a5-font); cursor: pointer; } body.ampli-rd .a5-qty-btn:hover { background: var(--a5-surface); } /* Gutschein und Aktualisieren */ body.ampli-rd .woocommerce-cart-form__contents td.actions { background: var(--a5-surface-2) !important; padding: 16px !important; text-align: left !important; } body.ampli-rd .woocommerce-cart-form__contents td.actions p { margin: 0; padding: 0; } body.ampli-rd .woocommerce-cart-form .coupon { display: flex !important; flex-wrap: wrap; gap: 10px; float: none !important; width: 100%; max-width: 520px; padding: 0 !important; } body.ampli-rd .woocommerce-cart-form .coupon #coupon_code, body.ampli-rd .woocommerce form.checkout_coupon input.input-text { flex: 1 1 200px; width: auto !important; min-height: var(--a5-btn-h); margin: 0 !important; padding: 0 14px !important; border: 1.5px solid var(--a5-line-strong) !important; border-radius: var(--a5-r-sm) !important; background: var(--a5-white) !important; color: var(--a5-ink) !important; font-size: 16px !important; } body.ampli-rd .woocommerce-cart-form button[name=update_cart] { margin-top: 10px !important; } body.ampli-rd .woocommerce .coupon-error-notice { flex: 1 1 100%; margin: 2px 0 0 !important; color: var(--a5-error) !important; font-size: 14px; line-height: 1.4; } body.ampli-rd .woocommerce .coupon .input-text.has-error, body.ampli-rd .woocommerce #coupon_code[aria-invalid=true] { border-color: var(--a5-error) !important; } /* Summen */ body.ampli-rd .cart-collaterals { width: 100% !important; } body.ampli-rd .cart-collaterals .cart_totals { float: none !important; width: 100% !important; max-width: 480px; margin: 0 0 0 auto; padding: 20px 24px 24px; background: var(--a5-surface-2); border: 1px solid var(--a5-line); border-radius: var(--a5-r); } body.ampli-rd .cart-collaterals .cart_totals h2 { font-size: 22px !important; font-weight: 700 !important; margin: 0 0 8px !important; padding: 0 !important; } body.ampli-rd .cart_totals table.shop_table { border: 0 !important; background: transparent !important; margin: 0 0 16px !important; border-radius: 0 !important; } body.ampli-rd .cart_totals table.shop_table th, body.ampli-rd .cart_totals table.shop_table td { padding: 12px 0 !important; border: 0 !important; border-top: 1px solid var(--a5-line) !important; background: transparent !important; font-size: 16px !important; color: var(--a5-ink) !important; vertical-align: top; text-align: left !important; } body.ampli-rd .cart_totals table.shop_table td { text-align: right !important; } /* Mit Familienhinweis wurde die Beschriftung zu „Zwischensum-me“ getrennt; Hinweis darf umbrechen, Beschriftung nicht */ body.ampli-rd .cart_totals table.shop_table th { -webkit-hyphens: none; hyphens: none; white-space: nowrap; font-weight: 600 !important; width: auto !important; padding-right: 12px !important; } body.ampli-rd .cart_totals table.shop_table td::before { display: none !important; } /* WooCommerce blendet die Zeilenköpfe mobil aus (shop_table_responsive); hier als Tabelle belassen */ body.ampli-rd .cart_totals table.shop_table_responsive tbody tr { display: table-row !important; } body.ampli-rd .cart_totals table.shop_table_responsive tbody th, body.ampli-rd .cart_totals table.shop_table_responsive tbody td { display: table-cell !important; } body.ampli-rd .cart_totals .order-total th, body.ampli-rd .cart_totals .order-total td { font-size: 20px !important; font-weight: 700 !important; } body.ampli-rd .cart_totals tr[class*=tax] th, body.ampli-rd .cart_totals tr[class*=tax] td { font-size: 14px !important; color: var(--a5-muted) !important; border-top: 0 !important; padding-top: 0 !important; font-weight: 400 !important; } body.ampli-rd ul#shipping_method { margin: 0 !important; padding: 0 !important; list-style: none !important; text-align: left; } body.ampli-rd ul#shipping_method li { display: flex !important; align-items: center; gap: 10px; margin: 0 0 8px !important; padding: 0 !important; text-indent: 0 !important; } body.ampli-rd ul#shipping_method li label { margin: 0 !important; font-weight: 500; cursor: pointer; } body.ampli-rd .woocommerce-shipping-destination, body.ampli-rd .woocommerce-shipping-calculator { margin: 6px 0 0 !important; font-size: 14px; color: var(--a5-muted); text-align: left; } body.ampli-rd .shipping-calculator-button { color: var(--a5-red) !important; text-decoration: underline !important; font-size: 15px !important; line-height: 1.4 !important; } body.ampli-rd .shipping-calculator-button::after { display: none !important; } body.ampli-rd .woocommerce .wc-proceed-to-checkout { padding: 0 !important; margin: 0 !important; } /* Divi-Textmodul (wpautop) setzt
an den Anfang von Buttons: Text saß dadurch tiefer (Kasse) bzw. Link wirkte leer */ body.ampli-rd .woocommerce a.checkout-button br, body.ampli-rd .woocommerce .return-to-shop a br, body.ampli-rd .woocommerce .wc-backward br { display: none; } /* Germanized-Lieferzeit an der Position: erbte 20 px Absatzgröße */ body.ampli-rd .woocommerce-cart-form p.delivery-time-info, body.ampli-rd .woocommerce-checkout-review-order-table p.delivery-time-info, body.ampli-rd .woocommerce-cart-form .wc-gzd-cart-info, body.ampli-rd .woocommerce-checkout-review-order-table .wc-gzd-cart-info { margin: 6px 0 0 !important; padding: 0 !important; font-size: 14px !important; line-height: 1.45 !important; color: var(--a5-success) !important; font-weight: 600; } /* Abstand Brotkrumen zu Überschrift: Abschnitt und Zeile setzten je 36 px (zusammen 72 px) */ body.ampli-rd.woocommerce-cart .et_pb_section:has(.woocommerce) > .et_pb_row, body.ampli-rd.woocommerce-checkout .et_pb_section:has(.woocommerce) > .et_pb_row { padding-top: 0 !important; } body.ampli-rd.woocommerce-cart .et_pb_section:has(.woocommerce) { padding-top: clamp(20px, 3vw, 32px) !important; } /* Rückweg zum Shop unter der Tabelle (gefüllter Warenkorb) */ body.ampli-rd .a5-cart-continue { margin: -8px 0 24px !important; padding: 0 !important; } body.ampli-rd .woocommerce-cart-form__contents th.product-subtotal, body.ampli-rd .woocommerce-cart-form__contents th { -webkit-hyphens: none; hyphens: none; white-space: nowrap; } body.ampli-rd .woocommerce-cart-form__contents td.actions .coupon { align-items: stretch; } body.ampli-rd .woocommerce .wc-proceed-to-checkout a.checkout-button { display: flex !important; width: 100% !important; max-width: none !important; margin: 0 !important; font-size: 18px !important; min-height: 52px; } /* Leerer Warenkorb */ body.ampli-rd .woocommerce .cart-empty.woocommerce-info { font-size: 17px !important; } body.ampli-rd .a5-empty-cart { margin: 24px 0 8px; } body.ampli-rd .a5-empty-cart > h2 { font-size: 22px !important; font-weight: 700 !important; margin: 0 0 16px !important; padding: 0 !important; } body.ampli-rd .woocommerce .return-to-shop { margin: 16px 0 0; } /* Warenkorb mobil: Positionen als Karten */ @media (max-width: 768px) { body.ampli-rd .woocommerce-cart-form__contents thead { display: none !important; } body.ampli-rd .woocommerce-cart-form__contents tr.cart_item { display: grid !important; grid-template-columns: 80px minmax(0, 1fr) auto; gap: 6px 14px; grid-template-areas: "thumb name remove" "thumb price price" "qty qty sub"; padding: 16px; border-top: 1px solid var(--a5-line); } body.ampli-rd .woocommerce-cart-form__contents tr.cart_item:first-child { border-top: 0; } body.ampli-rd .woocommerce-cart-form__contents tr.cart_item td { display: block !important; padding: 0 !important; border: 0 !important; text-align: left !important; background: transparent !important; width: auto !important; } body.ampli-rd .woocommerce-cart-form__contents tr.cart_item td::before { display: none !important; content: none !important; } body.ampli-rd .woocommerce-cart-form__contents td.product-thumbnail { display: block !important; grid-area: thumb; } body.ampli-rd .woocommerce-cart-form__contents td.product-thumbnail img { width: 80px !important; height: 80px !important; } body.ampli-rd .woocommerce-cart-form__contents td.product-name { grid-area: name; } body.ampli-rd .woocommerce-cart-form__contents td.product-remove { grid-area: remove; justify-self: end; } body.ampli-rd .woocommerce-cart-form__contents td.product-price { grid-area: price; font-size: 15px; color: var(--a5-muted); } body.ampli-rd .woocommerce-cart-form__contents td.product-price::after { content: " je Stück"; } body.ampli-rd .woocommerce-cart-form__contents td.product-price:has(.a5-price-split)::after { content: none; } body.ampli-rd .woocommerce-cart-form__contents td.product-quantity { grid-area: qty; align-self: center; margin-top: 8px; } body.ampli-rd .woocommerce-cart-form__contents td.product-subtotal { grid-area: sub; justify-self: end; align-self: center; margin-top: 8px; font-size: 18px; } body.ampli-rd .woocommerce-cart-form__contents tr:not(.cart_item) { display: block; } body.ampli-rd .woocommerce-cart-form__contents td.actions { display: block !important; border-top: 1px solid var(--a5-line) !important; } body.ampli-rd .woocommerce-cart-form .coupon button.button { flex: 1 1 100%; } body.ampli-rd .cart-collaterals .cart_totals { max-width: none; padding: 18px 16px 20px; } } /* 10.4 Familienaktion: Hinweis an der Position und unter der Zwischensumme */ body.ampli-rd .a5-promo { display: inline-block; margin-top: 6px; padding: 2px 8px; border-radius: var(--a5-r-xs); background: #e9f4ec; color: #1d5a33; font-size: 14px; font-weight: 700; line-height: 1.5; white-space: normal; word-break: normal; overflow-wrap: normal; } body.ampli-rd .a5-promo-note { display: block; margin-top: 4px; font-size: 13px; font-weight: 600; line-height: 1.4; color: #1d5a33; } /* Kopfzeilen-Warenkorb (Side-Cart-Kurzcode): nach AJAX-Aktualisierung kam der Hinweis mit und lief aus der Kopfzeile */ body.ampli-rd .xoo-wsc-sc-subt .a5-promo-note { display: none !important; } body.ampli-rd .a5-price-split { display: inline-block; white-space: normal; line-height: 1.45; } body.ampli-rd .a5-price-split__was { color: var(--a5-muted); font-size: 14px; } body.ampli-rd .a5-promo-panel { margin-top: var(--a5-gap); border-left: 4px solid var(--a5-red); background: var(--a5-surface-2); } body.ampli-rd .a5-promo-panel h3 { margin: 0 0 8px !important; padding: 0 !important; font-size: 22px !important; } body.ampli-rd .a5-promo-panel .a5-actions { margin-top: 16px; } /* 10.5 Kasse: Schrittanzeige (Germanized Pro, Stil „plain“) */ body.ampli-rd.woocommerce-checkout ul.step-nav { display: flex !important; gap: 8px; list-style: none !important; margin: 0 0 28px !important; padding: 0 !important; width: 100%; } body.ampli-rd.woocommerce-checkout ul.step-nav li { flex: 1 1 0; margin: 0 !important; padding: 0 !important; list-style: none !important; background: none !important; border: 0 !important; min-height: 0 !important; } body.ampli-rd.woocommerce-checkout ul.step-nav li::before, body.ampli-rd.woocommerce-checkout ul.step-nav li::after, body.ampli-rd.woocommerce-checkout ul.step-nav li a::before, body.ampli-rd.woocommerce-checkout ul.step-nav li a::after { display: none !important; content: none !important; } body.ampli-rd.woocommerce-checkout ul.step-nav a.step { display: flex !important; flex-direction: column; align-items: center; gap: 6px; width: 100%; padding: 0 4px 12px !important; border-bottom: 4px solid var(--a5-line); color: var(--a5-muted) !important; text-decoration: none !important; font: 600 14px/1.25 var(--a5-font) !important; text-align: center; } body.ampli-rd.woocommerce-checkout ul.step-nav .step-number { display: inline-flex !important; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; border: 2px solid var(--a5-line-strong); background: var(--a5-white); color: var(--a5-muted); font: 700 15px/1 var(--a5-font); } body.ampli-rd.woocommerce-checkout ul.step-nav li.active a.step { color: var(--a5-ink) !important; border-bottom-color: var(--a5-red); } body.ampli-rd.woocommerce-checkout ul.step-nav li.active .step-number { background: var(--a5-red); border-color: var(--a5-red); color: var(--a5-white); } body.ampli-rd.woocommerce-checkout ul.step-nav li:has(~ li.active) a.step { color: var(--a5-ink) !important; border-bottom-color: #c99; } body.ampli-rd.woocommerce-checkout ul.step-nav li:has(~ li.active) .step-number { border-color: var(--a5-red); color: var(--a5-red); } body.ampli-rd.woocommerce-checkout ul.step-nav a.step[href] { cursor: pointer; } /* Abgeschlossene Schritte (Germanized setzt href): als Rückweg erkennbar */ body.ampli-rd.woocommerce-checkout ul.step-nav li:not(.active) a.step[href]:hover { color: var(--a5-red) !important; border-bottom-color: var(--a5-red); } body.ampli-rd.woocommerce-checkout ul.step-nav li:not(.active) a.step[href]:hover .step-number { background: var(--a5-red-soft); } body.ampli-rd.woocommerce-checkout ul.step-nav a.step:not([href]) { cursor: default; } /* Gleich hohe Schritte (Unterkante bündig) und mobil Kurztitel „Daten / Zahlung / Bestätigen“ (assets/ampli-redesign.js, stepShortTitles); der volle Titel bleibt für Screenreader. Mobile-QA 12.10.2026, Screenshot 27: „Persönliche Daten“ brach um, die Linie darunter stand tiefer. */ body.ampli-rd.woocommerce-checkout ul.step-nav li { display: flex !important; } body.ampli-rd.woocommerce-checkout ul.step-nav li > a.step { flex: 1 1 auto; justify-content: flex-start; } body.ampli-rd.woocommerce-checkout ul.step-nav .step-title__short { display: none; } @media (max-width: 600px) { body.ampli-rd.woocommerce-checkout ul.step-nav { gap: 6px; margin-bottom: 24px !important; } body.ampli-rd.woocommerce-checkout ul.step-nav li:has(.step-title__short) .step-title { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); white-space: nowrap; } body.ampli-rd.woocommerce-checkout ul.step-nav .step-title__short { display: block; white-space: nowrap; } body.ampli-rd.woocommerce-checkout ul.step-nav a.step { padding: 0 2px 10px !important; font-size: 14px !important; } body.ampli-rd.woocommerce-checkout ul.step-nav .step-number { width: 32px; height: 32px; } } /* 10.6 Kasse: Felder und Gruppen */ body.ampli-rd form.woocommerce-checkout h3, body.ampli-rd.woocommerce-checkout #order_review_heading { font-size: 22px !important; font-weight: 700 !important; margin: 8px 0 16px !important; padding: 0 !important; } body.ampli-rd form.woocommerce-checkout .form-row { margin: 0 0 16px !important; padding: 0 !important; } body.ampli-rd form.woocommerce-checkout .form-row label:not(.checkbox):not(.woocommerce-form__label-for-checkbox) { display: block; margin: 0 0 6px !important; padding: 0 !important; font: 600 15px/1.35 var(--a5-font) !important; color: var(--a5-ink) !important; } body.ampli-rd form.woocommerce-checkout .form-row .required { color: var(--a5-error) !important; text-decoration: none; border: 0; } body.ampli-rd form.woocommerce-checkout .form-row .optional { color: var(--a5-muted); font-weight: 400; } body.ampli-rd .woocommerce form .form-row.woocommerce-invalid input.input-text, body.ampli-rd .woocommerce form .form-row.woocommerce-invalid select { border-color: var(--a5-error) !important; } body.ampli-rd .woocommerce form .form-row.woocommerce-invalid label { color: var(--a5-ink) !important; } body.ampli-rd .woocommerce form .checkout-inline-error-message { margin: 6px 0 0; color: var(--a5-error); font-size: 14px; line-height: 1.4; } @media (min-width: 600px) { body.ampli-rd form.woocommerce-checkout .form-row-first, body.ampli-rd form.woocommerce-checkout .form-row-last { width: calc(50% - 8px) !important; } } /* Checkbox-Zeilen (Lieferadresse, Konto, Rechtstexte) */ body.ampli-rd #ship-to-different-address { margin: 8px 0 16px !important; } body.ampli-rd #ship-to-different-address br, body.ampli-rd .woocommerce-account-fields br, body.ampli-rd form.woocommerce-checkout .form-row label.checkbox br { display: none; } body.ampli-rd #ship-to-different-address label, body.ampli-rd form.woocommerce-checkout label.woocommerce-form__label-for-checkbox, body.ampli-rd form.woocommerce-checkout .form-row label.checkbox { display: flex !important; align-items: flex-start; gap: 12px; margin: 0 !important; cursor: pointer; font: 600 16px/1.45 var(--a5-font) !important; color: var(--a5-ink) !important; } body.ampli-rd #ship-to-different-address label { font-weight: 700 !important; font-size: 17px !important; justify-content: flex-start !important; text-align: left !important; width: 100%; } body.ampli-rd #ship-to-different-address label input { position: static !important; margin: 3px 0 0 !important; float: none !important; } body.ampli-rd #ship-to-different-address label span { flex: 1 1 auto; } body.ampli-rd form.woocommerce-checkout label.woocommerce-form__label-for-checkbox input, body.ampli-rd form.woocommerce-checkout .form-row label.checkbox input { margin-top: 2px !important; } body.ampli-rd form.woocommerce-checkout .checkbox-legal label, body.ampli-rd form.woocommerce-checkout .form-row.legal label { font-weight: 500 !important; font-size: 15px !important; } body.ampli-rd form.woocommerce-checkout .checkbox-legal a { color: var(--a5-red) !important; text-decoration: underline !important; font-weight: 600; } body.ampli-rd form.woocommerce-checkout .form-row.legal { padding: 14px 16px !important; background: var(--a5-surface-2); border: 1px solid var(--a5-line); border-radius: var(--a5-r-sm); } /* Rot erst nach einem Absendeversuch (Klasse a5-checkout-submitted, assets/ampli-redesign.js); Germanized markiert beim Schrittwechsel vorab */ body.ampli-rd form.woocommerce-checkout .form-row.legal.woocommerce-invalid label, body.ampli-rd form.woocommerce-checkout .checkbox-legal.woocommerce-invalid label { color: var(--a5-ink) !important; } body.ampli-rd.a5-checkout-submitted form.woocommerce-checkout .form-row.legal.woocommerce-invalid, body.ampli-rd.a5-checkout-submitted form.woocommerce-checkout .checkbox-legal.woocommerce-invalid { border-color: var(--a5-error) !important; background: #fdf3f4 !important; } body.ampli-rd.a5-checkout-submitted form.woocommerce-checkout .form-row.legal.woocommerce-invalid label, body.ampli-rd.a5-checkout-submitted form.woocommerce-checkout .checkbox-legal.woocommerce-invalid label { color: var(--a5-error) !important; } body.ampli-rd .wc-gzd-edit-data-notice { margin: 0 0 16px; padding: 12px 16px; border-radius: var(--a5-r-sm); background: var(--a5-surface-2); color: var(--a5-muted); font-size: 15px; } body.ampli-rd .woocommerce-gzdp-multistep-privacy-policy-checkbox-text { font-size: 15px !important; } /* Schrittbezogene Hinweise: Anmeldung nur im ersten Schritt, Gutschein und Prüfhinweis nur im Bestätigungsschritt (Germanized setzt die Klassen woocommerce-multistep-checkout-active-*) */ body.ampli-rd.woocommerce-multistep-checkout:not(.woocommerce-multistep-checkout-active-address) .woocommerce-form-login-toggle, body.ampli-rd.woocommerce-multistep-checkout:not(.woocommerce-multistep-checkout-active-address) form.woocommerce-form-login, body.ampli-rd.woocommerce-multistep-checkout:not(.woocommerce-multistep-checkout-active-order) .woocommerce-form-coupon-toggle, body.ampli-rd.woocommerce-multistep-checkout:not(.woocommerce-multistep-checkout-active-order) form.checkout_coupon, body.ampli-rd.woocommerce-multistep-checkout:not(.woocommerce-multistep-checkout-active-order) .wc-gzd-edit-data-notice { display: none !important; } body.ampli-rd.woocommerce-checkout .woocommerce-form-login-toggle .woocommerce-info, body.ampli-rd.woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info { padding: 10px 14px !important; border-left-width: 1px !important; background: var(--a5-surface-2) !important; font-size: 15px !important; } /* 10.7 Kasse: Schritt-Schaltflächen */ body.ampli-rd.woocommerce-checkout .step-buttons { display: flex !important; flex-wrap: wrap-reverse; align-items: center; justify-content: space-between; gap: 12px 20px; margin: 24px 0 8px !important; clear: both; } body.ampli-rd.woocommerce-checkout .step-buttons button.next-step-button { min-height: 52px; margin: 0 0 0 auto !important; max-width: none !important; padding: 12px 28px !important; border: 0 !important; border-radius: var(--a5-r-sm) !important; background: var(--a5-red) !important; color: var(--a5-white) !important; font: 700 17px/1.2 var(--a5-font) !important; text-transform: none !important; letter-spacing: 0 !important; } body.ampli-rd.woocommerce-checkout .step-buttons button.next-step-button:hover { background: var(--a5-red-dark) !important; color: var(--a5-white) !important; } body.ampli-rd.woocommerce-checkout .step-buttons .prev-step-button { display: inline-flex; align-items: center; min-height: 44px; color: var(--a5-ink) !important; font-weight: 600; text-decoration: underline !important; } body.ampli-rd.woocommerce-checkout .step-buttons .prev-step-button::before { content: "\2190\00a0"; display: inline-block; text-decoration: none; } @media (max-width: 600px) { body.ampli-rd.woocommerce-checkout .step-buttons button.next-step-button { flex: 1 1 100%; } body.ampli-rd.woocommerce-checkout .step-buttons .prev-step-button { flex: 1 1 100%; justify-content: center; } } /* 10.8 Kasse: Zahlungsarten */ body.ampli-rd.woocommerce-checkout #payment { background: var(--a5-surface-2) !important; border: 1px solid var(--a5-line); border-radius: var(--a5-r) !important; } body.ampli-rd.woocommerce-checkout #payment ul.payment_methods { padding: 16px !important; border-bottom: 0 !important; margin: 0 !important; } body.ampli-rd.woocommerce-checkout #payment ul.payment_methods li { list-style: none; margin: 0 0 8px; padding: 0; } body.ampli-rd.woocommerce-checkout #payment ul.payment_methods li > label { font-weight: 700; font-size: 17px; cursor: pointer; } body.ampli-rd.woocommerce-checkout #payment div.payment_box { margin: 10px 0 0 !important; padding: 14px 16px !important; background: var(--a5-white) !important; color: var(--a5-ink) !important; border: 1px solid var(--a5-line); border-radius: var(--a5-r-sm) !important; font-size: 15px !important; line-height: 1.55; } body.ampli-rd.woocommerce-checkout #payment div.payment_box::before { display: none !important; } /* 10.9 Kasse: Bestellübersicht */ body.ampli-rd .woocommerce-checkout-review-order-table { width: 100%; background: var(--a5-white) !important; border: 1px solid var(--a5-line) !important; border-radius: var(--a5-r) !important; border-collapse: separate !important; border-spacing: 0; overflow: hidden; margin: 0 0 20px !important; } body.ampli-rd .woocommerce-checkout-review-order-table th, body.ampli-rd .woocommerce-checkout-review-order-table td { padding: 12px 16px !important; border: 0 !important; border-top: 1px solid var(--a5-line) !important; background: transparent !important; font-size: 16px !important; color: var(--a5-ink) !important; vertical-align: middle; } body.ampli-rd .woocommerce-checkout-review-order-table thead th { border-top: 0 !important; background: var(--a5-surface-2) !important; color: var(--a5-muted) !important; font-size: 14px !important; } body.ampli-rd .woocommerce-checkout-review-order-table .order-total th, body.ampli-rd .woocommerce-checkout-review-order-table .order-total td { font-size: 19px !important; font-weight: 700 !important; } body.ampli-rd .woocommerce-checkout-review-order-table tr[class*=tax] th, body.ampli-rd .woocommerce-checkout-review-order-table tr[class*=tax] td { font-size: 14px !important; color: var(--a5-muted) !important; font-weight: 400 !important; border-top: 0 !important; padding-top: 0 !important; } body.ampli-rd .woocommerce-checkout-review-order-table td.product-name { line-height: 1.4; } body.ampli-rd .woocommerce-checkout-review-order-table td.product-total { white-space: nowrap; text-align: right; font-weight: 700; } body.ampli-rd .woocommerce-checkout-review-order-table .product-quantity { color: var(--a5-muted); font-weight: 600; } body.ampli-rd .woocommerce-checkout-review-order-table ul#shipping_method li { justify-content: flex-end; } body.ampli-rd .woocommerce-checkout-review-order-table .a5-item-name, body.ampli-rd .woocommerce-checkout-review-order-table .a5-variant { word-break: normal; overflow-wrap: break-word; hyphens: manual; } /* Germanized-Rahmen (Bild, Name) als Raster; Merkmale und Aktionshinweis in der Textspalte, nie in der Bildspalte */ body.ampli-rd .woocommerce-checkout-review-order-table .wc-gzd-cart-item-name-wrapper { display: grid !important; grid-template-columns: auto minmax(0, 1fr); column-gap: 14px; align-items: center; } body.ampli-rd .woocommerce-checkout-review-order-table .wc-gzd-cart-item-thumbnail { grid-row: 1 / span 3 !important; margin: 0 !important; } body.ampli-rd .woocommerce-checkout-review-order-table .wc-gzd-cart-item-name-wrapper .a5-item-name { align-self: end; } body.ampli-rd .woocommerce-checkout-review-order-table .wc-gzd-cart-item-name-wrapper .a5-variant { align-self: start; } body.ampli-rd .woocommerce-checkout-review-order-table .wc-gzd-cart-item-name-wrapper > .a5-item-name, body.ampli-rd .woocommerce-checkout-review-order-table .wc-gzd-cart-item-name-wrapper > .a5-variant, body.ampli-rd .woocommerce-checkout-review-order-table .wc-gzd-cart-item-name-wrapper > .a5-promo { grid-column: 2; justify-self: start; } body.ampli-rd.woocommerce-checkout #place_order, body.ampli-rd.woocommerce-checkout button#place_order.button { width: 100% !important; min-height: 56px; margin: 8px 0 0 !important; border-radius: var(--a5-r-sm) !important; font: 700 18px/1.2 var(--a5-font) !important; text-transform: none !important; letter-spacing: 0 !important; } @media (max-width: 768px) { body.ampli-rd .woocommerce-checkout-review-order-table thead { display: none; } body.ampli-rd .woocommerce-checkout-review-order-table tbody tr.cart_item { display: grid !important; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; padding: 12px; border-top: 1px solid var(--a5-line); } body.ampli-rd .woocommerce-checkout-review-order-table tbody tr.cart_item:first-child { border-top: 0; } body.ampli-rd .woocommerce-checkout-review-order-table tbody tr.cart_item td { display: block !important; width: auto !important; padding: 0 !important; border: 0 !important; } body.ampli-rd .woocommerce-checkout-review-order-table tbody td.product-name { grid-column: 1 / -1; } body.ampli-rd .woocommerce-checkout-review-order-table tbody td.product-total { grid-column: 1 / -1; text-align: right !important; font-size: 17px !important; } body.ampli-rd .woocommerce-checkout-review-order-table .wc-gzd-cart-item-name-wrapper { grid-template-columns: 64px minmax(0, 1fr) !important; align-items: start !important; } body.ampli-rd .woocommerce-checkout-review-order-table .wc-gzd-cart-item-name-wrapper .a5-item-name { align-self: start; } /* Abstand per Innenabstand statt Spaltenlücke: die Lücke unterbrach die Trennlinien der Summenzeilen */ body.ampli-rd .woocommerce-checkout-review-order-table tfoot tr { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 0; } body.ampli-rd .woocommerce-checkout-review-order-table tfoot th, body.ampli-rd .woocommerce-checkout-review-order-table tfoot td { display: block; } body.ampli-rd .woocommerce-checkout-review-order-table tfoot th { white-space: nowrap; } body.ampli-rd .woocommerce-checkout-review-order-table tfoot td { text-align: right; padding-left: 12px !important; } } @media (max-width: 600px) { body.ampli-rd .woocommerce-checkout-review-order-table th, body.ampli-rd .woocommerce-checkout-review-order-table td { padding: 10px 12px !important; } body.ampli-rd .woocommerce-checkout-review-order-table img { width: 64px !important; height: 64px !important; } } /* 10.10 Kompakter Kaufabschluss: Header ohne Navigation, Footer ohne Widgets */ body.ampli-rd.a5-checkout-compact #et-top-navigation > *:not(.a5-checkout-header), body.ampli-rd.a5-checkout-compact #footer-widgets, body.ampli-rd.a5-checkout-compact .a5-footer, body.ampli-rd.a5-checkout-compact .xoo-wsc-modal { display: none !important; } body.ampli-rd .a5-checkout-header { display: none; } /* Divis Logo-Container liegt absolut über der ganzen Kopfzeile (1200 × 74 px) und fing Klicks auf „Zurück zum Warenkorb“, Telefon und Sprachwahl ab (Befund 11.10.2026, elementFromPoint). Nur das Logo selbst bleibt klickbar. */ body.ampli-rd #main-header .logo_container { pointer-events: none; } body.ampli-rd #main-header .logo_container a, body.ampli-rd #main-header .logo_container img { pointer-events: auto; } body.ampli-rd.a5-checkout-compact #et-top-navigation { display: block !important; } body.ampli-rd.a5-checkout-compact .a5-checkout-header { display: flex; align-items: center; justify-content: flex-end; gap: 6px 20px; flex-wrap: wrap; font-size: 15px; color: var(--a5-ink); text-align: right; } body.ampli-rd.a5-checkout-compact .a5-checkout-header a { color: var(--a5-red) !important; font-weight: 600; text-decoration: underline; } body.ampli-rd .a5-checkout-header a[href^="tel:"] { white-space: nowrap; } @media (max-width: 980px) { body.ampli-rd.a5-checkout-compact #et-top-navigation { padding-top: 14px !important; } body.ampli-rd.a5-checkout-compact .a5-checkout-header { font-size: 13px; flex-direction: column; align-items: flex-end; gap: 0; line-height: 1.35; max-width: 190px; } body.ampli-rd.a5-checkout-compact .a5-checkout-header__back { display: none; } } @media (min-width: 981px) { body.ampli-rd.a5-checkout-compact #et-top-navigation { padding-top: 28px !important; } } /* Die kompakte Kasse behält den hellen Footer-Hintergrund */ body.ampli-rd.a5-checkout-compact #main-footer { background: var(--a5-white) !important; } body.ampli-rd.a5-checkout-compact #footer-bottom { background: var(--a5-ink) !important; } body.ampli-rd .a5-checkout-footer { width: min(var(--a5-fluid), var(--a5-wrap)); max-width: var(--a5-wrap); margin: 0 auto; padding: 20px 0 24px; border-top: 1px solid var(--a5-line); font-size: 14px; color: var(--a5-muted); } body.ampli-rd .a5-checkout-footer ul { display: flex; flex-wrap: wrap; gap: 6px 20px; list-style: none; margin: 0 0 10px; padding: 0; } body.ampli-rd .a5-checkout-footer li { margin: 0; padding: 0; } body.ampli-rd .a5-checkout-footer a, body.ampli-rd .a5-checkout-footer .borlabs-cookie-open-dialog-preferences a { color: var(--a5-ink) !important; text-decoration: underline; display: inline-block; min-height: 32px; line-height: 32px; } body.ampli-rd .a5-checkout-footer p { margin: 0 !important; padding: 0 !important; font-size: 13px !important; line-height: 1.5 !important; color: var(--a5-muted) !important; } /* Kontaktzeile dezent: Linkfarbe wie Text, dünne graue Unterstreichung statt der gelben Altregel */ body.ampli-rd .a5-checkout-footer a, body.ampli-rd .a5-checkout-footer .borlabs-cookie-open-dialog-preferences a { font-size: 13px !important; text-decoration-color: var(--a5-line-strong) !important; text-decoration-thickness: 1px !important; text-underline-offset: 3px; border: 0 !important; background: none !important; box-shadow: none !important; } body.ampli-rd .a5-checkout-footer__contact a { display: inline !important; min-height: 0 !important; line-height: inherit !important; color: var(--a5-muted) !important; } /* 10.10b Mein Konto (Anmeldung, Registrierung, Kontobereich): gleiche Felder und Buttons wie Kasse */ body.ampli-rd.woocommerce-account .woocommerce { max-width: var(--a5-wrap); margin: 0 auto; font-size: 16px; } body.ampli-rd.woocommerce-account .u-columns.col2-set > .u-column1 h2, body.ampli-rd.woocommerce-account .u-columns.col2-set > .u-column2 h2 { font-size: 24px !important; font-weight: 700 !important; margin: 0 0 14px !important; padding: 0 !important; } body.ampli-rd.woocommerce-account form.woocommerce-form-login, body.ampli-rd.woocommerce-account form.woocommerce-form-register, body.ampli-rd.woocommerce-account form.woocommerce-ResetPassword, body.ampli-rd.woocommerce-account form.lost_reset_password { margin: 0 !important; padding: 24px !important; border: 1px solid var(--a5-line) !important; border-radius: var(--a5-r) !important; background: var(--a5-white); } @media (max-width: 600px) { body.ampli-rd.woocommerce-account form.woocommerce-form-login, body.ampli-rd.woocommerce-account form.woocommerce-form-register, body.ampli-rd.woocommerce-account form.woocommerce-ResetPassword, body.ampli-rd.woocommerce-account form.lost_reset_password { padding: 16px !important; } } body.ampli-rd.woocommerce-account .woocommerce form .form-row { margin: 0 0 16px !important; padding: 0 !important; } body.ampli-rd.woocommerce-account .woocommerce form .form-row label:not(.woocommerce-form__label-for-checkbox) { display: block; margin: 0 0 6px; font: 600 15px/1.35 var(--a5-font) !important; color: var(--a5-ink) !important; } body.ampli-rd.woocommerce-account .woocommerce form .form-row input.input-text { width: 100% !important; } /* „Passwort anzeigen“: erbte von einer allgemeinen button-Regel volle Breite und Markenrot und lag als Balken über dem Feld */ body.ampli-rd .woocommerce form .password-input { position: relative; display: block; } body.ampli-rd .woocommerce form .password-input input.input-text { padding-right: 52px !important; } body.ampli-rd .woocommerce form .show-password-input { /* transform: none: WooCommerce zentriert zusätzlich per translateY(-50%); mit dem negativen Rand lag das Auge 22 px zu hoch auf der Feldkante (Mobile-QA 12.10.2026, Screenshot 23) */ position: absolute !important; top: 50% !important; right: 4px !important; left: auto !important; width: 44px !important; height: 44px !important; min-height: 0 !important; margin: -22px 0 0 !important; padding: 0 !important; transform: none !important; border: 0 !important; border-radius: var(--a5-r-sm) !important; background-color: transparent !important; color: var(--a5-muted) !important; box-shadow: none !important; cursor: pointer; } body.ampli-rd .woocommerce form .show-password-input:hover { background-color: var(--a5-surface) !important; } body.ampli-rd .woocommerce form .show-password-input::after { color: var(--a5-muted) !important; } /* Anmelden und Konto anlegen als Hauptaktion im Stil des Primärbuttons */ body.ampli-rd.woocommerce-account .woocommerce form.woocommerce-form-login button.woocommerce-form-login__submit, body.ampli-rd.woocommerce-account .woocommerce form.woocommerce-form-register button.woocommerce-form-register__submit, body.ampli-rd.woocommerce-account .woocommerce form button.woocommerce-Button, body.ampli-rd.woocommerce-account .woocommerce form button.button { white-space: nowrap; } body.ampli-rd.woocommerce-account .woocommerce form button.woocommerce-Button, body.ampli-rd.woocommerce-account .woocommerce .woocommerce-MyAccount-content .button { display: inline-flex !important; align-items: center; justify-content: center; min-height: var(--a5-btn-h); width: auto !important; max-width: 100%; margin: 4px 0 0 !important; padding: 12px 22px !important; border: 1.5px solid var(--a5-red) !important; border-radius: var(--a5-r-sm) !important; background: var(--a5-red) !important; color: #fff !important; font: 600 16px/1.2 var(--a5-font) !important; letter-spacing: 0 !important; text-transform: none !important; text-decoration: none !important; } body.ampli-rd.woocommerce-account .woocommerce form button.button:hover, body.ampli-rd.woocommerce-account .woocommerce .woocommerce-MyAccount-content .button:hover { background: var(--a5-red-dark) !important; border-color: var(--a5-red-dark) !important; } body.ampli-rd.woocommerce-account .woocommerce form.woocommerce-form-login .woocommerce-form-login__rememberme { display: inline-flex; align-items: center; gap: 8px; margin: 0 16px 0 0; font-weight: 500; } body.ampli-rd.woocommerce-account .woocommerce-LostPassword a, body.ampli-rd.woocommerce-account .woocommerce-privacy-policy-text a { color: var(--a5-ink) !important; text-decoration: underline; text-decoration-color: var(--a5-red); text-underline-offset: 3px; } /* Kontobereich (angemeldet): Navigation als Liste mit aktivem Eintrag, Inhalt rechts */ body.ampli-rd .woocommerce-MyAccount-navigation ul { margin: 0 !important; padding: 0 !important; list-style: none !important; border-top: 1px solid var(--a5-line); } body.ampli-rd .woocommerce-MyAccount-navigation li { margin: 0 !important; padding: 0 !important; list-style: none !important; border-bottom: 1px solid var(--a5-line); } body.ampli-rd .woocommerce-MyAccount-navigation li::before { content: none !important; } body.ampli-rd .woocommerce-MyAccount-navigation li a { display: block; padding: 12px 4px; color: var(--a5-ink) !important; font-weight: 600; text-decoration: none !important; } body.ampli-rd .woocommerce-MyAccount-navigation li.is-active a { color: var(--a5-red) !important; box-shadow: inset 3px 0 0 var(--a5-red); padding-left: 14px; } body.ampli-rd .woocommerce-MyAccount-content table.shop_table { border: 1px solid var(--a5-line) !important; border-radius: var(--a5-r) !important; border-collapse: separate !important; border-spacing: 0; overflow: hidden; } body.ampli-rd .woocommerce-MyAccount-content table.shop_table th, body.ampli-rd .woocommerce-MyAccount-content table.shop_table td { padding: 12px 14px !important; border: 0 !important; border-top: 1px solid var(--a5-line) !important; font-size: 15px; } body.ampli-rd .woocommerce-MyAccount-content table.shop_table thead th { border-top: 0 !important; background: var(--a5-surface-2); } body.ampli-rd .woocommerce-MyAccount-content address { padding: 16px 18px; border: 1px solid var(--a5-line); border-radius: var(--a5-r-sm); font-style: normal; line-height: 1.6; } @media (max-width: 768px) { body.ampli-rd.woocommerce-account .u-columns.col2-set > div { width: 100% !important; float: none !important; margin-bottom: 28px; } } /* 10.11 Sidebar-Warenkorb (Woocommerce Side Cart Premium): Funktion unverändert, nur Darstellung. Position als Zeile (Bild 80 px links, Name, Merkmale, Menge, Preis), ruhige Kopfzeile, Summen und zwei klare Aktionen. Das Plugin setzt Breite und Layout inline, daher teils !important. */ body.ampli-rd .xoo-wsc-modal .xoo-wsc-container { width: min(420px, 100vw) !important; max-width: 100vw !important; right: calc(-1 * min(420px, 100vw)) !important; background: var(--a5-white) !important; font-family: var(--a5-font); color: var(--a5-ink); } /* Geöffnet: Plugin setzt .xoo-wsc-cart-active an einen Vorfahren */ .xoo-wsc-cart-active body.ampli-rd .xoo-wsc-modal .xoo-wsc-container, body.ampli-rd.xoo-wsc-cart-active .xoo-wsc-modal .xoo-wsc-container, body.ampli-rd .xoo-wsc-cart-active .xoo-wsc-container, body.ampli-rd .xoo-wsc-modal.xoo-wsc-cart-active .xoo-wsc-container { right: 0 !important; } body.ampli-rd .xoo-wsc-modal .xoo-wsc-header { padding: 0 !important; border-bottom: 1px solid var(--a5-line) !important; } body.ampli-rd .xoo-wsc-modal .xoo-wsch-top { display: flex; align-items: center; gap: 10px; min-height: 64px; padding: 0 20px !important; } body.ampli-rd .xoo-wsc-modal .xoo-wsch-text { font: 700 19px/1.2 var(--a5-font) !important; color: var(--a5-ink) !important; } body.ampli-rd .xoo-wsc-modal .xoo-wsch-basket { position: relative; display: none; } body.ampli-rd .xoo-wsc-modal .xoo-wsch-close { position: static !important; margin-left: auto; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: var(--a5-r-sm); font-size: 22px !important; cursor: pointer; } body.ampli-rd .xoo-wsc-modal .xoo-wsch-close:hover { background: var(--a5-surface); } body.ampli-rd .xoo-wsc-modal .xoo-wsc-body { padding: 0 !important; } body.ampli-rd .xoo-wsc-modal .xoo-wsc-product { display: grid !important; grid-template-columns: 80px minmax(0, 1fr); gap: 14px; align-items: start; margin: 0 !important; padding: 16px 20px !important; border-bottom: 1px solid var(--a5-line) !important; } body.ampli-rd .xoo-wsc-modal .xoo-wsc-img-col { width: 80px !important; max-width: 80px !important; margin: 0 !important; } body.ampli-rd .xoo-wsc-modal .xoo-wsc-img-col img { display: block; width: 80px !important; height: 80px !important; max-width: none !important; margin: 0 !important; padding: 0 !important; object-fit: cover; border-radius: var(--a5-r-sm); } body.ampli-rd .xoo-wsc-modal .xoo-wsc-sum-col { width: auto !important; padding: 0 !important; } body.ampli-rd .xoo-wsc-modal .xoo-wsc-sm-info { display: grid !important; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 12px; align-items: start; } body.ampli-rd .xoo-wsc-modal .xoo-wsc-pname, body.ampli-rd .xoo-wsc-modal .xoo-wsc-pname a { display: block; margin: 0 0 8px; text-decoration: none !important; color: var(--a5-ink) !important; } body.ampli-rd .xoo-wsc-modal .a5-item-name { font-size: 15px; line-height: 1.35; } body.ampli-rd .xoo-wsc-modal .a5-variant { font-size: 13px; line-height: 1.45; } body.ampli-rd .xoo-wsc-modal .xoo-wsc-sm-right { display: flex !important; flex-direction: column; align-items: flex-end; justify-content: space-between; gap: 12px; height: 100%; min-height: 80px; } body.ampli-rd .xoo-wsc-modal .xoo-wsc-smr-ptotal { font-size: 15px !important; font-weight: 700; white-space: nowrap; color: var(--a5-ink) !important; } body.ampli-rd .xoo-wsc-modal .xoo-wsc-smr-del { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: var(--a5-r-sm); color: var(--a5-muted) !important; font-size: 17px !important; cursor: pointer; } body.ampli-rd .xoo-wsc-modal .xoo-wsc-smr-del:hover { background: var(--a5-red-soft); color: var(--a5-red) !important; } body.ampli-rd .xoo-wsc-modal .xoo-wsc-qty-box { display: inline-flex !important; align-items: center; width: auto !important; height: 38px !important; border: 1.5px solid var(--a5-line-strong) !important; border-radius: var(--a5-r-sm) !important; overflow: hidden; background: #fff; } body.ampli-rd .xoo-wsc-modal .xoo-wsc-qty-box .xoo-wsc-chng { display: inline-flex; align-items: center; justify-content: center; width: 36px !important; height: 36px; border: 0 !important; font-size: 18px !important; cursor: pointer; background: transparent !important; color: var(--a5-ink) !important; } body.ampli-rd .xoo-wsc-modal .xoo-wsc-qty-box .xoo-wsc-chng:hover { background: var(--a5-surface) !important; } body.ampli-rd .xoo-wsc-modal .xoo-wsc-qty-box input.xoo-wsc-qty { width: 36px !important; height: 36px !important; padding: 0 !important; border: 0 !important; text-align: center; font: 700 15px/1 var(--a5-font) !important; background: transparent !important; } body.ampli-rd .xoo-wsc-modal .xoo-wsc-footer { padding: 16px 20px 20px !important; border-top: 1px solid var(--a5-line); box-shadow: 0 -8px 20px rgba(28, 27, 26, .06); background: var(--a5-white) !important; } body.ampli-rd .xoo-wsc-modal .xoo-wsc-ecl { display: inline-block; margin: 0 0 8px; font-size: 13px !important; color: var(--a5-muted) !important; text-decoration: underline; cursor: pointer; } body.ampli-rd .xoo-wsc-modal .xoo-wsc-ftx-row { padding: 10px 0 !important; border-top: 1px solid var(--a5-line); border-bottom: 0 !important; font-size: 14px !important; } body.ampli-rd .xoo-wsc-modal .xoo-wsc-ft-totals { margin: 4px 0 12px !important; padding: 8px 0 0 !important; border-top: 1px solid var(--a5-line) !important; } body.ampli-rd .xoo-wsc-modal .xoo-wsc-ft-amt { display: flex !important; justify-content: space-between; gap: 12px; padding: 4px 0 !important; border: 0 !important; font-size: 15px !important; } body.ampli-rd .xoo-wsc-modal .xoo-wsc-ft-amt-label { font-weight: 500 !important; color: var(--a5-muted) !important; } body.ampli-rd .xoo-wsc-modal .xoo-wsc-ft-amt-total { margin-top: 4px; padding-top: 10px !important; border-top: 1px solid var(--a5-line) !important; } body.ampli-rd .xoo-wsc-modal .xoo-wsc-ft-amt-total .xoo-wsc-ft-amt-label, body.ampli-rd .xoo-wsc-modal .xoo-wsc-ft-amt-total .xoo-wsc-ft-amt-value { font-size: 18px !important; font-weight: 700 !important; color: var(--a5-ink) !important; } body.ampli-rd .xoo-wsc-modal .xoo-wsc-ft-buttons-cont { display: grid !important; grid-template-columns: 1fr; gap: 8px; } body.ampli-rd .xoo-wsc-modal a.xoo-wsc-ft-btn { display: flex !important; align-items: center; justify-content: center; min-height: 48px; margin: 0 !important; padding: 10px 16px !important; border-radius: var(--a5-r-sm) !important; font: 600 16px/1.2 var(--a5-font) !important; letter-spacing: 0 !important; text-transform: none !important; text-decoration: none !important; } body.ampli-rd .xoo-wsc-modal a.xoo-wsc-ft-btn-checkout { order: -1; border: 1.5px solid var(--a5-red) !important; background: var(--a5-red) !important; color: #fff !important; } body.ampli-rd .xoo-wsc-modal a.xoo-wsc-ft-btn-checkout:hover { background: var(--a5-red-dark) !important; border-color: var(--a5-red-dark) !important; } body.ampli-rd .xoo-wsc-modal a.xoo-wsc-ft-btn-continue { border: 1.5px solid var(--a5-line-strong) !important; background: #fff !important; color: var(--a5-ink) !important; } body.ampli-rd .xoo-wsc-modal a.xoo-wsc-ft-btn-continue:hover { border-color: var(--a5-ink) !important; } body.ampli-rd .xoo-wsc-modal .xoo-wsc-empty-cart { padding: 32px 20px; text-align: center; font-size: 16px; } /* Leerer Warenkorb: „Zurück zum Shop“ als Primärbutton. Die Plugin-Farbe (Markenrot) setzte sich gegen den Hintergrund durch, die Schrift blieb dunkel (Mobile-QA 12.10.2026, Screenshot 26); daher vollständig mit !important */ body.ampli-rd .xoo-wsc-modal .xoo-wsc-empty-cart { display: flex; flex-direction: column; align-items: center; gap: 16px; } body.ampli-rd .xoo-wsc-modal .xoo-wsc-empty-cart a.button { display: inline-flex !important; align-items: center; justify-content: center; width: 100%; max-width: 320px; min-height: var(--a5-btn-h); margin: 0 !important; padding: 12px 22px !important; border: 1.5px solid var(--a5-red) !important; border-radius: var(--a5-r-sm) !important; background: var(--a5-red) !important; color: #fff !important; font: 600 16px/1.2 var(--a5-font) !important; letter-spacing: 0 !important; text-transform: none !important; text-align: center; text-decoration: none !important; box-shadow: none !important; } body.ampli-rd .xoo-wsc-modal .xoo-wsc-empty-cart a.button:hover, body.ampli-rd .xoo-wsc-modal .xoo-wsc-empty-cart a.button:active { background: var(--a5-red-dark) !important; border-color: var(--a5-red-dark) !important; color: #fff !important; } @media (max-width: 420px) { body.ampli-rd .xoo-wsc-modal .xoo-wsc-product { padding: 14px 16px !important; } body.ampli-rd .xoo-wsc-modal .xoo-wsc-footer { padding: 14px 16px 16px !important; } } /* ---------- 11. Bestellbestätigung ---------- */ body.ampli-rd .woocommerce-order { display: flex; flex-direction: column; max-width: 900px; margin: 0 auto; font-size: 16px; } body.ampli-rd .woocommerce-order > .woocommerce-order-overview { order: 1; } body.ampli-rd .woocommerce-order > .woocommerce-order-details, body.ampli-rd .woocommerce-order > .woocommerce-customer-details, body.ampli-rd .woocommerce-order > section:not(.woocommerce-bacs-bank-details) { order: 2; } body.ampli-rd .woocommerce-order .woocommerce-thankyou-order-received { margin: 0 0 20px !important; padding: 18px 20px 18px 56px !important; position: relative; border: 1px solid #b9dcc4; border-radius: var(--a5-r); background: #eef8f1; color: #14472a !important; font-size: clamp(20px, 3vw, 26px) !important; font-weight: 700 !important; line-height: 1.3; text-transform: none !important; } body.ampli-rd .woocommerce-order .woocommerce-thankyou-order-received::before { content: "\2713"; position: absolute; left: 18px; top: 50%; transform: translateY(-50%); width: 28px; height: 28px; border-radius: 50%; background: var(--a5-success); color: #fff; font-size: 17px; line-height: 28px; text-align: center; } body.ampli-rd .a5-next-step { margin: 0 0 16px; padding: 18px 20px; border-left: 4px solid var(--a5-red); border-radius: var(--a5-r-sm); background: var(--a5-surface-2); } body.ampli-rd .a5-next-step h2 { margin: 0 0 6px !important; padding: 0 !important; font-size: 20px !important; font-weight: 700 !important; } body.ampli-rd .a5-next-step p { margin: 0; padding: 0; font-size: 16px; line-height: 1.55; } body.ampli-rd .woocommerce-bacs-bank-details { margin: 0 0 24px; padding: 18px 20px; border: 2px solid var(--a5-ink); border-radius: var(--a5-r); background: var(--a5-white); } body.ampli-rd .woocommerce-bacs-bank-details h2, body.ampli-rd .woocommerce-bacs-bank-details h3 { font-size: 18px !important; margin: 0 0 8px !important; padding: 0 !important; text-transform: none !important; } body.ampli-rd .woocommerce-bacs-bank-details ul.bacs_details { margin: 0 !important; padding: 0 !important; list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px 20px; } body.ampli-rd .woocommerce-bacs-bank-details ul.bacs_details::before, body.ampli-rd .woocommerce-bacs-bank-details ul.bacs_details::after { display: none !important; content: none !important; } body.ampli-rd .woocommerce-bacs-bank-details ul.bacs_details li { margin: 0 !important; padding: 0 !important; border: 0 !important; font-size: 13px !important; text-transform: uppercase; color: var(--a5-muted); } body.ampli-rd .woocommerce-bacs-bank-details ul.bacs_details li strong { display: block; font-size: 18px; text-transform: none; color: var(--a5-ink); letter-spacing: .02em; } body.ampli-rd .woocommerce-order ul.woocommerce-order-overview { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; margin: 0 0 24px !important; padding: 0 !important; list-style: none; } /* Clearfix-Pseudoelemente nicht als Rasterzelle */ body.ampli-rd .woocommerce-order ul.woocommerce-order-overview::before, body.ampli-rd .woocommerce-order ul.woocommerce-order-overview::after { display: none !important; content: none !important; } body.ampli-rd .woocommerce-order ul.woocommerce-order-overview li { margin: 0 !important; padding: 12px 14px !important; border: 1px solid var(--a5-line) !important; border-radius: var(--a5-r-sm); background: var(--a5-white); font-size: 13px !important; text-transform: uppercase; color: var(--a5-muted); float: none !important; } body.ampli-rd .woocommerce-order ul.woocommerce-order-overview li::before, body.ampli-rd .woocommerce-order ul.woocommerce-order-overview li::after { display: none !important; } body.ampli-rd .woocommerce-order ul.woocommerce-order-overview li strong { display: block; margin-top: 2px; font-size: 17px; text-transform: none; color: var(--a5-ink); } body.ampli-rd .woocommerce-order .woocommerce-order-details table, body.ampli-rd .woocommerce-order .woocommerce-customer-details address { border-radius: var(--a5-r) !important; } /* wpautop (Divi-Textmodul) setzt leere

um die Kommentare „/.col-1“; Lieferadresse stand dadurch 18 px tiefer */ body.ampli-rd .woocommerce-customer-details .col2-set > p:empty { display: none; } body.ampli-rd .woocommerce-order .wc-item-meta { margin: 4px 0 0 !important; padding: 0 !important; list-style: none; font-size: 14px; color: #1d5a33; } body.ampli-rd .woocommerce-order .wc-item-meta li { margin: 0 !important; } body.ampli-rd .woocommerce-order .wc-item-meta p { display: inline; margin: 0; } /* ---------- 12. Desktop-QA 12.10.2026: Infoboxen der Ratgeber (Screenshot 13) ---------- */ /* Symbol mittig zur ersten Zeile der Überschrift (32 px Symbol, 23 px Zeile: -4 px), Liste direkt unter der Überschrift mit derselben Einrückung wie im Fließtext, Links im Fließtextstil (Abschnitt 3). Nur Artikel-Template. */ body.ampli-rd .a5-article__content .et_pb_column:last-child :is(.info-box, .expert-box, .key-facts) :is(h2, h3) + :is(ul, ol) { margin-top: 4px !important; } body.ampli-rd .a5-article__content .et_pb_column:last-child :is(.info-box, .expert-box, .key-facts) :is(ul, ol) { padding-left: 1.2em !important; } body.ampli-rd .a5-article__content .et_pb_column:last-child :is(.info-box, .expert-box, .key-facts) li:last-child { margin-bottom: 0 !important; } body.ampli-rd .a5-article__content .et_pb_column:last-child :is(.info-box, .expert-box, .key-facts) :is(p, li, h2, h3) { -webkit-hyphens: none; hyphens: none; } /* Inhaltsverzeichnis mit Produkthinweis: schmale Scrollleiste, wenn beides höher als das Fenster ist */ body.ampli-rd .a5-article__content .et_pb_column:first-child { scrollbar-width: thin; } /* ---------- 13. Popups (Popup Maker, Thema 38399), Desktop-QA 12.10.2026, Screenshot 11 ---------- */ /* Vorher: deckend weißer Hintergrund, graue Box mit 18 px Rahmen, goldener Knopf „Zurück“, Bild mit Rand. Jetzt: abgedunkelter Hintergrund, Karte im System (Radius, Schatten), Bild randlos oben, Schließen als runder Knopf (Text „Zurück“ bleibt für Screenreader), Inhalt scrollt bei kleinen Fenstern. Newsletter (39229): Einleitung aus r7, Brevo-Formular (iframe) in voller Breite; vor der Einwilligung der Borlabs-Platzhalter „Brevo“ als Karte. Anbindung, Double-Opt-in und Gutscheinautomatik liegen bei Brevo und bleiben unverändert. Auf Staging sperrt die CSP (frame-src 'self') das Formular auch nach der Einwilligung; auf Production gilt diese Sperre nicht. */ body.ampli-rd .pum-overlay.pum-theme-38399 { background-color: rgba(28, 27, 26, .55) !important; } body.ampli-rd .pum-theme-38399 .pum-container { width: min(560px, calc(100vw - 32px)) !important; max-width: none !important; max-height: calc(100vh - 48px); max-height: calc(100dvh - 48px); overflow-y: auto; overscroll-behavior: contain; left: 50% !important; margin-left: 0 !important; transform: translateX(-50%); top: 24px !important; padding: 0 !important; border: 0 !important; border-radius: var(--a5-r-lg) !important; background: var(--a5-white) !important; box-shadow: 0 24px 64px rgba(28, 27, 26, .35) !important; } body.ampli-rd .pum-theme-38399 .pum-content { color: var(--a5-ink); font-family: var(--a5-font); } body.ampli-rd .pum-theme-38399 .pum-content .et_pb_section, body.ampli-rd .pum-theme-38399 .pum-content .et_pb_row, body.ampli-rd .pum-theme-38399 .pum-content .et_pb_column { width: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 !important; background: transparent !important; } body.ampli-rd .pum-theme-38399 .popup-bild { margin: 0 !important; } body.ampli-rd .pum-theme-38399 .popup-bild img { display: block; width: 100% !important; height: auto; aspect-ratio: 16 / 7; object-fit: cover; border-radius: 0 !important; } body.ampli-rd .pum-theme-38399 .popup-newsletter, body.ampli-rd .pum-theme-38399 .popup-hinweis { height: auto !important; margin: 0 !important; padding: 20px clamp(16px, 4vw, 28px) 24px !important; } body.ampli-rd .pum-theme-38399 .a5-nl { margin: 0 0 12px; } body.ampli-rd .pum-theme-38399 h2.a5-nl__title, body.ampli-rd .pum-theme-38399 .popup-hinweis h2 { margin: 0 0 6px !important; padding: 0 !important; font: 700 22px/1.25 var(--a5-font) !important; color: var(--a5-ink) !important; text-transform: none !important; } body.ampli-rd .pum-theme-38399 .a5-nl__text, body.ampli-rd .pum-theme-38399 .popup-hinweis p { margin: 0 0 8px !important; padding: 0 !important; font-size: 16px !important; line-height: 1.55 !important; color: var(--a5-muted); } body.ampli-rd .pum-theme-38399 .popup-newsletter iframe { display: block; width: 100% !important; max-width: 100% !important; height: min(600px, calc(100vh - 360px)); min-height: 360px; border: 0; } body.ampli-rd .pum-theme-38399 .popup-newsletter p:has(> iframe), body.ampli-rd .pum-theme-38399 .popup-newsletter p:has(> .brlbs-cmpnt-container) { margin: 0 !important; padding: 0 !important; } body.ampli-rd .pum-theme-38399 .pum-close { position: absolute !important; top: 12px !important; right: 12px !important; left: auto !important; bottom: auto !important; display: flex !important; align-items: center; justify-content: center; width: 44px !important; height: 44px !important; min-width: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 50% !important; background: rgba(255, 255, 255, .95) !important; box-shadow: 0 2px 10px rgba(0, 0, 0, .2) !important; color: transparent !important; font-size: 0 !important; line-height: 0 !important; text-indent: 0 !important; cursor: pointer; } body.ampli-rd .pum-theme-38399 .pum-close::before { content: "×"; color: var(--a5-ink); font: 400 28px/1 var(--a5-font); } body.ampli-rd .pum-theme-38399 .pum-close:hover { background: #fff !important; } body.ampli-rd .pum-theme-38399 .pum-close:hover::before { color: var(--a5-red); } /* Borlabs-Platzhalter „Brevo“ im Popup: Erklärung und Schaltflächen untereinander auf heller Fläche */ body.ampli-rd .brlbs-cmpnt-content-blocker[data-borlabs-cookie-content-blocker-id="brevo"] .brlbs-cmpnt-cb-preset-b { display: block !important; position: relative; padding: 16px !important; border-radius: var(--a5-r) !important; background: var(--a5-surface-2) !important; } body.ampli-rd .brlbs-cmpnt-content-blocker[data-borlabs-cookie-content-blocker-id="brevo"] .brlbs-cmpnt-cb-thumbnail { display: none !important; } body.ampli-rd .brlbs-cmpnt-content-blocker[data-borlabs-cookie-content-blocker-id="brevo"] .brlbs-cmpnt-cb-main { display: block !important; position: static !important; padding: 0 !important; background: transparent !important; } body.ampli-rd .brlbs-cmpnt-content-blocker[data-borlabs-cookie-content-blocker-id="brevo"] .brlbs-cmpnt-cb-buttons { margin-top: 4px !important; } /* ---------- 14. BZI-Seite: Foto zum Messverfahren (scripts/redesign-2026-r7.php, Desktop-QA 12.10.2026, Screenshot 07) ---------- */ /* Eigene Zeile unter den Unterlagenkarten: Foto links, Einordnung rechts, Quelle klein darunter; mobil untereinander */ body.ampli-rd .a5-docfig { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(18px, 3vw, 40px); align-items: center; margin: var(--a5-gap) 0 0 !important; padding: clamp(16px, 2.4vw, 24px); border: 1px solid var(--a5-line); border-radius: var(--a5-r); background: var(--a5-white); } @media (min-width: 900px) { body.ampli-rd .a5-docfig { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } } body.ampli-rd .a5-docfig__media img { display: block; width: 100%; height: auto; border-radius: var(--a5-r-sm); } body.ampli-rd .a5-section .a5-docfig__text h3 { margin: 0 0 10px !important; } body.ampli-rd .a5-section .a5-docfig__text p { margin: 0 0 10px !important; font-size: 16px !important; line-height: 1.6 !important; } body.ampli-rd .a5-section .a5-docfig__text p.a5-docfig__source { margin: 14px 0 0 !important; font-size: 13px !important; color: var(--a5-muted); } /* ---------- 15. Produktverweis im Artikel (Desktop-QA 12.10.2026, Screenshot 12) ---------- */ /* Kurzer Text ohne Silbentrennung („Schönheits-fehlern“), Preis mit Streichpreis wie in den Karten */ body.ampli-rd .a5-article-cta :is(.a5-article-cta__title, .a5-article-cta__text) { -webkit-hyphens: none !important; hyphens: none !important; text-wrap: pretty; } body.ampli-rd .a5-article__content .et_pb_column:last-child p.a5-article-cta__price del { margin-right: 6px; color: var(--a5-muted); font-weight: 400; } body.ampli-rd .a5-article__content .et_pb_column:last-child p.a5-article-cta__price ins { text-decoration: none; color: var(--a5-red); font-weight: 700; }