.elementor-kit-216{--e-global-color-primary:#262626;--e-global-color-secondary:#F7F2F1;--e-global-color-text:#262626;--e-global-color-accent:#FFF0FF;--e-global-typography-primary-font-family:"ABC Favorit";--e-global-typography-primary-font-size:20px;--e-global-typography-primary-font-weight:600;--e-global-typography-primary-text-transform:lowercase;--e-global-typography-primary-line-height:20px;--e-global-typography-secondary-font-family:"ABC Favorit";--e-global-typography-secondary-font-size:100px;--e-global-typography-secondary-font-weight:600;--e-global-typography-secondary-text-transform:lowercase;--e-global-typography-secondary-line-height:81px;--e-global-typography-text-font-family:"ABC Favorit";--e-global-typography-text-font-size:20px;--e-global-typography-text-font-weight:400;--e-global-typography-text-text-transform:lowercase;--e-global-typography-text-line-height:22px;--e-global-typography-accent-font-family:"ABC Favorit";--e-global-typography-accent-font-weight:500;background-color:#F6F2F1;color:var( --e-global-color-primary );font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-size:var( --e-global-typography-text-font-size );font-weight:var( --e-global-typography-text-font-weight );text-transform:var( --e-global-typography-text-text-transform );line-height:var( --e-global-typography-text-line-height );}.elementor-kit-216 button,.elementor-kit-216 input[type="button"],.elementor-kit-216 input[type="submit"],.elementor-kit-216 .elementor-button{background-color:#26262600;font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-size:var( --e-global-typography-text-font-size );font-weight:var( --e-global-typography-text-font-weight );text-transform:var( --e-global-typography-text-text-transform );line-height:var( --e-global-typography-text-line-height );color:var( --e-global-color-primary );border-style:solid;border-width:2px 2px 2px 2px;border-radius:0px 0px 0px 0px;}.elementor-kit-216 e-page-transition{background-color:#FFBC7D;}.elementor-kit-216 a{color:var( --e-global-color-text );font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-size:var( --e-global-typography-text-font-size );font-weight:var( --e-global-typography-text-font-weight );text-transform:var( --e-global-typography-text-text-transform );line-height:var( --e-global-typography-text-line-height );}.elementor-kit-216 h1{color:var( --e-global-color-primary );font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-size:var( --e-global-typography-secondary-font-size );font-weight:var( --e-global-typography-secondary-font-weight );text-transform:var( --e-global-typography-secondary-text-transform );line-height:var( --e-global-typography-secondary-line-height );}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;}.elementor-widget:not(:last-child){margin-block-end:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1024px){.elementor-kit-216{font-size:var( --e-global-typography-text-font-size );line-height:var( --e-global-typography-text-line-height );}.elementor-kit-216 a{font-size:var( --e-global-typography-text-font-size );line-height:var( --e-global-typography-text-line-height );}.elementor-kit-216 h1{font-size:var( --e-global-typography-secondary-font-size );line-height:var( --e-global-typography-secondary-line-height );}.elementor-kit-216 button,.elementor-kit-216 input[type="button"],.elementor-kit-216 input[type="submit"],.elementor-kit-216 .elementor-button{font-size:var( --e-global-typography-text-font-size );line-height:var( --e-global-typography-text-line-height );}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-kit-216{font-size:var( --e-global-typography-text-font-size );line-height:var( --e-global-typography-text-line-height );}.elementor-kit-216 a{font-size:var( --e-global-typography-text-font-size );line-height:var( --e-global-typography-text-line-height );}.elementor-kit-216 h1{font-size:var( --e-global-typography-secondary-font-size );line-height:var( --e-global-typography-secondary-line-height );}.elementor-kit-216 button,.elementor-kit-216 input[type="button"],.elementor-kit-216 input[type="submit"],.elementor-kit-216 .elementor-button{font-size:var( --e-global-typography-text-font-size );line-height:var( --e-global-typography-text-line-height );}.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}/* Start custom CSS */.e-filter-item[aria-pressed="true"] { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 2px; font-weight: bold; position: relative; padding-left: 28px !important; /* Platz für das Icon */ } .e-filter-item[aria-pressed="true"]::before { content: ''; position: absolute; left: 8px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; background: url('https://studioo.wmd-branding.com/wp-content/uploads/2025/07/pfeilrechts.svg') no-repeat center/contain; } .page-header { display: none; } .page-id-465 { height: 100vh; min-height: 100vh; box-sizing: border-box; overflow: hidden; } /* Für mobile Geräte: Scroll wieder erlauben */ @media (max-width: 1023px) { .page-id-465 { overflow: auto; } } .elementor-menu-toggle { background-color: transparent !important; } .floating-img-container { overflow: hidden; display: inline-block; position: relative; width: fit-content; } .floating-img-container img { transform-origin: center center; transform: scale(1.05); transition: transform 0.5s ease; } .floating-img-container:hover img { animation: floatInCircle 8s linear infinite; } @keyframes floatInCircle { 0% { transform: scale(1.05) translate( 0px, -6px); } 12.5% { transform: scale(1.05) translate( 6px, -4px); } 25% { transform: scale(1.05) translate( 8px, 0px); } 37.5% { transform: scale(1.05) translate( 6px, 4px); } 50% { transform: scale(1.05) translate( 0px, 6px); } 62.5% { transform: scale(1.05) translate(-6px, 4px); } 75% { transform: scale(1.05) translate(-8px, 0px); } 87.5% { transform: scale(1.05) translate(-6px, -4px); } 100% { transform: scale(1.05) translate( 0px, -6px); } } /* -------- Deine bestehenden rechten Ränder (optional beibehalten) -------- */ /* Standard: kein rechter Rand */ .elementor-loop-container > .e-loop-item .elementor-element-51f13d86 { border-right: none; } /* Rechter Rand NUR beim letzten Item, wenn Gesamtzahl % 3 = 1 (Spalte 1) oder % 3 = 2 (Spalte 2) */ .elementor-loop-container > div.e-loop-item:last-of-type:nth-of-type(3n+1) .elementor-element-51f13d86, .elementor-loop-container > div.e-loop-item:last-of-type:nth-of-type(3n+2) .elementor-element-51f13d86 { border-right: 2px solid var(--e-global-color-text) !important; } /* tablet rechter rand bei letztem element*/ @media (min-width: 768px) and (max-width: 1024px) { .elementor-loop-container > div.e-loop-item:last-child { border-right: 2px solid #000; /* Farbe bei Bedarf anpassen */ } } .e-loop-nothing-found-message__text { text-align: left; padding-left: 45px; } .hover-image-container { position: relative; display: inline-block; } .product-main-image { display: block; transition: opacity 0.4s ease; } .artist-hover-image { position: absolute; top: 0; left: 0; opacity: 0; transition: opacity 0.4s ease; } .hover-image-container:hover .artist-hover-image { opacity: 1; } .hover-image-container:hover .product-main-image { opacity: 0; } /* --------------------------------------------- Allgemein ---------------------------------------------- */ /* Elementor-Gap entfernen */ .elementor-grid { gap: 0 !important; } /* Kategorie-Link unterstreichen, wenn aktiv */ .product-category a.active-category h2 { text-decoration: underline; text-underline-offset: 4px; } div[role="alert"] { font-family: "ABC Favorit", sans-serif; } /* Falls ein Overlay hängenbleibt */ .blockUI.blockOverlay { pointer-events: none !important; } /* Gebt dem Stripe-Element Priorität */ .wcpay-upe-element { position: relative; z-index: 2; } .wcpay-upe-element iframe { pointer-events: auto !important; } /* Hängengebliebenes WooCommerce Overlay */ .blockUI.blockOverlay, .woocommerce .processing { pointer-events: none !important; opacity: 0 !important; } /* Gib dem Zahlungsfeld Priorität */ .wcpay-upe-element { position: relative; z-index: 100 !important; } .wcpay-upe-element iframe { pointer-events: auto !important; } /* Häufige Theme/Elementor-Ursachen: transform/overflow erzeugen Stacking-Kontexte */ .elementor-sticky--effects, .elementor-nav-menu--dropdown { transform: none !important; } .elementor *, .woocommerce-checkout * { overflow: visible !important; } .woocommerce-message::before{ color: #2b2b2b; } .woocommerce-info::before{ color: #2b2b2b; } .woocommerce-error::before{ color: #2b2b2b; } .woocommerce-message, .woocommerce-info, .woocommerce-error { font-family: ABC Favorit; color: #2b2b2b; background-color: #F7F2F1; border: 2px solid #2b2b2b; font-weight: normal; font-size: 20px; } .woocommerce a.button.wc-backward { background-color: #2b2b2b !important; color: #ffffff !important; font-family: "ABC Favorit", sans-serif !important; font-weight: normal !important; border-radius: 0px; } /* Entfernt Bold aus WooCommerce Error Messages */ .woocommerce-error strong { font-weight: normal; } .woocommerce a.button.wc-forward { background-color: #2b2b2b !important; color: #ffffff !important; font-family: "ABC Favorit", sans-serif !important; font-weight: normal; border-radius: 0px; } /* Padding für alle Fehlermeldungs-Listeneinträge */ .woocommerce ul.woocommerce-error li { padding-top: 5px; padding-bottom: 5px; } /* Das ursprüngliche (mit "Rechnung: …") ausblenden */ .woocommerce ul.woocommerce-error li > a > strong { display: none; } /* Labels ohne "Rechnung:" wieder einfügen */ .woocommerce ul.woocommerce-error li[data-id="billing_first_name"] > a::before { content: "Vorname "; } .woocommerce ul.woocommerce-error li[data-id="billing_last_name"] > a::before { content: "Nachname "; } .woocommerce ul.woocommerce-error li[data-id="billing_address_1"] > a::before { content: "Straße "; } .woocommerce ul.woocommerce-error li[data-id="billing_postcode"] > a::before { content: "Postleitzahl "; } .woocommerce ul.woocommerce-error li[data-id="billing_city"] > a::before { content: "Ort / Stadt "; } .woocommerce ul.woocommerce-error li[data-id="billing_email"] > a::before { content: "E-Mail-Adresse "; } /* Optional: gleiche Typo wie der restliche Text, nicht fett */ .woocommerce ul.woocommerce-error li > a::before { font-weight: normal; /* oder weglassen, wenn Standard passt */ color: inherit; } #artist-info-box .artist-img-cover { height: 400px !important; /* parent container fixed height */ width: 100% !important; overflow: hidden !important; /* hide overflowing parts of the image */ position: relative; /* ensure proper positioning */ } #artist-info-box .artist-img-cover img { height: 100% !important; /* fill parent height */ width: 100% !important; /* fill parent width */ object-fit: cover !important; /* crop excess */ object-position: center !important; display: block !important; } /* Code für das Artist-Foto on hover */ /* 1) Bühne & Cropping */ .produkt-tile { position: relative; overflow: hidden !important; /* Kanten sauber kappen */ } /* 2) Shortcode-Widget neutralisieren (Overlay soll an .produkt-tile ausrichten) */ .produkt-tile .elementor-widget-shortcode, .produkt-tile .elementor-widget-shortcode .elementor-widget-container { position: static !important; z-index: auto !important; padding: 0 !important; margin: 0 !important; } /* 3) Produktbild oben, mit weicher Transparenz beim Hover */ .produkt-tile .elementor-widget-image img { display: block; width: 100%; height: auto; /* Höhe kommt von Elementor – NICHT überschreiben */ position: relative; z-index: 2; /* über dem Artist-Bild */ transition: opacity .35s ease; } /* 4) Artist-Overlay: liegt permanent dahinter und füllt die Bühne */ .produkt-tile .artist-hover { position: absolute !important; inset: 0; /* füllt exakt die Produktkachel */ z-index: 1; /* hinter dem Produktbild */ pointer-events: none; /* Klicks gehen ans Produkt */ overflow: hidden; /* Cropping falls größer */ } /* 5) Artist-Bild vollflächig einpassen */ .produkt-tile .artist-hover img, .produkt-tile .artist-hover-img { width: 100%; height: 100%; object-fit: cover; /* füllt, beschneidet sauber */ display: block; } /* 6) Hover: nur das Produktbild ausblenden → Artist-Bild „erscheint“ */ .produkt-tile:hover .elementor-widget-image img { opacity: 0; } /* 7) Wichtig: kein Overflow am Bild-Widget selbst */ .produkt-bild { overflow: visible !important; } .artist-bild-home { overflow: hidden !important; position: relative; width: 100% } /* Footer ans Ende schieben, wenn wenig Inhalt */ .elementor-location-footer { margin-top: auto; } /* Basis: volle Höhe + Flex-Spalte nur auf 404-Seiten */ html, body { height: 100%; } body.error404 { min-height: 100vh; /* sicherer Fallback */ display: flex; flex-direction: column; } /* Inhalt soll wachsen und Footer nach unten drücken */ body.error404 .elementor-location-single { flex: 1 0 auto; } /* Footer nur ans Ende schieben – nicht sticky beim Scrollen */ body.error404 .elementor-location-footer { margin-top: auto; } .single_add_to_cart_button.wc-variation-is-unavailable { display: none !important; } .wc-variation-is-unavailable ~ .p-ExpressCheckoutElement { display: none !important; } /* Warenkorb-Button immer im Layout, aber unsichtbar wenn leer */ .elementor-menu-cart__toggle { visibility: hidden; /* unsichtbar */ opacity: 0; /* optional, um keine Mausinteraktion zuzulassen */ pointer-events: none; /* verhindert Klicks wenn unsichtbar */ } /* Sichtbar wenn Items vorhanden */ .elementor-menu-cart__toggle.visible { visibility: visible; opacity: 1; pointer-events: auto; transition: opacity 0.2s ease; /* optional, sanfter Übergang */ } .produkt-bild.elementor-widget-image a { display: inline; } .elementor-nav-menu { justify-content: end !important; display: flex; } /* --------------------------------------------- Mobile (einspaltig): dein bisheriges Verhalten -> nur beim letzten Item explizit eine untere Border setzen (lass das so, wenn du es genauso willst; Element selektor angepasst) ---------------------------------------------- */ @media (max-width: 767px) { .elementor-widget-loop-grid .elementor-loop-container .e-loop-item:last-child .elementor-element-51f13d86 { border-bottom: 2px solid var(--e-global-color-text); /* gleiche Farbe wie deine anderen Borders */ } } /* --------------------------------------------- Desktop/Tablet (>=768px): 3-Spalten-Grid -> untere Border der gesamten letzten Reihe entfernen Fälle: - N % 3 = 1: nur letztes Item - N % 3 = 2: letzte zwei Items - N % 3 = 0: letzte drei Items - N ≤ 2: alle Items ohne untere Border ---------------------------------------------- */ @media (min-width: 768px) { /* N ≤ 2: alle ohne untere Border */ .elementor-loop-container > .e-loop-item:first-child:nth-last-child(-n+2) .elementor-element-51f13d86, .elementor-loop-container > .e-loop-item:first-child:nth-last-child(-n+2) ~ .e-loop-item .elementor-element-51f13d86 { border-bottom: none !important; } /* Rest = 1 (… % 3 = 1): nur das letzte Item (Spalte 1) */ .elementor-loop-container > .e-loop-item:last-child:nth-child(3n+1) .elementor-element-51f13d86 { border-bottom: none !important; } /* Rest = 2 (… % 3 = 2): die letzten zwei Items (Spalten 1 & 2) */ .elementor-loop-container > .e-loop-item:nth-last-child(2):nth-child(3n+1) .elementor-element-51f13d86, .elementor-loop-container > .e-loop-item:last-child:nth-child(3n+2) .elementor-element-51f13d86 { border-bottom: none !important; } /* Rest = 0 (volle letzte Reihe: Spalten 1,2,3) */ .elementor-loop-container > .e-loop-item:nth-last-child(3):nth-child(3n+1) .elementor-element-51f13d86, .elementor-loop-container > .e-loop-item:nth-last-child(2):nth-child(3n+2) .elementor-element-51f13d86, .elementor-loop-container > .e-loop-item:last-child:nth-child(3n) .elementor-element-51f13d86 { border-bottom: none !important; } } /* --------------------------------------------- Rechte Ränder (aus deinem Code übernommen) ---------------------------------------------- */ /* Standard: kein rechter Rand */ .elementor-loop-container > .e-loop-item .elementor-element-51f13d86 { border-right: none; } /* Rechter Rand NUR beim letzten Item, wenn Gesamtzahl % 3 = 1 (Spalte 1) oder % 3 = 2 (Spalte 2) */ .elementor-loop-container > div.e-loop-item:last-of-type:nth-of-type(3n+1) .elementor-element-51f13d86, .elementor-loop-container > div.e-loop-item:last-of-type:nth-of-type(3n+2) .elementor-element-51f13d86 { border-right: 2px solid var(--e-global-color-text) !important; } /* Nur wenn die letzte Reihe 2 Elemente hat (N % 3 = 2), gib dem 3.-letzten Item in Spalte 3 (also 3. der vorletzten Zeile) eine untere Border. */ @media (min-width: 768px) { /* Variante mit :nth-child — funktioniert, wenn .e-loop-item die einzigen Kinder sind */ .elementor-widget-loop-grid .elementor-loop-container > .e-loop-item:nth-last-child(3):not(:nth-child(3n+1)):not(:nth-child(3n+2)) .elementor-element-51f13d86 { border-bottom: 2px solid var(--e-global-color-text) !important; } /* Robustere Variante falls im Container noch andere Kindelemente existieren */ .elementor-widget-loop-grid .elementor-loop-container > div.e-loop-item:nth-last-of-type(3):not(:nth-of-type(3n+1)):not(:nth-of-type(3n+2)) .elementor-element-51f13d86 { border-bottom: 2px solid var(--e-global-color-text) !important; } } /* Nur wenn die letzte Reihe 2 Elemente hat (N % 3 = 2), gib dem 3.-letzten Item in Spalte 3 (also 3. der vorletzten Zeile) eine untere Border. */ @media (min-width: 768px) { /* Variante mit :nth-child — funktioniert, wenn .e-loop-item die einzigen Kinder sind */ .elementor-widget-loop-grid .elementor-loop-container > .e-loop-item:nth-last-child(3):not(:nth-child(3n+1)):not(:nth-child(3n+2)) .elementor-element-51f13d86 { border-bottom: 2px solid var(--e-global-color-text) !important; } /* Robustere Variante falls im Container noch andere Kindelemente existieren */ .elementor-widget-loop-grid .elementor-loop-container > div.e-loop-item:nth-last-of-type(3):not(:nth-of-type(3n+1)):not(:nth-of-type(3n+2)) .elementor-element-51f13d86 { border-bottom: 2px solid var(--e-global-color-text) !important; } } /* Zusatz: Sonderfall N = 3 (eine Zeile mit genau drei Items) -> dem 3. (letzten) Item unten eine Border geben */ @media (min-width: 768px) { /* wenn .e-loop-item direkte Kinder sind */ .elementor-widget-loop-grid .elementor-loop-container > .e-loop-item:first-child:nth-last-child(3) ~ .e-loop-item:last-child .elementor-element-51f13d86 { border-bottom: 2px solid var(--e-global-color-text) !important; } /* robustere Variante bei gemischten Kindknoten */ .elementor-widget-loop-grid .elementor-loop-container > .e-loop-item:first-of-type:nth-last-of-type(3) ~ .e-loop-item:last-of-type .elementor-element-51f13d86 { border-bottom: 2px solid var(--e-global-color-text) !important; } } /* Nur wenn die letzte Reihe 1 Element hat (N % 3 = 1), gib dem vorletzten Item (N-1) unten eine Border. */ @media (min-width: 768px) { /* Variante mit :nth-child — wenn .e-loop-item die einzigen Kinder sind */ .elementor-widget-loop-grid .elementor-loop-container > .e-loop-item:nth-last-child(2):not(:nth-child(3n+1)):not(:nth-child(3n+2)) .elementor-element-51f13d86 { border-bottom: 2px solid var(--e-global-color-text) !important; } /* Robustere Variante, falls im Container andere Kindelemente existieren */ .elementor-widget-loop-grid .elementor-loop-container > div.e-loop-item:nth-last-of-type(2):not(:nth-of-type(3n+1)):not(:nth-of-type(3n+2)) .elementor-element-51f13d86 { border-bottom: 2px solid var(--e-global-color-text) !important; } }/* End custom CSS */ /* Start Custom Fonts CSS */@font-face { font-family: 'ABC Favorit'; font-style: normal; font-weight: 600; font-display: auto; src: url('https://studioo.wmd-branding.com/wp-content/uploads/2025/06/ABCFavorit-Medium-Trial.woff') format('woff'); } @font-face { font-family: 'ABC Favorit'; font-style: normal; font-weight: 800; font-display: auto; src: url('https://studioo.wmd-branding.com/wp-content/uploads/2025/06/ABCFavorit-Black-Trial.woff') format('woff'); } @font-face { font-family: 'ABC Favorit'; font-style: italic; font-weight: 800; font-display: auto; src: url('https://studioo.wmd-branding.com/wp-content/uploads/2025/06/ABCFavorit-UltraItalic-Trial-1.woff') format('woff'); } @font-face { font-family: 'ABC Favorit'; font-style: normal; font-weight: normal; font-display: auto; src: url('https://studioo.wmd-branding.com/wp-content/uploads/2025/06/ABCFavorit-Regular-Trial-1.woff') format('woff'); } /* End Custom Fonts CSS */