wie der Name)
rechtsbündig in der Zeile. */
.wc-block-checkout__payment-method .wc-block-components-radio-control__label > div:has(> img) {
display: flex;
flex: 1 1 auto;
align-items: center;
justify-content: space-between;
gap: 12px;
}
.woocommerce-checkout .wc-block-components-product-metadata {
display: none !important;
}
.woocommerce-cart .wc-block-components-product-metadata {
margin: 10px 0;
}
.woocommerce-cart .wc-block-components-product-badge.wc-block-components-sale-badge, .woocommerce-checkout .wc-block-components-product-badge.wc-block-components-sale-badge {
display: none !important;
}
.wc-block-components-order-summary .wc-block-components-order-summary-item__description {
padding: 4px 48px 12px 24px !important;
}
.wc-block-components-order-summary .wc-block-components-order-summary-item__quantity {
width: 1em !important;
height: 1em !important;
min-height: 1em !important;
min-width: 1em !important;
padding: 0.7em;
line-height: 0;
}
.wc-block-components-order-summary .wc-block-components-order-summary-item__quantity span {
font-size: 13px !important;
}
.woocommerce-cart .wc-block-components-product-metadata {
gap: 10px !important;
}
.wp-block-woocommerce-cart-order-summary-coupon-form-block.wc-block-components-totals-wrapper {
padding-bottom: 0 !important;
}
/* Warenkorb: WooCommerce setzt td.wc-block-cart-item__total auf display:flex. Die Zelle faellt
damit aus dem border-collapse, ihre border-top sitzt ~1px tiefer als bei den Nachbarzellen.
Ab 700px (Tabellenlayout) wieder als Tabellenzelle, rechtsbuendig wie zuvor. */
@media (min-width: 700px) {
.wc-block-cart__main .wc-block-cart-items td.wc-block-cart-item__total {
display: table-cell;
text-align: right;
}
}
/* ==========================================================================
Responsive (Breakpoints der Site: Mobil 667px, Tablet 820px)
========================================================================== */
/* Lange Komposita in Ueberschriften (z.B. «Kochnationalmannschaften») laufen auf Tablet
und Mobil aus der Spalte. Avada bietet keine Option fuer Silbentrennung.
overflow-wrap:anywhere statt break-word, weil die Content-Boxen display:table sind. */
@media (max-width: 820px) {
.fusion-layout-column h1,
.fusion-layout-column h2,
.fusion-layout-column h3,
.fusion-layout-column h4,
.fusion-layout-column h5,
.fusion-layout-column .fusion-title-heading {
hyphens: auto;
-webkit-hyphens: auto;
overflow-wrap: anywhere;
}
}
/* Trustline (globales Element 2114): Trennlinien zwischen den Spalten. Gestapelt auf Mobil
ergeben sie nur Striche am rechten Rand; die Rahmenbreite ist bei Spalten nicht pro
Geraet einstellbar. Klasse hh-trust-trenner ist im Builder an den Spalten gesetzt. */
@media (max-width: 667px) {
.hh-trust-trenner > .fusion-column-wrapper {
border-right-width: 0 !important;
}
}
/* Siegel-Reihe (Homepage): Spalte im Zeilen-Layout mit space-between. Mobil umbrechend
stehen die Siegel sonst linksbuendig. Die Ausrichtung der Spalte ist nicht pro Geraet
einstellbar. Klasse hh-siegel ist im Builder an der Spalte gesetzt. */
@media (max-width: 667px) {
.hh-siegel > .fusion-column-wrapper {
justify-content: center !important;
}
}
/* Header (Global Header 1339): Haupt- und Icon-Menue stehen in Spalten mit Breite "auto".
Avada misst deren Breite ohne die Menue-Abstaende und bricht die Menues dann um.
Fuer den Umbruch im Menue-Element gibt es keine Option. Klassen im Builder gesetzt. */
.hh-hdr-menu .awb-menu__main-ul,
.hh-hdr-icons .awb-menu__main-ul {
flex-wrap: nowrap;
}
/* Header-Suche (FiboSearch) bringt fest min-width:230px mit, ohne Plugin-Option.
Zwischen 821 und ~900px ragen die Header-Icons sonst ueber den Rand. */
.hh-hdr-suche .dgwt-wcas-search-wrapp {
min-width: 0;
}
/* Header-Suche mobil: FiboSearch-Stil Pirx hat 10px Innenrand, die sichtbare Suchpille sitzt
dadurch 10px innerhalb der Spalte. Mobil buendig mit Logo und Hamburger; Lupe und
Ladeanzeige ruecken um dieselben 10px nach, damit ihre Abstaende in der Pille bleiben. */
@media (max-width: 667px) {
.hh-hdr-suche .dgwt-wcas-style-pirx .dgwt-wcas-sf-wrapp {
padding-left: 0;
padding-right: 0;
}
.hh-hdr-suche .dgwt-wcas-style-pirx .dgwt-wcas-sf-wrapp button.dgwt-wcas-search-submit {
left: 13px;
}
.hh-hdr-suche .dgwt-wcas-style-pirx .dgwt-wcas-preloader {
right: 23px;
}
}
/* Lange Woerter, URLs und E-Mail-Adressen im Fliesstext und in Listen (z.B. Kontakt-E-Mail,
Produkttexte) laufen auf Tablet und Mobil aus der Spalte. Avada bietet dafuer keine Option.
overflow-wrap bricht nur Woerter, die sonst ueberlaufen wuerden; normaler Text bleibt gleich. */
@media (max-width: 820px) {
.fusion-layout-column p,
.fusion-layout-column li,
.fusion-layout-column .fusion-li-item-content,
.fusion-layout-column .fusion-text {
overflow-wrap: anywhere;
}
}
/* Header mobil: aufgeklapptes Menue soll die Suche darunter ganz verdecken. Avada setzt
mobile_nav_trigger_bottom_margin (24px, fuer Tablet) nur als einen Wert fuer alle Geraete,
inline als CSS-Variable am Menue - daher !important. 6px = knapp unter dem Logo. */
@media (max-width: 667px) {
.hh-hdr-menu .awb-menu {
--awb-mobile-nav-trigger-bottom-margin: 6px !important;
}
}
/* Hero-Bereiche (Container-Klasse hero, im Builder gesetzt): keine Silbentrennung.
overflow-wrap aus der Regel oben bleibt als Notbremse gegen Ueberlauf aktiv. */
@media (max-width: 820px) {
.hero .fusion-layout-column h1,
.hero .fusion-layout-column h2,
.hero .fusion-layout-column h3,
.hero .fusion-layout-column h4,
.hero .fusion-layout-column h5,
.hero .fusion-layout-column .fusion-title-heading {
hyphens: manual;
-webkit-hyphens: manual;
}
}
/* Siegel-Reihe (Startseite, Spalte hh-siegel) auf Tablet: alle 4 Logos in einer Zeile wie auf
Desktop, Logos schrumpfen proportional. Bildbreite und Umbruch sind in Avada nicht pro Geraet
einstellbar; der Abstand (20px) ist als column_gap_medium im Builder gesetzt. */
@media (min-width: 668px) and (max-width: 820px) {
.hh-siegel > .fusion-column-wrapper {
flex-wrap: nowrap !important;
justify-content: center !important;
}
}
/* Trust-Sektion (Logo-Spalte hh-trust-logos, im Builder gesetzt): mobil beide Logos
nebeneinander. content_layout der Spalte ist in Avada nicht pro Geraet einstellbar;
Abstand unter dem ersten Logo (margin_bottom_small 0) und zwischen den Logos
(column_gap_small 10px) sind im Builder gesetzt. */
@media (max-width: 667px) {
.hh-trust-logos > .fusion-column-wrapper {
flex-direction: row !important;
}
.hh-trust-logos .fusion-image-element {
flex: 1 1 0;
min-width: 0;
display: flex;
}
/* gleiche Hoehe: Nordic Swan ist 630x573 plus 5px Rahmen, EU Ecolabel quadratisch.
Kasten fuellt die Zeilenhoehe, Logo mittig auf weissem Grund (Rahmenfarbe). */
.hh-trust-logos > .fusion-column-wrapper {
align-items: stretch !important;
}
.hh-trust-logos .fusion-imageframe {
display: flex !important;
align-items: center;
justify-content: center;
width: 100%;
background: var(--awb-color1);
}
}
/* Siegel-Reihe (globales Element 2628, Spalte hh-siegel) mobil: 2 Logos pro Zeile, 2 Zeilen.
Die Logos stehen in einer gemeinsamen Spalte, Breite pro Logo ist in Avada nicht pro Geraet
einstellbar. Abstaende (20px) als column_gap_small / row_gap_small im Builder gesetzt. */
@media (max-width: 667px) {
.hh-siegel .fusion-image-element {
flex: 0 0 calc(50% - 10px);
text-align: center;
}
}
/* Produktraster Kategorie/Shop/Suche (fusion_tb_post_card_archives, Karten-Design 123) auf
Tablet: Filter 1/3 laesst nur ~209-258px pro Karte. Karten-Innenabstand reduziert; Preis und Button-Text nie mitten im Wort trennen (overflow-wrap-Regel oben).
Das Karten-Design hat keine Optionen pro Geraet und wird auch auf der Startseite genutzt,
daher nur auf .fusion-grid-archive. Rasterabstand: column_spacing_medium 10 im Builder. */
@media (min-width: 668px) and (max-width: 820px) {
.fusion-grid-archive .fusion-grid-column > .fusion-column-wrapper {
padding: 10px !important;
}
.fusion-grid-archive .fusion-woo-price-tb,
.fusion-grid-archive .fusion-woo-price-tb *,
.fusion-grid-archive .fusion-post-card-cart a,
.fusion-grid-archive .fusion-post-card-cart a * {
overflow-wrap: normal !important;
}
}
/* H3 auf Tablet 20px (Desktop 26px aus den Avada-Typografie-Optionen), damit Kacheltitel wie
«Versandkosten» in 1/3-Kacheln nicht umbrechen (bei 668px nur 147px Platz). Avada kennt keine
H3-Groesse pro Geraet; die responsive Skalierung wirkt global und setzt die Groesse am Element,
daher !important. Titel mit eigener Schriftgroesse (--awb-font-size, z.B. Kategorie-Kacheln)
bleiben unberuehrt. */
@media (min-width: 668px) and (max-width: 820px) {
.fusion-title:not([style*="--awb-font-size"]) h3.fusion-title-heading {
font-size: 20px !important;
}
}
/* Produkt-Template: Logos unter dem Produktbild schrumpfen gleichmässig statt umzubrechen
(Spalte .hh-produkt-logos, Umbruch per Builder-Option aus). */
.hh-produkt-logos > .fusion-column-wrapper > .fusion-image-element {
min-width: 0;
}
/* Warenkorb und Kasse: Aufteilung 60/40 statt 65/35 (WooCommerce-Blöcke, nur nebeneinander) */
.wc-block-components-sidebar-layout.is-large .wc-block-components-main {
width: 60% !important;
}
.wc-block-components-sidebar-layout.is-large .wc-block-components-sidebar {
width: 40% !important;
}
/* Kasse, Bestellübersicht: Zeilenpreis unter den Artikel statt daneben (Seitenleiste bzw. mobile Übersicht) */
@media (max-width: 1024px) {
.wc-block-checkout .wc-block-components-order-summary-item {
flex-wrap: wrap;
}
.wc-block-checkout .wc-block-components-order-summary-item__description {
flex: 1 1 0;
min-width: 0;
padding-right: 0 !important;
}
.wc-block-checkout .wc-block-components-order-summary-item__total-price {
flex: 1 0 100%;
margin: -8px 0 12px;
padding-top: 0;
text-align: right;
}
}
/* Mein Konto: Hinweise mit Button – Text links, Button rechts bzw. darunter, statt umflossen */
.woocommerce-MyAccount-content .wc-block-components-notice-banner__content {
display: flex;
flex-wrap: wrap;
align-items: center;
column-gap: 20px;
row-gap: 10px;
}
.woocommerce-MyAccount-content .wc-block-components-notice-banner__content > .button {
float: none !important;
order: 2;
margin-left: auto !important;
flex-shrink: 1;
max-width: 100%;
}
/* Produktseite: «In den Warenkorb» seitlich 23px statt globaler 29px (Woo-Cart-Element ohne Padding-Option) */
.fusion-woo-cart .single_add_to_cart_button {
padding-left: 23px !important;
padding-right: 23px !important;
}
/* Kontakt «So erreichen Sie uns»: Tablet 2 Einträge pro Reihe (Checkliste ohne Spalten-Option).
Avada lässt beim 1. Eintrag den oberen Innenabstand weg – der 2. wird angeglichen. */
@media (min-width: 668px) and (max-width: 820px) {
.hh-kontakt-liste {
display: grid !important;
grid-template-columns: 1fr 1fr;
column-gap: 30px;
row-gap: 20px;
}
.hh-kontakt-liste > li:nth-child(2) {
padding-top: 0 !important;
}
}
/* Produktkarten (Post Cards): «In den Warenkorb» seitlich 23px wie auf der Produktseite (keine Padding-Option) */
a.fusion-post-card-cart-add-to-cart {
padding-left: 23px !important;
padding-right: 23px !important;
}
/* Mobil: #content ohne 50px Abstand unten. Avada setzt ihn bis 640px auf allen Seiten ohne
Vorlage «100% Breite» (Shop, Kategorien, Produkte, Warenkorb, Kasse, Konto); keine globale Option. */
@media (max-width: 640px) {
#content {
margin-bottom: 0 !important;
}
}
/* Produktseite mobil: Breadcrumbs mit geringerer Zeilenhöhe (Element ohne Zeilenhöhen-Option) */
@media (max-width: 667px) {
.hh-produkt-breadcrumbs,
.hh-produkt-breadcrumbs * {
line-height: 1.5 !important;
}
}
/* Produktseite mobil, Tab «Zusätzliche Information»: Bezeichnung über dem Wert statt daneben
(Spalten zu schmal, Bezeichnung brach um und klebte am Wert). Tabelle ohne Optionen. */
@media (max-width: 667px) {
.woocommerce-product-attributes tr,
.woocommerce-product-attributes th,
.woocommerce-product-attributes td {
display: block;
width: auto !important;
}
.woocommerce-product-attributes th {
padding: 10px 0 2px !important;
}
.woocommerce-product-attributes td {
padding: 0 0 10px !important;
}
}
/* Warenkorb mobil (WooCommerce is-mobile/is-small): Zeilenpreis unter den Artikel. Die feste
Rasterbreite 80/132px + Preis ragte ab ca. 390px rechts hinaus (375: 39px). */
.wc-block-cart.is-mobile .wc-block-cart-items,
.wc-block-cart.is-small .wc-block-cart-items { width: 100%; }
.wc-block-cart.is-mobile .wc-block-cart-items__row,
.wc-block-cart.is-small .wc-block-cart-items__row { grid-template-columns: 80px minmax(0, 1fr) !important; }
.wc-block-cart.is-mobile .wc-block-cart-item__product,
.wc-block-cart.is-small .wc-block-cart-item__product { grid-column: 2 / 3 !important; min-width: 0; }
.wc-block-cart.is-mobile .wc-block-cart-item__total,
.wc-block-cart.is-small .wc-block-cart-item__total { grid-column: 2 / 3 !important; grid-row: 2 !important; justify-content: flex-start; margin-top: 10px; }
/* Warenkorb: keine Linie unter dem letzten Produkt – gestapelt hängt sie an der letzten Zeile,
nebeneinander (is-large) an der Tabelle selbst */
.wc-block-cart .wc-block-cart-items__row:last-child,
.wc-block-cart .wc-block-cart-items {
border-bottom: 0 !important;
}
/* Mein Konto mobil: Inhaltskasten 20px statt 30px Innenabstand (Konvention mobil); Hinweis-Button
als Block, damit sein Text unter dem Icon umbricht statt eingerückt daneben. */
@media (max-width: 667px) {
.woocommerce-MyAccount-content { padding: 20px !important; }
.woocommerce-MyAccount-content .wc-block-components-notice-banner__content > .button { display: block !important; margin-left: 0 !important; }
}
/* Warenkorb: leere
ausblenden. Der Warenkorb-Block steht in einem Avada-Textelement; dessen Editor
packt jeden Block-Kommentar in
, nach dem Rendern bleiben 14 leere Absätze à 20px. Ausgeblendet nur die
unter dem Kassen-Button (Seitenleiste) und vor/nach dem Block; die übrigen bilden die Abstände.
Kasse mobil: kein Abstand unter «Jetzt kaufen». */
.wc-block-components-sidebar > p:empty,
.fusion-text > p:has(+ .wp-block-woocommerce-cart),
.wp-block-woocommerce-cart + p {
display: none;
}
@media (max-width: 667px) {
.wc-block-checkout__actions {
margin-bottom: 0 !important;
}
}
/* Kasse mobil: Bestellübersicht ohne Innenabstand links/rechts (Germanized setzt 16px) */
@media (max-width: 667px) {
.wc-gzd-checkout .wc-block-components-order-summary {
padding-left: 0 !important;
padding-right: 0 !important;
}
}