.elementor-kit-16{--e-global-color-primary:#6EC1E4;--e-global-color-secondary:#54595F;--e-global-color-text:#7A7A7A;--e-global-color-accent:#61CE70;--e-global-typography-primary-font-family:"Roboto";--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"Roboto Slab";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Roboto";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Roboto";--e-global-typography-accent-font-weight:500;}.elementor-kit-16 e-page-transition{background-color:#FFBC7D;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;}.elementor-widget:not(:last-child){--kit-widget-spacing: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 .site-branding{flex-direction:column;align-items:stretch;}.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-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}:root { --gruen-900:#1B3712; --gruen-800:#284F1C; --gruen-600:#2F7D45; --gold-700:#8A6A3B; --gold-500:#C9A87C; --ink:#1A0A0F; --creme:#F9F3EB; --creme-alt:#F8F5F2; --weiss:#FFFFFF; --text:#3F3B36; --text-muted:#6B6560; --border:#E3DCD2; --font-display:Young Serif; --font-text:Outfit; --s-display:clamp(2.05rem, 3.6vw + 0.6rem, 4.6rem); --s-h2:clamp(1.55rem, 2.2vw + 0.5rem, 2.8rem); --s-h3:clamp(1.25rem, 1vw + 0.7rem, 1.75rem); --s-lead:clamp(1.125rem, 1.1vw + 0.5rem, 1.5rem); --s-body:1.0625rem; --s-eyebrow:0.8125rem; --lese:68ch; --tap:48px; --abstand-sektion:clamp(56px, 6vw, 128px); --abstand-block:clamp(24px, 3.2vw, 48px); --rand:clamp(16px, 4vw, 48px); --container:min(1440px, 100% - 2 * clamp(16px, 4vw, 64px)); --container-breit:min(1920px, 100% - 2 * clamp(16px, 4vw, 64px)); --e-gv-8f9c16b:clamp(56px, 6vw, 128px); --e-gv-eb55ddc:clamp(24px, 2.4vw, 48px); --akzent:#C9A87C; --hero-overlay:rgba(26,22,18,0.56); --hero-overlay-hell:rgba(249,243,235,0.42); --tempo-schnell:150ms; --tempo-mittel:300ms; --tempo-ruhig:700ms; --ease:cubic-bezier(.2,.7,.3,1); --ease-raus:cubic-bezier(.4,0,1,1); --advent-dunkel:#102209; --advent-nacht:#0B1806; --advent-bordeaux:#5E2530; --advent-papier:#F3EADC; --advent-gold-hell:#E8C9A0; } /* Start custom CSS *//* ══ Etappe 2 (23.09.2026): Schriften laufen ueber Kit-Variablen ══════ --font-display = Young Serif (ein Schnitt, immer 400) --font-text = Outfit Werte aendern: Elementor > Website-Einstellungen > Variablen. ═════════════════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════════════════ Blumenstadl — globale Hülle (Hello Elementor) Kopfaufbau nach Entwurf start-v2.html: grüne Servicezeile ganz oben, darunter der weiße Kopf mit Logo, Navigation und Warenkorb. Beides sitzt in EINEM klebenden Stapel — der Entwurf hatte hier ursprünglich den Fehler, dass der Kopf über der Leiste lag. ══════════════════════════════════════════════════════════════════ */ body{color:#3F3B36;background:#fff} /* ══════════════════════════════════════════════════════════════════ WooCommerce-Produktkarten Woo liefert Titel/Preise in Theme-Blau und Versandhinweise in Rot. Hier auf die Blumenstadl-Tokens gezogen — gilt sitewide, also auch im Shop-Archiv und in den Kategorien. ══════════════════════════════════════════════════════════════════ */ ul.products li.product{ text-align:left;background:#fff; border:1px solid rgba(40,79,28,.10); padding:0 0 22px;position:relative; transition:border-color .3s ease,box-shadow .3s ease,transform .3s ease } ul.products li.product:hover{ border-color:rgba(40,79,28,.3); box-shadow:0 18px 40px rgba(26,10,15,.10); transform:translateY(-3px) } /* Bild randlos oben, quadratisch — gegen die unterschiedlichen Seitenverhältnisse */ ul.products li.product a img{ margin:0 0 18px;aspect-ratio:1/1;object-fit:cover;width:100%;display:block } ul.products li.product .woocommerce-loop-product__title{ padding:0 20px;margin:0 0 6px; font:400 1.16rem/1.25 var(--font-display),Georgia,serif!important; color:#284F1C!important;letter-spacing:-.01em } ul.products li.product a{text-decoration:none} /* Preis: Grün, tabellarische Ziffern, Varianten-Spanne ruhig */ ul.products li.product .price{ padding:0 20px;margin:0 0 2px;display:block; font:600 1rem/1.4 var(--font-text),sans-serif!important; color:#3F3B36!important;font-variant-numeric:tabular-nums } ul.products li.product .price del{color:#8B857D!important;opacity:.7;font-weight:400} ul.products li.product .price ins{text-decoration:none;color:#284F1C!important} /* „inkl. MwSt." und Versandhinweis: leise, aber lesbar. ⛔ Kontrast ist hier kein Geschmack, sondern Pflicht: der Versandkosten-Hinweis ist nach PAngV vorgeschrieben und muss wahrnehmbar sein. #8B857D stand auf 3,65:1 (gemessen 19.10.) und lag damit unter den 4,5:1 für Text dieser Größe. #6B6560 (= --text-muted) schafft 5,74:1 auf Weiß und 5,21:1 auf Creme. */ ul.products li.product .price small, ul.products li.product .woocommerce-price-suffix, ul.products li.product .wc-gzd-additional-info{ display:block;padding:0;margin-top:3px; font:400 .72rem/1.45 var(--font-text),sans-serif!important; color:#6B6560!important } ul.products li.product .wc-gzd-additional-info{padding:0 20px} ul.products li.product .wc-gzd-additional-info a, ul.products li.product .woocommerce-price-suffix a{ color:#6B6560!important;text-decoration:underline;text-underline-offset:2px } ul.products li.product .wc-gzd-additional-info a:hover{color:#284F1C!important} /* Knopf: eine klare Aktion pro Karte */ ul.products li.product .button, ul.products li.product .added_to_cart{ /* Woos woocommerce.css setzt display:block und eine line-height ohne Bezug zur Knopfhoehe. Gemessen: Text bei 0-13px in einem 46px-Knopf, 33px Luft darunter. Deshalb !important + passende Zeilenhoehe. */ margin:16px 20px 0;display:inline-flex!important;align-items:center!important; justify-content:center!important;line-height:1.2!important; min-height:46px;padding:0 20px;border-radius:0;border:1px solid #284F1C; background:transparent!important;color:#284F1C!important; font:600 .72rem/1 var(--font-text),sans-serif!important; letter-spacing:.11em;text-transform:uppercase;text-decoration:none; transition:background-color .25s ease,color .25s ease } ul.products li.product .button:hover, ul.products li.product .added_to_cart:hover{ background:#284F1C!important;color:#fff!important } ul.products li.product .onsale{ background:#8A6A3B;color:#fff;border-radius:0; font:600 .68rem/1 var(--font-text),sans-serif;letter-spacing:.09em; text-transform:uppercase;padding:7px 12px;min-height:0;min-width:0; top:0;right:0;left:auto;margin:0 } /* Sterne ausblenden — es gibt keine Bewertungen */ ul.products li.product .star-rating{display:none} @media(max-width:767px){ ul.products li.product .woocommerce-loop-product__title{font-size:1.05rem;padding:0 14px} ul.products li.product .price, ul.products li.product .wc-gzd-additional-info{padding:0 14px} ul.products li.product .button, ul.products li.product .added_to_cart{margin:14px 14px 0;width:calc(100% - 28px)} } /* ── Shop-Archiv: Kopf im Seitenstil ───────────────────────────────── Woo liefert hier Systemschrift und eine nackte Sortierliste. */ .woocommerce-products-header{ max-width:1280px;margin:0 auto;padding:clamp(40px,6vw,76px) clamp(20px,4vw,48px) 0 } .woocommerce-products-header .woocommerce-products-header__title{ font:400 clamp(2.2rem,4.4vw,3.4rem)/1.05 var(--font-display),Georgia,serif!important; color:#284F1C!important;letter-spacing:-.02em;margin:0 } .woocommerce-breadcrumb{ max-width:1280px;margin:0 auto;padding:22px clamp(20px,4vw,48px) 0; font:500 .7rem/1 var(--font-text),sans-serif!important; letter-spacing:.13em;text-transform:uppercase;color:#6B6560!important } .woocommerce-breadcrumb a{color:#8A6A3B!important;text-decoration:none} .woocommerce-breadcrumb a:hover{text-decoration:underline} .woocommerce .woocommerce-result-count{ font:400 .84rem/1 var(--font-text),sans-serif!important;color:#6F6A63!important;margin:0 } .woocommerce .woocommerce-ordering select{ min-height:46px;padding:0 40px 0 14px;border:1px solid rgba(40,79,28,.22); border-radius:0;background:#fff;color:#284F1C; font:500 .82rem/1 var(--font-text),sans-serif;appearance:none; background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%23284F1C' d='M6 8 0 0h12z'/%3E%3C/svg%3E"); background-repeat:no-repeat;background-position:right 14px center;background-size:10px } /* Ergebniszeile und Sortierung auf eine Linie */ .woocommerce .products{clear:both} .woocommerce main>.woocommerce-notices-wrapper+.woocommerce-result-count, .woocommerce .woocommerce-result-count{padding-top:6px} /* Blätterung */ .woocommerce nav.woocommerce-pagination ul{border:0;gap:6px;display:flex;justify-content:center} .woocommerce nav.woocommerce-pagination ul li{border:0} .woocommerce nav.woocommerce-pagination ul li a, .woocommerce nav.woocommerce-pagination ul li span{ min-width:46px;min-height:46px;display:flex;align-items:center;justify-content:center; border:1px solid rgba(40,79,28,.2);color:#284F1C!important; font:600 .82rem/1 var(--font-text),sans-serif;padding:0 } .woocommerce nav.woocommerce-pagination ul li span.current{background:#284F1C;color:#fff!important;border-color:#284F1C} .woocommerce nav.woocommerce-pagination ul li a:hover{background:#F9F3EB} /* Woo-Raster: Abstände statt Woos Prozent-Margins */ .woocommerce ul.products{ display:grid!important;gap:clamp(18px,2.4vw,30px); max-width:1280px;margin:34px auto 0!important; padding-inline:clamp(20px,4vw,48px);float:none!important } .woocommerce ul.products.columns-4{grid-template-columns:repeat(4,1fr)} .woocommerce ul.products.columns-3{grid-template-columns:repeat(3,1fr)} .woocommerce ul.products li.product{width:auto!important;margin:0!important;float:none!important;clear:none!important} .woocommerce nav.woocommerce-pagination{margin:44px auto 64px} @media(max-width:1024px){.woocommerce ul.products.columns-4{grid-template-columns:repeat(3,1fr)}} @media(max-width:767px){ .woocommerce ul.products.columns-4, .woocommerce ul.products.columns-3{grid-template-columns:repeat(2,1fr)} } /* ── Woo-Raster endgültig ───────────────────────────────────────────── Woo setzt bei jeder vierten Karte `clear:both` (.first/.last) und eigene Prozentbreiten. Im Grid erzeugt das Löcher und Reihen mit wechselnder Spaltenzahl. Beides muss explizit zurückgesetzt werden. */ .woocommerce ul.products li.product.first, .woocommerce ul.products li.product.last, .woocommerce ul.products li.product:nth-child(n){ clear:none!important;float:none!important; width:auto!important;margin:0!important } .woocommerce ul.products::before, .woocommerce ul.products::after{content:none!important;display:none!important} /* Karteninhalt oben ausrichten, damit unterschiedlich lange Titel die Knopfreihe nicht verschieben */ .woocommerce ul.products li.product{ display:flex;flex-direction:column;height:100% } .woocommerce ul.products li.product .button, .woocommerce ul.products li.product .added_to_cart{margin-top:auto} /* ══ SHOP: Anlass-Regal + Filter ══════════════════════════════════ Sitzt im Seiteninhalt der Shop-Seite, oberhalb des Woo-Rasters. Filterung laeuft ueber echte Woo-URLs (product_cat, min_price, max_price) — serverseitig, kein eigenes Filter-JavaScript. ════════════════════════════════════════════════════════════════ */ .bs-shopkopf{max-width:1280px;margin:0 auto;padding:0 clamp(20px,4vw,48px)} .bs-lead{max-width:56ch;color:#6B6560;font-size:1.02rem;line-height:1.7;margin:6px 0 0} .bs-regal{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin-top:30px} .bs-kachel{position:relative;aspect-ratio:3/4;overflow:hidden;display:block; text-decoration:none;background:#1A0A0F} .bs-kachel img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover; transition:transform .8s cubic-bezier(.2,.7,.3,1)} .bs-kachel:hover img,.bs-kachel:focus-visible img{transform:scale(1.07)} .bs-kachel::after{content:"";position:absolute;inset:0; background:linear-gradient(to top,rgba(11,10,8,.85) 0%,rgba(11,10,8,.2) 54%,transparent 100%)} .bs-k-txt{position:absolute;left:0;right:0;bottom:0;padding:18px 16px;z-index:2} /* Zweizeilige Titel („Liebe & Valentinstag") schoben das Eyebrow in den hellen Bildbereich. Der Verlauf muss so hoch reichen wie der Text. */ .bs-kachel::after{background:linear-gradient(to top, rgba(11,10,8,.90) 0%, rgba(11,10,8,.72) 34%, rgba(11,10,8,.24) 62%, transparent 100%)} .bs-k-ey{display:block;font:600 .6rem/1 var(--font-text),sans-serif;letter-spacing:.15em; text-transform:uppercase;color:#C9A87C;margin-bottom:6px} .bs-k-txt strong{display:block;font-family:var(--font-display),Georgia,serif;font-size:1.26rem; font-weight:400;color:#fff;letter-spacing:-.01em;line-height:1.14} .bs-k-txt em{display:block;font-style:normal;font-size:.72rem;color:rgba(255,255,255,.72);margin-top:3px} .bs-filter{margin-top:40px;padding:22px 0 4px;border-top:1px solid #E3DCD2} .bs-fzeile{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:14px} .bs-flabel{font:600 .67rem/1 var(--font-text),sans-serif;letter-spacing:.14em;text-transform:uppercase; color:#6B6560;min-width:52px} .bs-pillen{display:flex;gap:6px;flex-wrap:wrap;align-items:center} .bs-pille{min-height:42px;padding:0 15px;border:1px solid #E3DCD2;background:#fff;color:#3F3B36; font:500 .79rem/1 var(--font-text),sans-serif;text-decoration:none;display:inline-flex;align-items:center; gap:7px;transition:background-color .2s,border-color .2s,color .2s} .bs-pille:hover{border-color:#284F1C;color:#284F1C!important} .bs-pille .bs-n{font-size:.7rem;opacity:.6;font-variant-numeric:tabular-nums} /* Aktiver Zustand per JS gesetzt — Woo gibt den Filter nur in der URL preis */ .bs-pille[aria-current=page]{background:#284F1C;color:#fff!important;border-color:#284F1C} .bs-pille[aria-current=page] .bs-n{opacity:.8} /* Preisschieber: zwei Griffe auf einer Spur */ .bs-schieber{position:relative;width:180px;height:34px;flex:none;margin-left:6px} .bs-spur{position:absolute;left:0;right:0;top:16px;height:2px;background:#CFC4B5} .bs-aktiv{position:absolute;top:16px;height:2px;background:#284F1C;left:0;right:0} .bs-schieber input[type=range]{position:absolute;left:0;top:0;width:100%;height:34px;margin:0; -webkit-appearance:none;appearance:none;background:transparent;pointer-events:none} .bs-schieber input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px; border-radius:50%;background:#fff;border:2px solid #284F1C;box-shadow:0 2px 7px rgba(26,10,15,.22); cursor:grab;pointer-events:auto} .bs-schieber input[type=range]::-moz-range-thumb{width:22px;height:22px;border-radius:50%; background:#fff;border:2px solid #284F1C;box-shadow:0 2px 7px rgba(26,10,15,.22); cursor:grab;pointer-events:auto} .bs-wert{font:600 .83rem/1 var(--font-text),sans-serif;color:#284F1C;font-variant-numeric:tabular-nums; white-space:nowrap} .bs-uebernehmen{min-height:42px;padding:0 16px;background:#284F1C;color:#fff!important; font:600 .7rem/1 var(--font-text),sans-serif;letter-spacing:.1em;text-transform:uppercase; text-decoration:none;display:inline-flex;align-items:center} .bs-uebernehmen:hover{background:#1B3712} .bs-mob-knopf{display:none} /* ── Mobil: Filter in einen Bogen, Seite bleibt frei ────────────── */ @media(max-width:860px){ .bs-regal{grid-template-columns:repeat(2,1fr);gap:8px;margin-top:22px} .bs-kachel:first-child{grid-column:1/-1;aspect-ratio:16/10} .bs-lead{font-size:.95rem} .bs-mob-knopf{display:flex;align-items:center;justify-content:center;gap:8px; width:100%;min-height:50px;margin-top:20px;border:1px solid #284F1C;background:#fff; color:#284F1C;font:600 .76rem/1 var(--font-text),sans-serif;letter-spacing:.08em; text-transform:uppercase;cursor:pointer} .bs-mob-knopf[aria-expanded=true]{background:#284F1C;color:#fff} /* Der Filterblock klappt unter dem Knopf auf — kein fixierter Bogen, damit nichts die Seite verdeckt, wenn JavaScript ausfaellt. */ .bs-filter{margin-top:0;border-top:0;padding:8px 0 4px} /* 24.09.: display:none-Leiche entfernt —
steuert */ .bs-fzeile{flex-direction:column;align-items:stretch;gap:10px;margin-bottom:22px} .bs-pillen{gap:6px} .bs-pille{min-height:50px;justify-content:space-between;width:100%;padding:0 16px;font-size:.92rem} .bs-schieber{width:100%;margin-left:0} .bs-wert{text-align:center;display:block} .bs-uebernehmen{width:100%;justify-content:center;min-height:50px} } @media(min-width:861px) and (max-width:1120px){ .bs-regal{grid-template-columns:repeat(3,1fr)} } @media(prefers-reduced-motion:reduce){ .bs-kachel img{transition:none} } /* ── Klappbereich + Preisspanne ─────────────────────────────────── WordPress entfernt `class` an und streut
ein, wenn Formulare im Seiteninhalt stehen. Deshalb wird hier ueber den Kontext selektiert (.bs-filter form) statt ueber eine Klasse, und die Umbrueche werden ausgeblendet. */ .bs-details{margin-top:38px;border-top:1px solid #E3DCD2} .bs-summary{ list-style:none;cursor:pointer;padding:18px 0 0; font:600 .72rem/1 var(--font-text),sans-serif;letter-spacing:.13em; text-transform:uppercase;color:#284F1C; display:flex;align-items:center;gap:9px;min-height:44px } .bs-summary::-webkit-details-marker{display:none} .bs-summary::after{ content:"";width:8px;height:8px;border-right:1.5px solid #8A6A3B; border-bottom:1.5px solid #8A6A3B;transform:rotate(45deg); transition:transform .25s ease;margin-top:-4px } .bs-details[open] .bs-summary::after{transform:rotate(-135deg);margin-top:2px} /* Leere Absaetze, die der Editor zwischen die Bloecke setzt */ .bs-filter p:empty,.bs-shopkopf p:empty{display:none;margin:0} .bs-filter br{display:none} .bs-filter form{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0} .bs-filter form label{ display:inline-flex;align-items:center;gap:7px; font:500 .8rem/1 var(--font-text),sans-serif;color:#6B6560 } .bs-filter form .bs-eur{color:#284F1C;font-weight:600} .bs-filter form input[type=number]{ width:82px;min-height:42px;padding:0 10px;border:1px solid #E3DCD2;border-radius:0; font:600 .85rem/1 var(--font-text),sans-serif;color:#3F3B36; font-variant-numeric:tabular-nums;background:#fff } .bs-filter form input[type=number]:focus-visible{outline:2px solid #8A6A3B;outline-offset:1px} .bs-filter form button[type=submit]{ min-height:42px;padding:0 18px;border:1px solid #284F1C;background:#284F1C;color:#fff; font:600 .7rem/1 var(--font-text),sans-serif;letter-spacing:.1em;text-transform:uppercase;cursor:pointer } .bs-filter form button[type=submit]:hover{background:#1B3712} @media(max-width:860px){ /* Auf dem Handy zugeklappt starten: die Ware kommt zuerst. */ .bs-details{border:1px solid #E3DCD2;margin-top:22px;padding:0 14px 4px} .bs-summary{padding:14px 0;justify-content:space-between} .bs-filter form{flex-direction:column;align-items:stretch} .bs-filter form label{justify-content:space-between} .bs-filter form input[type=number]{width:100%} .bs-filter form button[type=submit]{width:100%;min-height:50px} } /* ══ Elementor-Kopfzeile (Vorlage 197) ══════════════════════════════ Seit dem Veroeffentlichen liefert Elementor Kopf und Fuss aus, nicht mehr Hello Elementor. Die alten .site-header-Regeln greifen deshalb nicht mehr — hier die Entsprechung fuer die Elementor-Struktur. ═════════════════════════════════════════════════════════════════════ */ .elementor-location-header{position:sticky;top:0;z-index:999} .elementor-location-header .elementor-widget-nav-menu .elementor-item{ min-height:48px;display:flex;align-items:center; font:600 .72rem/1 var(--font-text),sans-serif!important;letter-spacing:.11em; text-transform:uppercase;color:#284F1C!important } .elementor-location-header .elementor-item:hover, .elementor-location-header .elementor-item.elementor-item-active{color:#8A6A3B!important} /* Elementors eigener Unterstrich sitzt korrekt — der eigene entfaellt */ .elementor-location-header .elementor-nav-menu--main .elementor-item:after{ bottom:8px!important } .elementor-location-header .elementor-nav-menu--dropdown a{ min-height:48px;display:flex;align-items:center; color:#3F3B36!important;font-size:.85rem;text-transform:none;letter-spacing:0 } .elementor-location-header .elementor-nav-menu--dropdown a:hover{ background:#F9F3EB!important;color:#284F1C!important } /* Warenkorb */ .elementor-location-header .elementor-menu-cart__toggle .elementor-button{ min-height:46px;border-radius:0;border:1px solid rgba(40,79,28,.22); background:#fff!important;color:#284F1C!important; font:600 .78rem/1 var(--font-text),sans-serif!important } .elementor-location-header .elementor-menu-cart__toggle .elementor-button:hover{ background:#F9F3EB!important } /* Fußzeile */ .elementor-location-footer a{text-decoration:none} .elementor-location-footer .elementor-nav-menu a{min-height:44px;display:flex;align-items:center} /* ══ Filter arbeitet — sichtbare Rueckmeldung ═══════════════════════ Der Server braucht rund 2 s. Damit sich der Klick trotzdem sofort anfuehlt, springt die Auswahl unmittelbar um (macht das Skript) und das Raster grau t sanft aus. Bewusst mit 120 ms Verzoegerung: bei einem Treffer aus dem Zwischenspeicher (sofort da) blitzt dann gar nichts auf. ══════════════════════════════════════════════════════ */ .bs-arbeitet ul.products{ transition:opacity .18s ease .12s, filter .18s ease .12s; opacity:.45;filter:saturate(.55);pointer-events:none } .bs-arbeitet{position:relative} /* Schmaler Fortschrittsbalken ueber dem Raster */ .bs-arbeitet:before{ content:"";position:absolute;left:0;right:0;top:0;height:2px;z-index:5; background:linear-gradient(90deg,transparent,#284F1C,transparent); background-size:40% 100%;background-repeat:no-repeat; animation:bs-lauf 1s linear infinite } @keyframes bs-lauf{ 0%{background-position:-40% 0} 100%{background-position:140% 0} } /* Pillen: aktive Auswahl springt sofort, unabhaengig vom Laden */ .bs-pille{transition:background-color .14s ease,color .14s ease,border-color .14s ease} @media (prefers-reduced-motion:reduce){ .bs-arbeitet ul.products{transition:none} .bs-arbeitet:before{animation:none;background:#284F1C;background-size:100% 100%} } /* ══ Luft zur Fußzeile ══════════════════════════════════════════════ Gemessen: 0 px zwischen letzter Produktkarte und dem dunklen Fußblock — die Ware klebte daran. Hello Elementor setzt auf main.site-main keinen unteren Abstand. ═════════════════════════════════════════════════════════════════ */ /* Luft unter dem Produktraster — NUR auf Woo-Seiten. Auf Seiten, die mit einem farbigen Block enden (Sparten-Seiten), erzeugte dieses Padding einen weissen Streifen unter dem Gruen. Gemessen auf /ueber-uns/: 96 px weiss zwischen Abschluss und Fuss. */ .woocommerce main.site-main, .woocommerce-page main.site-main{padding-bottom:96px} @media (max-width:767px){ .woocommerce main.site-main, .woocommerce-page main.site-main{padding-bottom:64px} } /* Sparten-Seiten schliessen buendig mit ihrem letzten Abschnitt ab */ body:not(.woocommerce):not(.woocommerce-page) main.site-main{ padding-bottom:0!important} body:not(.woocommerce):not(.woocommerce-page) main.site-main > .page-content, body:not(.woocommerce):not(.woocommerce-page) main.site-main article{ margin-bottom:0!important;padding-bottom:0!important} /* Bei wenigen Treffern wirkt die Seite sonst oben angeklebt: Mindesthoehe, damit der Fuss nicht in den Bildschirm rutscht. */ .woocommerce main.site-main{min-height:60vh} /* Abstand zwischen Raster und Blaetterung/Ende */ .woocommerce ul.products{margin-bottom:8px} .woocommerce nav.woocommerce-pagination{margin:28px 0 8px} /* ══ HOCHZEIT ══════════════════════════════════════════════════════ */ /* Hero-Bild liegt NUR im :before (siehe unten). Der Container selbst darf kein Hintergrundbild zeigen — zwei Ebenen mit Zoom ergaben ein Geisterbild (gemessen 23.09., "Kaleidoskop"). */ .elementor-22 .elementor-element-e1ea79a{position:relative;overflow:hidden;background-image:none!important} .elementor-22 .hz-kicker{letter-spacing:.34em;text-transform:uppercase; font:600 .7rem/1 var(--font-text),sans-serif;color:#F3E7D4;margin:0 0 20px} .elementor-22 .hz-h1 .elementor-heading-title{ font-family:var(--font-display),Georgia,serif;font-weight:300; font-size:clamp(2.6rem,6.4vw,5.1rem);line-height:1.04;color:#fff; text-shadow:0 2px 28px rgba(0,0,0,.4);margin:0} .elementor-22 .hz-lead{max-width:34ch;margin:22px auto 30px; font:400 1.06rem/1.62 var(--font-text),sans-serif;color:#F3E7D4} .elementor-22 .hz-cta-hell .elementor-button{ background:#fff!important;color:#284F1C!important;border:0;border-radius:0; min-height:52px;padding:0 34px;letter-spacing:.13em;text-transform:uppercase; font:600 .76rem/1 var(--font-text),sans-serif!important; display:inline-flex!important;align-items:center!important; transition:transform .2s ease, box-shadow .2s ease} .elementor-22 .hz-cta-hell .elementor-button:hover{ transform:translateY(-2px);box-shadow:0 12px 30px rgba(0,0,0,.26)} .elementor-22 .hz-h2 .elementor-heading-title{ font-family:var(--font-display),Georgia,serif;font-weight:300; font-size:clamp(2rem,3.9vw,3.2rem);line-height:1.12;color:#284F1C;margin:0 0 18px} .elementor-22 .hz-fliess{max-width:62ch;margin:0 auto; font:400 1.02rem/1.78 var(--font-text),sans-serif;color:#3F3B36} .elementor-22 .hz-fliess p{margin:0 0 14px} /* Hochformat-Bilder in gleicher Hoehe, ruhiger Zoom beim Ueberfahren */ .elementor-22 .hz-hoch img{ width:100%;height:clamp(340px,42vw,560px);object-fit:cover;display:block; transition:transform .8s cubic-bezier(.2,.7,.3,1)} .elementor-22 .hz-hoch{overflow:hidden} .elementor-22 .hz-bildtext{max-width:58ch;margin:26px auto 0; font:400 .93rem/1.7 var(--font-text),sans-serif;color:#6C665E} .elementor-22 .elementor-element-f3600b4{position:relative;overflow:hidden} .elementor-22 .hz-schnitt-h .elementor-heading-title{ font-family:var(--font-display),Georgia,serif;font-weight:300; font-size:clamp(1.9rem,3.7vw,3rem);line-height:1.16;color:#fff;margin:0 0 16px} .elementor-22 .hz-schnitt-t{max-width:46ch;margin:0 auto; font:400 1rem/1.7 var(--font-text),sans-serif;color:#EFE4D2} .elementor-22 .hz-kbild img{width:100%;height:clamp(260px,26vw,380px); object-fit:cover;display:block;transition:transform .8s cubic-bezier(.2,.7,.3,1)} .elementor-22 .elementor-element-6a8cde0,.elementor-22 .elementor-element-b6d8243 .e-con-inner > *, .elementor-22 .elementor-element-6a8cde0,.elementor-22 .elementor-element-b6d8243 > .e-con-inner{overflow:hidden} .elementor-22 .hz-k-titel .elementor-heading-title{ font-family:var(--font-display),Georgia,serif;font-weight:400;font-size:1.7rem; color:#284F1C;margin:20px 0 8px} .elementor-22 .hz-k-text{font:400 .97rem/1.72 var(--font-text),sans-serif;color:#3F3B36; max-width:44ch} .elementor-22 .elementor-element-6a8cde0,.elementor-22 .elementor-element-b6d8243{margin-bottom:34px} .elementor-22 .hz-nr .elementor-heading-title{ font-family:var(--font-display),Georgia,serif;font-weight:300;font-size:3.1rem; color:#8A6A3B;line-height:1;margin:0 0 6px;text-align:left} .elementor-22 .hz-s-titel .elementor-heading-title{ font-family:var(--font-display),Georgia,serif;font-weight:400;font-size:1.5rem; color:#284F1C;margin:0 0 8px} .elementor-22 .hz-s-text{font:400 .96rem/1.7 var(--font-text),sans-serif;color:#3F3B36} .elementor-22 .elementor-element-824f5bf{text-align:center} .elementor-22 .hz-ab-h .elementor-heading-title{ font-family:var(--font-display),Georgia,serif;font-weight:300; font-size:clamp(1.9rem,3.6vw,2.9rem);color:#fff;margin:0 0 14px} .elementor-22 .hz-ab-t{max-width:46ch;margin:0 auto 24px; font:400 1rem/1.7 var(--font-text),sans-serif;color:#DCE8D6} .elementor-22 .hz-ab-kontakt p{margin:0 0 6px} .elementor-22 .hz-ab-kontakt a{color:#fff;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.45)} .elementor-22 .hz-ab-kontakt a:hover{border-bottom-color:#fff} .elementor-22 .hz-tel a{font:300 2rem/1.2 "Cormorant",Georgia,serif} .elementor-22 .hz-mail a{font:400 .98rem/1.6 var(--font-text),sans-serif;font:400 .86rem/1.6 var(--font-text),sans-serif; color:#B9CDB2} /* Sicherheitsnetz: nie etwas per Animation verstecken */ .elementor-22 .elementor-invisible{visibility:visible!important;opacity:1!important} @media (max-width:1024px){ .elementor-22 .elementor-element-e5628dd,.elementor-22 .elementor-element-07b8ace, .elementor-22 .elementor-element-6a8cde0,.elementor-22 .elementor-element-b6d8243, .elementor-22 .elementor-element-77097a5{flex-wrap:wrap} .elementor-22 .elementor-element-e5628dd,.elementor-22 .elementor-element-07b8ace > .e-con, .elementor-22 .elementor-element-77097a5 > .e-con{min-width:46%} .elementor-22 .elementor-element-6a8cde0,.elementor-22 .elementor-element-b6d8243 > .e-con{min-width:100%} } @media (max-width:767px){ .elementor-22 .elementor-element-e1ea79a{min-height:74vh!important} .elementor-22 .elementor-element-e1ea79a:before{animation-duration:34s} .elementor-22 .elementor-element-e5628dd,.elementor-22 .elementor-element-07b8ace > .e-con, .elementor-22 .elementor-element-77097a5 > .e-con, .elementor-22 .elementor-element-6a8cde0,.elementor-22 .elementor-element-b6d8243 > .e-con{min-width:100%} .elementor-22 .hz-hoch img{height:clamp(300px,74vw,440px)} .elementor-22 .hz-k-text, .elementor-22 .hz-lead, .elementor-22 .hz-fliess{max-width:none} } @media (prefers-reduced-motion:reduce){ .elementor-22 .elementor-element-e1ea79a:before{animation:none} .elementor-22 .hz-hoch img, .elementor-22 .hz-kbild img{transition:none} } /* Ken Burns am Hero — ueber die Element-ID, weil Elementor bei Containern die eigene CSS-Klasse nicht ins Markup schreibt. */ .elementor-22 .elementor-element-e1ea79a{position:relative;overflow:hidden} .elementor-22 .elementor-element-e1ea79a:before{ content:"";position:absolute;inset:0;z-index:0; background-image:url("https://blumenstadl.at/wp-content/uploads/2026/09/hz-hero-braut.jpg"); background-size:cover;background-position:100% 30%} .elementor-22 .elementor-element-e1ea79a > *{position:relative;z-index:2} /* dunkler Schnitt ebenso */ .elementor-22 .elementor-element-f3600b4{position:relative;overflow:hidden} @media (max-width:767px){ .elementor-22 .elementor-element-e1ea79a{min-height:74vh!important} } /* Kartenbilder fuellen die Kartenbreite; Hochformat wird beschnitten, nicht gestaucht. Gemessen war es schmal, weil nur die Hoehe galt. */ .elementor-22 .hz-kbild{width:100%} .elementor-22 .hz-kbild img{width:100%!important;height:clamp(300px,24vw,380px)!important; object-fit:cover;object-position:center 34%;display:block} .elementor-22 .hz-kbild .elementor-widget-container{width:100%} /* Die drei Strauss- und Paarbilder ebenso auf volle Spaltenbreite */ .elementor-22 .hz-hoch{width:100%} .elementor-22 .hz-hoch img{width:100%!important} /* Fliesstext linksbuendig statt mittig — liest sich ruhiger */ .elementor-22 .hz-fliess{text-align:left} .elementor-22 .hz-fliess p{font-size:1.06rem} /* ══ SPARTEN-SEITEN /* ══ SPARTEN-SEITEN (Trauer, Hotels, Abo, Über uns, Kontakt) ═══════════ Ein Satz Regeln fuer alle fuenf. Container werden ueber ihre Element-ID angesprochen (Elementor gibt deren Klasse nicht aus), Widget-Klassen greifen direkt. ═════════════════════════════════════════════════════════════════════ */ .bs-kicker, .bs-kicker p{letter-spacing:.34em;text-transform:uppercase; font:600 .7rem/1 var(--font-text),sans-serif!important;color:#F3E7D4!important; margin:0 0 20px;text-shadow:0 1px 12px rgba(0,0,0,.5)} .bs-h1 .elementor-heading-title{font-family:var(--font-display),Georgia,serif;font-weight:300; font-size:clamp(2.3rem,5.4vw,4.3rem);line-height:1.06;color:#fff; text-shadow:0 2px 30px rgba(0,0,0,.45);margin:0} .bs-lead, .bs-lead p{max-width:36ch;margin:20px auto 26px; font:400 1.04rem/1.62 var(--font-text),sans-serif!important;color:#F6ECDC!important; text-shadow:0 1px 14px rgba(0,0,0,.5)} .bs-h2 .elementor-heading-title{font-family:var(--font-display),Georgia,serif;font-weight:300; font-size:clamp(1.9rem,3.7vw,3rem);line-height:1.12;color:#284F1C;margin:0 0 18px} .bs-fliess{max-width:64ch;margin:0 auto} .bs-fliess p{margin:0 0 14px;font:400 1.04rem/1.78 var(--font-text),sans-serif;color:#3F3B36} .bs-kbild{width:100%} .bs-kbild img{width:100%!important;height:clamp(280px,23vw,360px)!important; object-fit:cover;object-position:center 40%;display:block; transition:transform .8s cubic-bezier(.2,.7,.3,1)} .bs-kbild .elementor-widget-container{width:100%;overflow:hidden} .bs-k-titel .elementor-heading-title{font-family:var(--font-display),Georgia,serif; font-weight:400;font-size:1.65rem;color:#284F1C;margin:18px 0 8px} .bs-k-text p{font:400 .97rem/1.72 var(--font-text),sans-serif;color:#3F3B36;margin:0;max-width:46ch} .bs-nr .elementor-heading-title{font-family:var(--font-display),Georgia,serif;font-weight:300; font-size:3rem;color:#8A6A3B;line-height:1;margin:0 0 6px;text-align:left} .bs-s-titel .elementor-heading-title{font-family:var(--font-display),Georgia,serif; font-weight:400;font-size:1.45rem;color:#284F1C;margin:0 0 8px} .bs-s-text p{font:400 .96rem/1.7 var(--font-text),sans-serif;color:#3F3B36;margin:0} .bs-telzeile{margin-top:26px} .bs-tel a{font:300 2.1rem/1.2 "Cormorant",Georgia,serif;color:#284F1C; text-decoration:none;border-bottom:1px solid rgba(40,79,28,.3)} .bs-tel a:hover{border-bottom-color:#284F1C} .bs-ab-h .elementor-heading-title{font-family:var(--font-display),Georgia,serif;font-weight:300; font-size:clamp(1.8rem,3.5vw,2.8rem);color:#fff;margin:0 0 14px;text-align:center} .bs-ab-t p{max-width:48ch;margin:0 auto 24px;font:400 1rem/1.7 var(--font-text),sans-serif; color:#DCE8D6;text-align:center} .bs-ab-kontakt{text-align:center} .bs-ab-kontakt p{margin:0 0 6px} .bs-ab-kontakt a{color:#fff;text-decoration:none; border-bottom:1px solid rgba(255,255,255,.45)} .bs-ab-kontakt a:hover{border-bottom-color:#fff} .bs-ab-kontakt .bs-tel a{color:#fff;border-bottom-color:rgba(255,255,255,.45)} .bs-mail a{font:400 .98rem/1.6 var(--font-text),sans-serif;font:400 .86rem/1.68 var(--font-text),sans-serif; color:#B9CDB2;text-align:center} .bs-cta-hell .elementor-button{background:#fff!important;color:#284F1C!important; border:0;border-radius:0;min-height:52px;padding:0 34px;letter-spacing:.13em; text-transform:uppercase;font:600 .76rem/1 var(--font-text),sans-serif!important; display:inline-flex!important;align-items:center!important; transition:transform .2s ease,box-shadow .2s ease} .bs-cta-hell .elementor-button:hover{transform:translateY(-2px); box-shadow:0 12px 30px rgba(0,0,0,.26)} .bs-cta-gruen .elementor-button{background:#284F1C!important;color:#fff!important; border:0;border-radius:0;min-height:52px;padding:0 34px;letter-spacing:.13em; text-transform:uppercase;font:600 .76rem/1 var(--font-text),sans-serif!important; display:inline-flex!important;align-items:center!important; transition:transform .2s ease,box-shadow .2s ease} .bs-cta-gruen .elementor-button:hover{transform:translateY(-2px); box-shadow:0 10px 26px rgba(40,79,28,.3)} .bs-zwei{margin-bottom:34px} .elementor-invisible{visibility:visible!important;opacity:1!important} @media (max-width:1024px){ .bs-drei, .bs-zwei{flex-wrap:wrap} .bs-drei > .e-con{min-width:46%} .bs-zwei > .e-con{min-width:100%} } @media (max-width:767px){ .bs-drei > .e-con, .bs-zwei > .e-con{min-width:100%} .bs-kbild img{height:clamp(240px,58vw,340px)!important} .bs-lead, .bs-lead p, .bs-fliess, .bs-k-text p{max-width:none} } @media (prefers-reduced-motion:reduce){ .bs-kbild img{transition:none} } /* ══ SPARTEN: Preise /* ══ SPARTEN: Preise, Tabelle, Hinweise ═══════════════════════════════ */ .bs-preis{font:600 1.05rem/1.4 var(--font-text),sans-serif!important;color:#8A6A3B!important; margin:0 0 8px!important;letter-spacing:.01em} .bs-hinweis p{max-width:64ch;margin:26px auto 0;text-align:center; font:400 .9rem/1.7 var(--font-text),sans-serif;color:#6C665E} .bs-mailgross a{font:400 1.12rem/1.5 var(--font-text),sans-serif;color:#284F1C; text-decoration:none;border-bottom:1px solid rgba(40,79,28,.3);word-break:break-word} .bs-mailgross a:hover{border-bottom-color:#284F1C} .bs-s-text a{color:#8A6A3B;text-decoration:none;border-bottom:1px solid rgba(138,106,59,.35)} .bs-s-text a:hover{border-bottom-color:#8A6A3B} table.bs-zeiten{width:100%;max-width:520px;margin:0 auto;border-collapse:collapse; font:400 1rem/1.6 var(--font-text),sans-serif;font-weight:600;color:#284F1C; padding:13px 16px 13px 0;border-bottom:1px solid rgba(40,79,28,.13);width:40%} table.bs-zeiten td{text-align:right;color:#3F3B36;padding:13px 0; border-bottom:1px solid rgba(40,79,28,.13);font-variant-numeric:tabular-nums} table.bs-zeiten tr:last-child th, table.bs-zeiten tr:last-child td{border-bottom:0} table.bs-zeiten tr:last-child td{color:#8C8078} @media (max-width:520px){ table.bs-zeiten th{width:auto;font-size:.94rem;padding-right:8px} table.bs-zeiten td{font-size:.94rem} } /* ══ Globale Farben korrigieren /* ══ Globale Farben korrigieren ════════════════════════════════════════ Elementors Standardwerte (#6EC1E4 Blau, #61CE70 Grün, #7A7A7A Grau) standen noch im Kit und faerbten JEDE Ueberschrift hellblau — update-global-colors meldet Erfolg, aendert diese vier aber nicht. ═════════════════════════════════════════════════════════════════════ */ :root,.elementor-kit-16{ --e-global-color-primary:#284F1C!important; --e-global-color-secondary:#8A6A3B!important; --e-global-color-text:#3F3B36!important; --e-global-color-accent:#8A6A3B!important; } /* Ueberschriften ohne eigene Klasse: gruen statt Elementor-Blau */ .elementor-widget-heading .elementor-heading-title{color:#284F1C} /* ... aber nicht auf dunklem Grund */ .bs-h1 .elementor-heading-title,.hz-h1 .elementor-heading-title, .bs-ab-h .elementor-heading-title,.hz-ab-h .elementor-heading-title, .hz-schnitt-h .elementor-heading-title{color:#fff!important} .bs-h2 .elementor-heading-title,.hz-h2 .elementor-heading-title, .bs-k-titel .elementor-heading-title,.hz-k-titel .elementor-heading-title, .bs-s-titel .elementor-heading-title,.hz-s-titel .elementor-heading-title{color:#284F1C!important} .bs-nr .elementor-heading-title,.hz-nr .elementor-heading-title{color:#8A6A3B!important} /* ══ Schriften erzwingen /* ══ Schriften erzwingen ══════════════════════════════════════════════ Elementors Kit-Typografie (Roboto) hat hoehere Spezifitaet als eine Klassenregel. Gemessen: H1 lief in Roboto statt Cormorant. ═════════════════════════════════════════════════════════════════════ */ .bs-h1 .elementor-heading-title,.hz-h1 .elementor-heading-title, .bs-h2 .elementor-heading-title,.hz-h2 .elementor-heading-title, .bs-ab-h .elementor-heading-title,.hz-ab-h .elementor-heading-title, .hz-schnitt-h .elementor-heading-title, .bs-k-titel .elementor-heading-title,.hz-k-titel .elementor-heading-title, .bs-s-titel .elementor-heading-title,.hz-s-titel .elementor-heading-title, .bs-nr .elementor-heading-title,.hz-nr .elementor-heading-title{ font-family:var(--font-display),Georgia,serif!important} .bs-lead,.bs-lead p,.bs-fliess p,.bs-k-text p,.bs-s-text p, .bs-kicker,.bs-kicker p,.bs-hinweis p,.bs-ab-t p,.bs-ab-zeiten p, .hz-lead,.hz-fliess p,.hz-k-text,.hz-s-text{ font-family:var(--font-text),-apple-system,BlinkMacSystemFont,sans-serif!important} /* ══ Lesbarkeit auf dunklem Grund /* ══ Lesbarkeit auf dunklem Grund nachziehen ═════════════════════════ Gemessen zu blass: Hero-Vorspann und der Text im gruenen Abschluss. ═════════════════════════════════════════════════════════════════════ */ .bs-lead, .bs-lead p, .hz-lead, .hz-lead p{ color:#FAF3E8!important;font-size:1.08rem!important; text-shadow:0 1px 16px rgba(0,0,0,.6)!important} .bs-ab-t p, .hz-ab-t{color:#E6F0E0!important;font-size:1.02rem!important} .bs-ab-zeiten p, .hz-ab-zeiten{color:#C9DCC2!important;font-size:.9rem!important} /* ══ Anlass-Mosaik: /* ══ Anlass-Mosaik: 2 groß oben, 3 klein unten ════════════════════════ Eine aeltere Regel `body.elementor-page-45 ...` setzte repeat(12,...) mit festen Zeilenhoehen und schlug jede Kit-Regel (hoehere Spezifitaet). Gemessen: 9 sichtbare Spalten, Kacheln 281/150/225 px, „Zur Geburt" von der unteren Reihe ueberlappt. Hier mit derselben Spezifitaet geschrieben — 12 Spalten beibehalten, Spannen darauf ausgelegt: oben 2x6, unten 3x4. ═════════════════════════════════════════════════════════════════════ */ body.elementor-page-45 .elementor-element-129aa7f{ display:grid!important; grid-template-columns:repeat(12,minmax(0,1fr))!important; grid-template-rows:auto auto!important; grid-auto-rows:auto!important; gap:18px!important;align-items:stretch!important} body.elementor-page-45 .elementor-element-167c84c, body.elementor-page-45 .elementor-element-2f3fc0c{ grid-column:span 6!important;grid-row:1!important; min-height:520px!important;width:auto!important;max-width:none!important} body.elementor-page-45 .elementor-element-703ac37, body.elementor-page-45 .elementor-element-0c31ade, body.elementor-page-45 .elementor-element-52c92cd{ grid-column:span 4!important;grid-row:2!important; min-height:360px!important;width:auto!important;max-width:none!important} @media (max-width:1024px){ body.elementor-page-45 .elementor-element-129aa7f{ grid-template-columns:repeat(2,minmax(0,1fr))!important; grid-template-rows:auto!important} body.elementor-page-45 .elementor-element-167c84c, body.elementor-page-45 .elementor-element-2f3fc0c, body.elementor-page-45 .elementor-element-703ac37, body.elementor-page-45 .elementor-element-0c31ade{ grid-column:span 1!important;grid-row:auto!important;min-height:330px!important} body.elementor-page-45 .elementor-element-52c92cd{ grid-column:span 2!important;grid-row:auto!important;min-height:280px!important} } @media (max-width:767px){ body.elementor-page-45 .elementor-element-129aa7f{ grid-template-columns:minmax(0,1fr)!important; grid-template-rows:auto!important;gap:14px!important} body.elementor-page-45 .elementor-element-167c84c, body.elementor-page-45 .elementor-element-2f3fc0c, body.elementor-page-45 .elementor-element-703ac37, body.elementor-page-45 .elementor-element-0c31ade, body.elementor-page-45 .elementor-element-52c92cd{ grid-column:span 1!important;grid-row:auto!important;min-height:280px!important} } /* ══ Kopfzeile mobil verkleinern /* ══ Kopfzeile mobil verkleinern ══════════════════════════════════════ Gemessen bei 390 px: Kopf war 345 px hoch (39 % des Bildschirms), Logo 190x135, Burger 33 px. Jetzt Querformat-Logo (6,2:1) — es darf breiter und muss deutlich flacher sein. ═════════════════════════════════════════════════════════════════════ */ .elementor-location-header .elementor-widget-theme-site-logo img, .elementor-location-header img.custom-logo{ height:auto!important;max-height:56px!important;width:auto!important; max-width:320px!important;object-fit:contain} @media (max-width:1024px){ .elementor-location-header .elementor-widget-theme-site-logo img, .elementor-location-header img.custom-logo{ max-height:42px!important;max-width:240px!important} .elementor-location-header .e-con, .elementor-location-header .e-con-inner{ padding-top:8px!important;padding-bottom:8px!important} .elementor-location-header .elementor-menu-toggle{ min-width:44px!important;min-height:44px!important; display:flex!important;align-items:center!important;justify-content:center!important; font-size:26px!important} } @media (max-width:767px){ .elementor-location-header .elementor-widget-theme-site-logo img, .elementor-location-header img.custom-logo{ max-height:34px!important;max-width:190px!important} .elementor-location-header .e-con, .elementor-location-header .e-con-inner{ padding-top:6px!important;padding-bottom:6px!important;row-gap:4px!important} .elementor-location-header .elementor-widget-text-editor, .elementor-location-header .elementor-widget-text-editor p{ font-size:.68rem!important;line-height:1.35!important;margin:0!important} .elementor-location-header .elementor-menu-cart__toggle .elementor-button{ min-height:40px!important;padding:0 12px!important;font-size:.72rem!important} .elementor-location-header .e-con-inner{ flex-direction:row!important;align-items:center!important; justify-content:space-between!important;flex-wrap:nowrap!important} } /* ══ Navigation einzeilig halten /* ══ Navigation einzeilig halten ══════════════════════════════════════ Das Querformat-Logo (320 px) drückte „Kontakt" in eine zweite Zeile. Engere Abstände und kein Umbruch im Menü. ═════════════════════════════════════════════════════════════════════ */ @media (min-width:1025px){ .elementor-location-header .elementor-nav-menu--main > ul{ flex-wrap:nowrap!important} .elementor-location-header .elementor-nav-menu--main .elementor-item{ white-space:nowrap;padding-left:13px!important;padding-right:13px!important; font-size:.68rem!important;letter-spacing:.09em!important} .elementor-location-header .elementor-widget-theme-site-logo img, .elementor-location-header img.custom-logo{max-width:280px!important} } @media (min-width:1025px) and (max-width:1300px){ .elementor-location-header .elementor-nav-menu--main .elementor-item{ padding-left:9px!important;padding-right:9px!important;font-size:.64rem!important} .elementor-location-header .elementor-widget-theme-site-logo img, .elementor-location-header img.custom-logo{max-width:230px!important;max-height:46px!important} } /* ══ Abschlussblock auf Grün /* ══ Abschlussblock auf Grün: Text muss weiß sein ═════════════════════ Gemessen: Adresse und Öffnungszeiten standen in rgb(63,59,54) auf rgb(40,79,28) = Kontrast 1,18:1 — praktisch unsichtbar. Ursache: Elementor legt kurze Texte OHNE

direkt ins Widget-Div, meine Regeln zielten aber auf `.bs-ab-t p`. Deshalb hier das Widget selbst UND etwaige Kindelemente ansprechen. ═════════════════════════════════════════════════════════════════════ */ .bs-ab-t, .bs-ab-t *, .hz-ab-t, .hz-ab-t *{ color:#E6F0E0!important;font-size:1.02rem!important;line-height:1.7!important} .bs-ab-zeiten, .bs-ab-zeiten *, .hz-ab-zeiten, .hz-ab-zeiten *{ color:#C9DCC2!important;font-size:.9rem!important;line-height:1.7!important} .bs-ab-kontakt, .bs-ab-kontakt *{color:#FFFFFF!important} .bs-ab-kontakt a, .hz-ab-kontakt a{ color:#FFFFFF!important;text-decoration:none; border-bottom:1px solid rgba(255,255,255,.45)} .bs-ab-kontakt a:hover, .hz-ab-kontakt a:hover{border-bottom-color:#fff} /* Sicherheitsnetz: KEIN dunkler Erbwert auf grünem Grund */ .bs-abschluss, .bs-abschluss *{--e-global-color-text:#E6F0E0} /* ══ Adresszeile im Hero ══════════════════════════════════════════════ Entwurf start-v2.html .hero__meta: absolut RECHTS UNTEN, rechtsbündig, 13 px, drei Zeilen, Straße fett. Historie: eine Zwischenfassung hatte sie nach links unter die Knöpfe geholt, weil die echten Öffnungszeiten in VERSALIEN zu breit waren und umbrachen. Ursache waren die Versalien, nicht die Position — ohne text-transform passt der Text in die 440-px-Spalte des Entwurfs. ═════════════════════════════════════════════════════════════════════ */ /* BLEIBT SICHTBAR (Chris 17.09.): Ja, der grüne Balken in der Kopfzeile (a47d88e) zeigt Öffnungszeiten + Telefon + Adresse schon. Die Doppelung ist gewollt — "Hauptsache die Leute checken es und sehen es". Nicht wieder wegoptimieren. */ body.elementor-page-45 #bs-hero-meta{ position:absolute!important;right:4.5vw!important;bottom:46px!important; left:auto!important;top:auto!important; width:min(460px,42vw)!important;max-width:none!important;margin:0!important; text-align:right!important; font:400 13px/1.62 "Outfit",-apple-system,sans-serif!important; letter-spacing:.01em!important;text-transform:none!important; color:rgba(255,255,255,.74)!important; text-shadow:0 1px 14px rgba(0,0,0,.55)!important; display:block!important;z-index:4} body.elementor-page-45 #bs-hero-meta b{ color:#fff!important;font-weight:500!important} /* Unter 900 px blendet der Entwurf die Meta-Zeile aus (.hero__meta) — dort steht die Adresse ohnehin in der Fußzeile. */ @media (max-width:900px){ body.elementor-page-45 #bs-hero-meta{display:none!important} } /* ══ Hero-Slider-Pfeile /* ══ Hero-Slider-Pfeile ═══════════════════════════════════════════════ Saßen mobil auf Texthöhe und kollidierten mit der Überschrift; 25x25 px war außerdem unter der Touch-Norm. Jetzt 48 px und aus dem Textblock heraus an den unteren Rand. ═════════════════════════════════════════════════════════════════════ */ .elementor-45 .elementor-swiper-button{ width:48px!important;height:48px!important; display:flex!important;align-items:center!important;justify-content:center!important; font-size:22px!important;color:#fff!important; background:rgba(26,22,18,.32)!important;border-radius:50%!important; backdrop-filter:blur(3px);transition:background .2s ease} .elementor-45 .elementor-swiper-button:hover{background:rgba(26,22,18,.55)!important} .elementor-45 .elementor-swiper-button-prev{left:14px!important} .elementor-45 .elementor-swiper-button-next{right:14px!important} @media (max-width:767px){ /* Aus dem Textblock heraus: an den unteren Bildrand */ .elementor-45 .elementor-swiper-button{ top:auto!important;bottom:18px!important;transform:none!important; width:44px!important;height:44px!important;font-size:19px!important} .elementor-45 .elementor-swiper-button-prev{left:auto!important;right:74px!important} .elementor-45 .elementor-swiper-button-next{right:18px!important} } /* ══ KOPFZEILE nach Entwurf /* ══ KOPFZEILE nach Entwurf start-v2.html ═════════════════════════════ Drei Abweichungen gemessen und korrigiert: 1. Grüner Balken saß bei oben:10 links:10 breite:1420 — also 10 px Rand ringsum. Im Entwurf (.bar) läuft er randlos über die volle Breite, nur der INHALT ist auf 1240 px zentriert. 2. Kopf war weiß; im Entwurf ist er über dem Hero transparent (.head{position:relative}, kein Hintergrund) und wird erst beim Scrollen weiß (.head--solid). 3. Schrift Inter statt Outfit — deshalb wirkte es altbacken. ═════════════════════════════════════════════════════════════════════ */ /* ── 1) Balken randlos, Inhalt zentriert ── */ .elementor-location-header > .e-con, .elementor-location-header > .elementor-element{ margin-left:0!important;margin-right:0!important; max-width:none!important;width:100%!important; border-radius:0!important} .elementor-location-header > .e-con:first-child{ padding-left:0!important;padding-right:0!important; padding-top:0!important;padding-bottom:0!important} .elementor-location-header > .e-con:first-child > .e-con-inner, .elementor-location-header > .e-con:first-child .elementor-widget-text-editor{ max-width:1240px!important;margin-inline:auto!important; padding:9px clamp(1.25rem,4vw,3rem)!important;width:100%!important} /* ── 2) Kopf transparent über dem Hero ── */ .elementor-location-header{ position:absolute!important;top:0;left:0;right:0;z-index:50; background:transparent!important} /* Der Hero beginnt damit ganz oben — Inhalt nach unten schieben */ .elementor-location-header ~ * .bs-hero:first-child, .elementor-location-header ~ main > .elementor > .elementor-element:first-child{ padding-top:0!important} /* 24.09.: nur das OBERSTE Element, nicht jedes erste Kind (traf den Picker) */ /* Navigation und Logo auf transparentem Grund: hell */ .elementor-location-header .elementor-item{color:#fff!important; text-shadow:0 1px 10px rgba(0,0,0,.35)} .elementor-location-header .elementor-item:hover, .elementor-location-header .elementor-item.elementor-item-active{ color:#F3E7D4!important} .elementor-location-header .elementor-widget-theme-site-logo img, .elementor-location-header img.custom-logo{ filter:brightness(0) invert(1);transition:filter .4s ease} .elementor-location-header .elementor-menu-cart__toggle .elementor-button{ background:transparent!important;color:#fff!important; border:1px solid rgba(255,255,255,.35)!important;border-radius:999px!important} .elementor-location-header .elementor-menu-toggle{color:#fff!important} /* ── 3) Outfit statt Inter ── */ body, .elementor-widget-text-editor, .elementor-widget-text-editor p, .bs-lead, .bs-lead p, .bs-fliess p, .bs-k-text p, .bs-s-text p, .bs-kicker, .bs-kicker p, .bs-hinweis p, .bs-ab-t, .bs-ab-t *, .bs-ab-zeiten, .bs-ab-zeiten *, .hz-lead, .hz-fliess p, .hz-k-text, .hz-s-text, .elementor-location-header .elementor-item, .elementor-location-footer .elementor-item, .woocommerce ul.products li.product .price, .woocommerce ul.products li.product .button, .woocommerce ul.products li.product .added_to_cart, .bs-pille, .bs-flabel, #bs-ticker-text, #bs-hero-meta, table.bs-zeiten, .bs-shopkopf .bs-shoplead{ font-family:var(--font-text),-apple-system,BlinkMacSystemFont,sans-serif!important} /* ══ Outfit laden ══════════════════════════════════════════════════ Elementor laedt Inter, Roboto und Cormorant, aber kein Outfit — die Kit-Einstellung greift ueber die Schnittstelle nicht. @import mitten im CSS wird ignoriert (nur am Dateianfang gueltig), deshalb hier die @font-face-Regeln direkt. Nur latin, das halbiert die Groesse. ═════════════════════════════════════════════════════════════════════ */ @font-face { font-family: 'Outfit'; font-style: normal; font-weight: 300; font-display: swap; src: url(https://fonts.gstatic.com/s/outfit/v15/QGYvz_MVcBeNP4NJtEtqUYLknw.woff2) format('woff2');} @font-face { font-family: 'Outfit'; font-style: normal; font-weight: 400; font-display: swap; src: url(https://fonts.gstatic.com/s/outfit/v15/QGYvz_MVcBeNP4NJtEtqUYLknw.woff2) format('woff2');} @font-face { font-family: 'Outfit'; font-style: normal; font-weight: 500; font-display: swap; src: url(https://fonts.gstatic.com/s/outfit/v15/QGYvz_MVcBeNP4NJtEtqUYLknw.woff2) format('woff2');} @font-face { font-family: 'Outfit'; font-style: normal; font-weight: 600; font-display: swap; src: url(https://fonts.gstatic.com/s/outfit/v15/QGYvz_MVcBeNP4NJtEtqUYLknw.woff2) format('woff2');} /* Navigation: Elementors Widget-Typografie /* Navigation: Elementors Widget-Typografie schlaegt die Sammelregel, deshalb hier einzeln und spezifischer. */ .elementor-location-header .elementor-nav-menu .elementor-item, .elementor-location-header .elementor-nav-menu a, .elementor-location-header .elementor-nav-menu--dropdown a, .elementor-widget-nav-menu .elementor-item, .elementor-location-footer .elementor-nav-menu a{ font-family:var(--font-text),-apple-system,BlinkMacSystemFont,sans-serif!important} /* ...und alles, was Elementor sonst auf Inter/Roboto setzt */ .elementor-widget-text-editor, .elementor-widget-text-editor *, .elementor-widget-button .elementor-button, .woocommerce, .woocommerce-page, .woocommerce ul.products li.product *:not(.woocommerce-loop-product__title):not(.woocommerce-loop-product__title *){ font-family:var(--font-text),-apple-system,BlinkMacSystemFont,sans-serif!important} /* Ueberschriften bleiben Cormorant */ h1,h2,h3,h4,.elementor-heading-title, .woocommerce ul.products li.product .woocommerce-loop-product__title{ font-family:var(--font-display),Georgia,serif!important} /* ══ Kopfzeile: Navigationsstreifen transparent /* ══ Kopfzeile: Navigationsstreifen transparent ═══════════════════════ Container 966fc05 trug background_color:#FFFFFF — das weisse Band, auf dem das weiss gefilterte Logo unsichtbar war. Jetzt transparent wie im Entwurf (.head ohne Hintergrund ueber dem Hero). Balken a47d88e bleibt gruen und randlos. ═════════════════════════════════════════════════════════════════════ */ .elementor-location-header .elementor-element-966fc05{ background:transparent!important; max-width:1240px!important;margin-inline:auto!important; padding:0 clamp(1.25rem,4vw,3rem)!important;min-height:78px!important} .elementor-location-header .elementor-element-a47d88e{ background:#284F1C!important;width:100%!important;max-width:none!important; margin:0!important;padding:0!important} .elementor-location-header .elementor-element-a47d88e > .e-con-inner, .elementor-location-header .elementor-element-9bde636{ max-width:1240px!important;margin-inline:auto!important; padding:9px clamp(1.25rem,4vw,3rem)!important} /* 10.11.2026: Der Kopf ist weiss (rgba(255,255,255,.97)), nicht transparent wie im Prototyp — weisse Menueschrift war unsichtbar (gemessen Kontrast 1,03:1). */ .elementor-location-header .elementor-element-89d9e42 .elementor-nav-menu--main .elementor-item, .elementor-location-header .elementor-nav-menu--main .elementor-item{ color:#284F1C!important;text-shadow:none!important} .elementor-location-header .elementor-nav-menu--main .elementor-item:hover, .elementor-location-header .elementor-nav-menu--main .elementor-item:focus, .elementor-location-header .elementor-nav-menu--main .elementor-item.elementor-item-active{ color:#8A6A3B!important} /* Untermenue bleibt weisser Kasten mit dunkler Schrift */ .elementor-location-header .elementor-nav-menu--dropdown a{ color:#3F3B36!important;text-shadow:none!important;background:#fff} .elementor-location-header .elementor-nav-menu--dropdown a:hover{ background:#F9F3EB!important;color:#284F1C!important} /* Warenkorb als heller Umriss */ .elementor-location-header .elementor-menu-cart__toggle .elementor-button{ background:transparent!important;color:#FFFFFF!important; border:1px solid rgba(255,255,255,.4)!important;border-radius:999px!important; text-shadow:0 1px 10px rgba(0,0,0,.4)} .elementor-location-header .elementor-menu-cart__toggle .elementor-button:hover{ background:rgba(255,255,255,.14)!important} /* ══ Kopfzeile: hell über dem Hero /* ══ Kopfzeile: hell über dem Hero, dunkel auf hellen Seiten ══════════ Der Entwurf löst das mit `.head--solid` beim Scrollen. Hier ohne JavaScript über den Seitentyp: die Startseite hat ein Hero-Bild direkt unter dem Kopf, alle anderen Seiten nicht. Gemessen auf /shop/: weisse Navigation auf weissem Grund, Logo durch `brightness(0) invert(1)` komplett unsichtbar. ═════════════════════════════════════════════════════════════════════ */ /* ── Grundzustand: DUNKEL auf hellem Grund (alle Seiten) ── */ .elementor-location-header{ position:sticky!important;top:0;background:rgba(255,255,255,.97)!important; backdrop-filter:blur(10px);border-bottom:1px solid rgba(40,79,28,.10)} .elementor-location-header .elementor-element-966fc05{ background:transparent!important; max-width:1240px!important;margin-inline:auto!important; padding:0 clamp(1.25rem,4vw,3rem)!important;min-height:78px!important} .elementor-location-header .elementor-nav-menu--main .elementor-item{ color:#284F1C!important;text-shadow:none!important} .elementor-location-header .elementor-nav-menu--main .elementor-item:hover, .elementor-location-header .elementor-nav-menu--main .elementor-item.elementor-item-active{ color:#8A6A3B!important} .elementor-location-header .elementor-widget-theme-site-logo img, .elementor-location-header img.custom-logo{filter:none!important} .elementor-location-header .elementor-menu-cart__toggle .elementor-button{ background:transparent!important;color:#284F1C!important; border:1px solid rgba(40,79,28,.28)!important;border-radius:999px!important; text-shadow:none!important} .elementor-location-header .elementor-menu-cart__toggle .elementor-button:hover{ background:#F9F3EB!important} .elementor-location-header .elementor-menu-toggle{color:#284F1C!important} /* ── Startseite (E4, 23.09.): Hero A hat den Text auf Creme unter dem Bild. Der transparente Kopf über dem Bild entfaellt — die Startseite bekommt denselben weissen, klebenden Kopf wie jede andere Seite. Die alten body.home-Regeln (weisse Schrift, invertiertes Logo) sind damit weg. ── */ /* Grüner Balken: randlos, Inhalt zentriert — auf ALLEN Seiten */ .elementor-location-header .elementor-element-a47d88e{ background:#284F1C!important;width:100%!important;max-width:none!important; margin:0!important;padding:0!important} .elementor-location-header .elementor-element-a47d88e > .e-con-inner, .elementor-location-header .elementor-element-9bde636{ max-width:1240px!important;margin-inline:auto!important; padding:9px clamp(1.25rem,4vw,3rem)!important} /* Untermenü immer heller Kasten */ .elementor-location-header .elementor-nav-menu--dropdown a{ color:#3F3B36!important;text-shadow:none!important;background:#fff} .elementor-location-header .elementor-nav-menu--dropdown a:hover{ background:#F9F3EB!important;color:#284F1C!important} /* ══ Hero-Slider: Texte wechseln /* ══ Hero-Slider: Texte wechseln mit den Bildern ══════════════════════ Vorher lag H1/Absatz/Knöpfe in einem SEPARATEN Container über dem Slider — gemessen `ueberschriftenInSlides: []`. Der Slider lief (Index 3→5 in 9 s), nur der Text stand still. Jetzt im Slide selbst. Kursive zweite Zeile in Creme wie im Entwurf (.line em). ═════════════════════════════════════════════════════════════════════ */ .elementor-45 .elementor-widget-slides .elementor-slide-heading{ font-family:var(--font-display),Georgia,serif!important; /* Entwurf start-v2.html .hero h1: Gewicht 500, nicht 300 */ font-weight:400!important;line-height:1.02!important; letter-spacing:-.022em;text-shadow:0 2px 40px rgba(0,0,0,.35); max-width:16ch;text-wrap:balance} /* Zweite Zeile kursiv in GOLD — Entwurf: color:var(--bs-gold-500)=#C9A87C. Vorher stand hier Creme #F3E7D4, damit fehlte die Gold-Signatur. */ .elementor-45 .elementor-widget-slides .elementor-slide-heading em{ font-style:italic;color:#C9A87C;font-weight:400;display:block} .elementor-45 .elementor-widget-slides .elementor-slide-description{ font-family:var(--font-text),-apple-system,BlinkMacSystemFont,sans-serif!important; line-height:1.6!important;max-width:34em; text-shadow:0 1px 18px rgba(0,0,0,.4)} .elementor-45 .elementor-widget-slides .elementor-slide-button{ font-family:var(--font-text),-apple-system,BlinkMacSystemFont,sans-serif!important; letter-spacing:.09em;text-transform:uppercase;font-size:13px!important; padding:15px 30px!important;border:0!important} .elementor-45 .elementor-widget-slides .elementor-slide-button:hover{ background:#1E3C15!important} /* Punkte sichtbarer und größer antippbar */ .elementor-45 .elementor-widget-slides .swiper-pagination-bullet{ width:9px;height:9px;background:#fff;opacity:.45} .elementor-45 .elementor-widget-slides .swiper-pagination-bullet-active{ opacity:1;background:#F3E7D4} .elementor-45 .elementor-widget-slides .elementor-swiper-button{ color:#fff;text-shadow:0 1px 14px rgba(0,0,0,.5)} @media(max-width:767px){ .elementor-45 .elementor-widget-slides .elementor-slide-heading{ line-height:1.08!important} .elementor-45 .elementor-widget-slides .elementor-slide-description{ font-size:15px!important} } /* ═════════════════════════════════════════════════════════════════════ LAUFBAND (Startseite 45, Container f568511, Absatz #bs-ticker-text) Neu gebaut 17.09.2026 nach design/start-v2.html (.ticker). Vorher lagen ZWEI Generationen übereinander: das Kit definierte .bs-tick-spur/.bs-tick-halb (46 s, Cormorant, goldener Punkt), aber das Markup trug diese Klassen nie. Gegriffen hat die ältere Regel im SEITEN-CSS: Inter 11 px, uppercase, 32 s, kein Trennzeichen — daher klebten die Wörter aneinander (»GASTRONOMIEBLUMEN-ABOSCULPTURA«). Jetzt: EINE Fassung, Struktur und CSS passen zusammen. WICHTIG: das e-paragraph-Widget (Atomic) STRIPPT class-Attribute aus dem Inhalt — deshalb hat das alte .bs-tick-spur/.bs-tick-halb-CSS nie gegriffen, obwohl es korrekt im Kit stand. Gegriffen werden muss über die STRUKTUR: #bs-ticker-text > span = die Spur (bewegt sich) > span = Hälfte 1 / Hälfte 2 (identisch) > a = 6 Schlagworte je Hälfte translateX(-50%) schlägt nur nahtlos um, wenn beide Hälften exakt gleich breit sind — deshalb identischer Inhalt, nicht bloß ähnlicher. ═════════════════════════════════════════════════════════════════════ */ .elementor-45 .elementor-element-f568511{ background-color:#F9F3EB!important; border-top:1px solid #E3DCD2!important; border-bottom:1px solid #E3DCD2!important; padding-top:14px!important;padding-bottom:14px!important; overflow:hidden!important;display:block!important } .elementor-45 #bs-ticker-text{ margin:0!important;padding:0!important; width:max-content!important;max-width:none!important; white-space:nowrap!important;overflow:visible!important; /* Der Absatz selbst bewegt sich NICHT — die Spur darin tut es. */ animation:none!important;transform:none!important } .elementor-45 #bs-ticker-text > span{ display:inline-flex;align-items:center; will-change:transform; animation:bs-tick 44s linear infinite } .elementor-45 #bs-ticker-text > span > span{ display:inline-flex;align-items:center;flex:0 0 auto } /* Schlagworte: Cormorant 22 px in Grün — wie im Entwurf, keine Versalien. */ .elementor-45 #bs-ticker-text > span > span > a{ font-family:var(--font-display),Georgia,serif!important; font-size:22px!important;font-weight:400!important;line-height:1.25!important; letter-spacing:normal!important;text-transform:none!important; color:#284F1C!important;text-decoration:none!important; display:inline-flex;align-items:center; padding-block:2px; /* 48 px Lücke = --bs-space-12 des Entwurfs, hälftig links/rechts */ margin-inline:24px } /* Der goldene Trennpunkt. Fehlte live komplett. */ .elementor-45 #bs-ticker-text > span > span > a::after{ content:"·";color:#8A6A3B; margin-left:24px;pointer-events:none; font-size:22px;line-height:1 } .elementor-45 #bs-ticker-text > span > span > a:hover{ color:#1B3712!important;text-decoration:underline;text-underline-offset:3px } .elementor-45 #bs-ticker-text > span > span > a:focus-visible{ outline:2px solid #284F1C;outline-offset:3px;border-radius:2px } /* Pause bei Hovern UND Tastaturfokus — sonst läuft der Link davon. */ .elementor-45 #bs-ticker-text:hover > span, .elementor-45 #bs-ticker-text:focus-within > span{ animation-play-state:paused } @keyframes bs-tick{from{transform:translateX(0)}to{transform:translateX(-50%)}} @media(prefers-reduced-motion:reduce){ .elementor-45 #bs-ticker-text > span{animation:none} } @media(max-width:767px){ .elementor-45 .elementor-element-f568511{padding-top:11px!important;padding-bottom:11px!important} .elementor-45 #bs-ticker-text > span > span > a{font-size:18px!important;margin-inline:18px} .elementor-45 #bs-ticker-text > span > span > a::after{margin-left:18px;font-size:18px} } /* ══ Anlass-Kacheln: ganze Fläche klickbar /* ══ Anlass-Kacheln: ganze Fläche klickbar ════════════════════════════ Vorher war nur die Überschrift ein Link — gemessen: Container-Link per `settings.link` wird von dieser Elementor-Version NICHT als gerendert (im Markup steht nur ein

). Statt Zusatz-Markup wird der vorhandene Überschriften-Link über die Kachel gezogen („stretched link"): ein ::after deckt die Fläche ab. Der Beschreibungstext liegt darüber, damit Textmarkierung möglich bleibt; geklickt wird trotzdem der Link. ═════════════════════════════════════════════════════════════════════ */ body.elementor-page-45 .elementor-element-167c84c, body.elementor-page-45 .elementor-element-2f3fc0c, body.elementor-page-45 .elementor-element-703ac37, body.elementor-page-45 .elementor-element-0c31ade, body.elementor-page-45 .elementor-element-52c92cd{ position:relative!important;overflow:hidden; cursor:pointer;isolation:isolate; transition:transform .5s cubic-bezier(.2,.7,.2,1)} /* Der Link deckt die ganze Kachel ab */ body.elementor-page-45 .elementor-element-167c84c .elementor-heading-title a::after, body.elementor-page-45 .elementor-element-2f3fc0c .elementor-heading-title a::after, body.elementor-page-45 .elementor-element-703ac37 .elementor-heading-title a::after, body.elementor-page-45 .elementor-element-0c31ade .elementor-heading-title a::after, body.elementor-page-45 .elementor-element-52c92cd .elementor-heading-title a::after{ content:"";position:absolute;inset:0;z-index:4} /* Bild zieht beim Überfahren sanft an — Rückmeldung, dass es klickbar ist */ body.elementor-page-45 .elementor-element-167c84c:hover, body.elementor-page-45 .elementor-element-2f3fc0c:hover, body.elementor-page-45 .elementor-element-703ac37:hover, body.elementor-page-45 .elementor-element-0c31ade:hover, body.elementor-page-45 .elementor-element-52c92cd:hover{ transform:scale(1.012)} body.elementor-page-45 .elementor-element-167c84c:hover .elementor-heading-title a, body.elementor-page-45 .elementor-element-2f3fc0c:hover .elementor-heading-title a, body.elementor-page-45 .elementor-element-703ac37:hover .elementor-heading-title a, body.elementor-page-45 .elementor-element-0c31ade:hover .elementor-heading-title a, body.elementor-page-45 .elementor-element-52c92cd:hover .elementor-heading-title a{ text-decoration:underline;text-decoration-thickness:1px; text-underline-offset:.18em} /* Tastatur: Fokus muss die ganze Kachel zeigen, nicht nur das Wort */ body.elementor-page-45 .elementor-element-167c84c:focus-within, body.elementor-page-45 .elementor-element-2f3fc0c:focus-within, body.elementor-page-45 .elementor-element-703ac37:focus-within, body.elementor-page-45 .elementor-element-0c31ade:focus-within, body.elementor-page-45 .elementor-element-52c92cd:focus-within{ outline:3px solid #F3E7D4;outline-offset:-3px} @media(prefers-reduced-motion:reduce){ body.elementor-page-45 .elementor-element-167c84c:hover, body.elementor-page-45 .elementor-element-2f3fc0c:hover, body.elementor-page-45 .elementor-element-703ac37:hover, body.elementor-page-45 .elementor-element-0c31ade:hover, body.elementor-page-45 .elementor-element-52c92cd:hover{transform:none} } /* ══ Anlass-Kacheln: ganze Fläche klickbar (Nachtrag) /* ══ Anlass-Kacheln: ganze Fläche klickbar (Nachtrag) ═════════════════ Erste Fassung wirkungslos: `inset:0` bezieht sich auf den nächsten POSITIONIERTEN Vorfahren — und das ist das Überschriften-Widget (`position:relative`), nicht die Kachel. Gemessen: Link-Rechteck 143x51 px am Titel, Probe bei 28 % Höhe traf `DIV.e-con-inner`. Lösung: Überschriften-Widget auf `static`, dann fällt das ::after auf `.e-con-inner` (relative, z-index 2) zurück — und die deckt die Kachelfläche nachweislich ab. ═════════════════════════════════════════════════════════════════════ */ body.elementor-page-45 .elementor-element-167c84c .elementor-element-c5dc108, body.elementor-page-45 .elementor-element-2f3fc0c .elementor-element-e7ab6d6, body.elementor-page-45 .elementor-element-703ac37 .elementor-element-c94657f, body.elementor-page-45 .elementor-element-0c31ade .elementor-element-896d04f, body.elementor-page-45 .elementor-element-52c92cd .elementor-element-f1d8cd8{ position:static!important} /* Der Beschreibungstext muss über dem Klickfeld liegen bleiben, sonst ist er nicht markierbar — aber der Klick geht trotzdem zum Link, weil der Text selbst kein eigenes Ziel hat. */ body.elementor-page-45 .elementor-element-91689d8, body.elementor-page-45 .elementor-element-e9b6dfb, body.elementor-page-45 .elementor-element-812af16, body.elementor-page-45 .elementor-element-f5e3553, body.elementor-page-45 .elementor-element-24ffa29{ position:relative;z-index:5;pointer-events:none} /* ══ Hochzeits-Abschnitt: Strauß war angeschnitten /* ══ Hochzeits-Abschnitt: Strauß war angeschnitten ═══════════════════ Ursache gemessen: Bild 390 ist 2352x1488 (1.58:1), der Abschnitt ist durch padding 150/150 aber viel flacher (~2.4:1) — bei `cover` wird oben/unten beschnitten. `background_position:"center right"` heißt in CSS x=rechts, y=MITTE; der Strauß sitzt laut Bildprüfung aber bei ~22 % von oben und wurde dadurch gekappt. Das Original ist unbeschnitten (per vision_analyze bestätigt), es ist also reine Ausschnittsfrage: y auf 15 % hochziehen, x auf 72 %, und der Abschnitt bekommt mehr Höhe, damit weniger wegfällt. ═════════════════════════════════════════════════════════════════════ */ .elementor-45 .elementor-element.elementor-element-34bd621:not(.elementor-motion-effects-element-type-background), .elementor-45 .elementor-element.elementor-element-34bd621 > .elementor-motion-effects-container > .elementor-motion-effects-layer{ background-position:72% 15%!important; background-size:cover!important} .elementor-45 .elementor-element.elementor-element-34bd621{ min-height:640px!important} @media(max-width:1024px){ .elementor-45 .elementor-element.elementor-element-34bd621:not(.elementor-motion-effects-element-type-background), .elementor-45 .elementor-element.elementor-element-34bd621 > .elementor-motion-effects-container > .elementor-motion-effects-layer{ background-position:74% 12%!important} } @media(max-width:767px){ /* Mobil liegt der Text UNTER dem Bild (padding-top 320) — dort muss der Strauß im oberen Bildbereich sichtbar bleiben. */ .elementor-45 .elementor-element.elementor-element-34bd621:not(.elementor-motion-effects-element-type-background), .elementor-45 .elementor-element.elementor-element-34bd621 > .elementor-motion-effects-container > .elementor-motion-effects-layer{ background-position:76% 8%!important} .elementor-45 .elementor-element.elementor-element-34bd621{min-height:auto!important} } /* ══ PRODUKTKARTEN — eine Quelle für alles ═══════════════════════════ Ersetzt vier übereinandergestapelte Fassungen von heute, die sich widersprachen (font-size 12.5 / 11.5 / 11 / 10.5 px in einer Datei). Gemessene Ausgangslage: · Titel klebte 1 px am Rand, Knopf 1 px am Boden · Karten ungleich hoch (443 / 420 px) · „Ausführung wählen" lief über den Rand, nach dem Umbruch-Fix über VIER Zeilen (Karte war nur 134 px breit — Produkt-Widget stand mit 4 Spalten in einer 63-%-Spalte; jetzt 3 Spalten = 186 px) ═════════════════════════════════════════════════════════════════════ */ /* Raster: gleiche Reihenhöhen */ .woocommerce ul.products{ display:grid!important;grid-auto-rows:1fr!important; align-items:stretch!important} /* Karte: Spalte, Knopf per auto-Marge am Fuß */ .woocommerce ul.products li.product{ display:flex!important;flex-direction:column!important; height:100%!important;margin-bottom:0!important; background:#fff;border:1px solid rgba(40,79,28,.10); overflow:hidden;transition:box-shadow .3s,transform .3s} .woocommerce ul.products li.product:hover{ box-shadow:0 14px 40px -18px rgba(26,10,15,.22);transform:translateY(-2px)} /* Bild randlos oben */ .woocommerce ul.products li.product a img{ margin:0 0 14px!important;width:100%!important; aspect-ratio:4/5;object-fit:cover;display:block} /* Textspalte mit einheitlichem Innenabstand */ .woocommerce ul.products li.product .woocommerce-loop-product__title, .woocommerce ul.products li.product .price, .woocommerce ul.products li.product .wc-gzd-additional-info, .woocommerce ul.products li.product .woocommerce-gzd-shipping-costs-info{ padding-inline:21px!important;margin-inline:0!important} .woocommerce ul.products li.product .woocommerce-loop-product__title{ font-family:var(--font-display),Georgia,serif!important; font-size:clamp(15px,1.15vw,18px)!important;line-height:1.25!important; color:#284F1C!important;padding-top:0!important; margin-bottom:6px!important; overflow-wrap:break-word;hyphens:none; /* zwei Zeilen Mindestmaß: sonst springen Karten bei kurzen Namen */ min-height:2.5em; display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical; overflow:hidden} .woocommerce ul.products li.product .price{ font-family:var(--font-text),-apple-system,BlinkMacSystemFont,sans-serif!important; font-size:15px!important;font-weight:500!important; color:#3F3B36!important;margin:0 0 2px!important} /* „inkl. MwSt." rendert Woo als IM .price — Padding nicht doppeln */ .woocommerce ul.products li.product .price small, .woocommerce ul.products li.product .price .wc-gzd-additional-info{ padding-inline:0!important;margin-inline:0!important; display:block;font-size:11.5px!important;font-weight:400!important; color:#7A756E!important;line-height:1.35} .woocommerce ul.products li.product .woocommerce-gzd-shipping-costs-info{ font-size:11.5px!important;color:#7A756E!important; margin:0 0 4px!important;line-height:1.35} /* KNOPF: immer am Fuß, gleiche Höhe, Umbruch erlaubt, KEINE Silbentrennung */ .woocommerce ul.products li.product .button, .woocommerce ul.products li.product a.button, .woocommerce ul.products li.product .added_to_cart{ margin:auto 21px 21px!important; width:calc(100% - 42px)!important;box-sizing:border-box!important; display:flex!important;align-items:center;justify-content:center; text-align:center!important; min-height:46px;height:auto!important; white-space:normal!important;overflow:visible!important; text-overflow:clip!important; hyphens:none!important;-webkit-hyphens:none!important; word-break:keep-all!important;overflow-wrap:normal!important; line-height:1.3!important; font-family:var(--font-text),-apple-system,BlinkMacSystemFont,sans-serif!important; font-size:12px!important;letter-spacing:.05em;text-transform:uppercase; background:transparent!important;color:#284F1C!important; border:1px solid #284F1C!important;border-radius:2px!important; transition:background .2s,color .2s} .woocommerce ul.products li.product .button:hover, .woocommerce ul.products li.product a.button:hover{ background:#284F1C!important;color:#fff!important} /* Startseiten-Widget: schmalere Spalten, darum kleinere Schrift. Reicht, seit das Widget auf 3 Spalten steht (186 px statt 134 px). */ .elementor-widget-woocommerce-products ul.products li.product .button, .elementor-widget-woocommerce-products ul.products li.product a.button{ font-size:11px!important;letter-spacing:.02em!important; margin:auto 14px 16px!important;width:calc(100% - 28px)!important; padding:10px 6px!important} .elementor-widget-woocommerce-products ul.products li.product .woocommerce-loop-product__title, .elementor-widget-woocommerce-products ul.products li.product .price, .elementor-widget-woocommerce-products ul.products li.product .woocommerce-gzd-shipping-costs-info{ padding-inline:14px!important} @media(max-width:600px){ .woocommerce ul.products li.product .button, .woocommerce ul.products li.product a.button{ font-size:11px!important;margin:auto 14px 16px!important; width:calc(100% - 28px)!important} .woocommerce ul.products li.product .woocommerce-loop-product__title, .woocommerce ul.products li.product .price, .woocommerce ul.products li.product .woocommerce-gzd-shipping-costs-info{ padding-inline:14px!important} } /* Woos Standardtext „Ausführung wählen" braucht in schmalen Karten drei Zeilen. Kürzer ist hier ehrlicher und gleich lang wie „In den Warenkorb": der Knopf führt auf die Produktseite, wo die Ausführung gewählt wird. */ .woocommerce ul.products li.product a.button.product_type_variable{ font-size:0!important;letter-spacing:0!important} .woocommerce ul.products li.product a.button.product_type_variable::before{ content:"Auswählen";font-size:12px;letter-spacing:.05em} .elementor-widget-woocommerce-products ul.products li.product a.button.product_type_variable::before{ font-size:11px;letter-spacing:.02em} @media(max-width:600px){ .woocommerce ul.products li.product a.button.product_type_variable::before{font-size:11px} } /* Lange Einzelwörter („Schnittblumengesteck") brachen mitten im Wort („…gestec / k"), weil break-word bei einem Wort ohne Trennstelle zeichenweise bricht. Deutsche Silbentrennung ist hier besser als ein Bruch nach Gutdünken — sie setzt einen Bindestrich an erlaubter Stelle. */ .woocommerce ul.products li.product .woocommerce-loop-product__title{ overflow-wrap:normal!important;word-break:normal!important; hyphens:auto!important;-webkit-hyphens:auto!important; -webkit-hyphenate-limit-before:3;-webkit-hyphenate-limit-after:3; hyphenate-limit-chars:6 3 3} /* Die Redaktionsebene 5306e8c spannt über den ganzen Hero (inset:0) und ist klickdurchlässig; nur ihre Kinder fangen Klicks. Damit kann #bs-hero-meta darin absolut rechts unten sitzen. */ .elementor-45 .elementor-element-5306e8c{ position:absolute!important;inset:0!important; pointer-events:none!important;padding:0!important} .elementor-45 .elementor-element-5306e8c > *{pointer-events:auto} /* ══ Hero-Knopf ═══════════════════════════════════════════════════════ Optik nach Entwurf (.bs-btn--primary): Grün, 2 px Radius, Outfit 12 px in Versalien, 53 px hoch. OFFEN: der Entwurf zeigt ZWEI CTAs ("Zum Shop" + "Nach Anlass suchen"). Elementors Slides-Widget kennt pro Slide nur EIN button_text-Feld, ein zweiter Knopf ist damit nativ nicht möglich. Bewusst NICHT per Pseudo-Element gefälscht — das wäre kein echter Link (nicht fokussier- bar, nicht für Screenreader). Entscheidung Chris nötig: Slides-Widget gegen drei gestapelte Container tauschen (volle Freiheit, mehr Aufwand) oder beim einen Knopf je Slide bleiben. ═════════════════════════════════════════════════════════════════════ */ .elementor-45 .elementor-widget-slides .elementor-slide-button{ background:#284F1C!important;color:#fff!important; border:1px solid #284F1C!important;border-radius:2px!important; min-height:53px!important;padding:16px 28px!important; font-family:var(--font-text),-apple-system,BlinkMacSystemFont,sans-serif!important; font-size:12px!important;font-weight:500!important; letter-spacing:.11em!important;text-transform:uppercase!important} .elementor-45 .elementor-widget-slides .elementor-slide-button:hover{ background:#1E3C15!important;border-color:#1E3C15!important; transform:translateY(-2px)} /* ══ Etappe 2b: Young Serif hat EINEN Schnitt (400) ═══════════════════ Elementors Widget-Typografie setzt 600 → der Browser fettet synthetisch, die Serifen laufen zu (gemessen 23.09., Trauer-Hero). Gilt fuer alles, was in der Display-Schrift laeuft. ═════════════════════════════════════════════════════════════════════ */ h1,h2,h3,h4,.elementor-heading-title, .elementor-widget-heading .elementor-heading-title, .woocommerce ul.products li.product .woocommerce-loop-product__title, .bs-k-txt strong,#bs-ticker-text > span > span > a{ font-weight:400!important; letter-spacing:-.008em!important; line-height:1.12!important; font-synthesis:none} /* Fliesstext: Outfit 400, Betonung 500 — nie 600/700 im Lauftext */ body,.elementor-widget-text-editor,.elementor-widget-text-editor p{ font-synthesis:none} strong,b{font-weight:500} /* Vorspann auf Bild: Scrim unten, damit der Text traegt */ .bs-hero > .elementor-background-overlay,.hz-hero > .elementor-background-overlay{ background:linear-gradient(180deg,rgba(26,10,15,.18) 0%,rgba(26,10,15,.30) 55%,rgba(26,10,15,.62) 100%)!important; opacity:1!important} /* ══ Etappe 5: EINE Größenskala für alle Überschriften ═══════════════ Bisher setzte jedes Widget seine eigene Pixelgröße (Birgit&Sonja 40, Hochzeit 44, Abo 48 …) — sieben Größen auf einer Seite. Jetzt ziehen alle aus den Kit-Variablen s-h2 / s-h3, Eyebrows aus s-eyebrow. Hero-H1 hat ihre eigene s-display im Widget-Style. ═════════════════════════════════════════════════════════════════════ */ h2.elementor-heading-title,.elementor-widget-heading h2{font-size:var(--s-h2)!important} h3.elementor-heading-title,.elementor-widget-heading h3{font-size:var(--s-h3)!important} /* ══ Fuss-Spaltentitel: Semantik h2, Optik unveraendert (22.10.2026) ═══ Gemessen 22.10.: die vier Spaltentitel im Fuss 199 standen auf h3 ohne uebergeordnete h2. Auf 19 Seiten blieb das verdeckt, weil davor ein Inhalts-h2 stand; auf /vertrag-widerrufen/ (nur H1 + Fuss) lag der Sprung h1 -> h3 offen. Die Tags sind deshalb auf h2 gezogen. ⛔ Ohne diese Regel waeren sie dadurch von 20 px auf --s-h2 (bis 2,8rem) gesprungen — Zeile 1522 setzt !important. Semantik reparieren darf die Gestaltung nicht veraendern, also hier die Groesse festhalten. Selektor ueber den Theme-Fussbereich, NICHT ueber Element-Hashes (Hashes brechen, sobald Birgit ein Widget neu anlegt — Regel R7). */ footer .elementor-widget-heading h2.elementor-heading-title, .site-footer .elementor-widget-heading h2.elementor-heading-title, [data-elementor-type="footer"] .elementor-widget-heading h2.elementor-heading-title{ font-size:21px!important;line-height:1.12!important} .elementor-widget-heading div.elementor-heading-title, .elementor-widget-heading .elementor-heading-title.elementor-size-small{ font-family:var(--font-text)!important;font-size:var(--s-eyebrow)!important; letter-spacing:.14em!important;text-transform:uppercase;font-weight:500!important; color:var(--gruen-700)} /* Fließtext auf Body-Größe, Lesebreite */ .elementor-widget-text-editor p{font-size:var(--s-body);line-height:1.6} /* Abschnittsrhythmus: gleicher Atem oben/unten, wächst mit dem Schirm */ .elementor-page-45 > .elementor-element.e-con.e-parent:not(.e-flexbox){ padding-top:var(--abstand-sektion)!important;padding-bottom:var(--abstand-sektion)!important} /* Container-Breite der V3-Abschnitte auf die Kit-Variable */ .elementor-page-45 .e-con.e-parent > .e-con-inner, .elementor-page-45 .e-con.e-parent:not(.e-flexbox){--content-width:var(--container)!important} /* Hochzeit / Abo: eigener Atem, Bild darf wirken — aber nicht 150 px starr */ .elementor-page-45 .elementor-element-34bd621, .elementor-page-45 .elementor-element-7146915{ padding-top:calc(var(--abstand-sektion) * 1.25)!important;padding-bottom:calc(var(--abstand-sektion) * 1.25)!important} /* Zweispalter Birgit&Sonja + Hotels: Text-Spalte auf Lesebreite, Bild bleibt ruhig */ .elementor-page-45 .elementor-element-31e7339,.elementor-page-45 .elementor-element-1ac2e0c > .e-con:first-child{ max-width:var(--lese)} .elementor-page-45 .elementor-element-f6ad7e7,.elementor-page-45 .elementor-element-1ac2e0c{gap:clamp(32px,5vw,96px)} /* ══ Etappe 6: Produktkarten ruhig ════════════════════════════════════ Titel Display, Preis 500 grün, „inkl. MwSt." nur einmal (Germanized- Zeile bleibt, Woo-Suffix weg), Versand leise. Innenabstand fest 20 px — nicht --rand, der ist für Seitenränder. Grid bleibt 3-spaltig (6 Produkte = 2 volle Reihen; 4 Spalten hießen 4+2), dafür wächst der Abschnitt mit. ═════════════════════════════════════════════════════════════════════ */ ul.products li.product .woocommerce-loop-product__title{font-size:var(--s-h3)!important;line-height:1.15!important;margin-bottom:8px} ul.products li.product .price{font-weight:500!important;font-size:var(--s-body)!important;color:var(--gruen-800)!important} ul.products li.product .price .woocommerce-price-suffix{display:none!important} ul.products li.product .wc-gzd-additional-info{font-size:.75rem!important;color:var(--text-muted)!important;line-height:1.5!important;margin-top:2px} ul.products li.product .button,ul.products li.product .added_to_cart{min-height:var(--tap);font-weight:500!important;letter-spacing:.09em} ul.products li.product a img{margin-bottom:14px} .elementor-page-45 .elementor-element-88afbc0 ul.products{gap:clamp(12px,1.2vw,24px)!important} .elementor-page-45 .elementor-element-a552ec4{max-width:var(--lese)} .elementor-page-45 .elementor-element-0770674{gap:clamp(32px,5vw,96px)!important;align-items:center} @media(min-width:1920px){.elementor-page-45 .elementor-element-4ed7fb5{--content-width:var(--container-breit)!important}} /* ══ HOCHZEIT-HERO — Vorgabe Chris 23.09.: das Foto bleibt, wie es ist ══ Hell, weiss, kein Schleier, keine Fahrt. Die leere Wand links ist der Platz fuer den Text: Gruen/Ink auf Weiss, linksbuendig, max. 46 %. Steht am Ende des Kits, weil fruehere Regeln (.hz-h1 weiss, .hz-lead Schatten, .bs-lead Farbe) sonst wieder greifen. ═════════════════════════════════════════════════════════════════════ */ .elementor-22 .elementor-element-e1ea79a:after{content:none} .elementor-22 .elementor-element-e1ea79a{justify-content:center;align-items:flex-start!important; min-height:clamp(520px,72vh,860px)!important;padding-left:max(var(--rand),calc((100% - var(--container)) / 2 + 24px))!important} @media(min-width:1920px){.elementor-22 .elementor-element-e1ea79a{width:var(--container-breit)!important;max-width:1920px;margin-left:auto!important;margin-right:auto!important;min-height:min(46vw,1000px)!important;padding-left:64px!important}} .elementor-22 .elementor-element-e1ea79a > .elementor-widget{width:auto!important;max-width:min(48%,760px)!important;margin-left:0;text-align:left} .elementor-22 .elementor-element-e1ea79a .hz-kicker,.elementor-22 .elementor-element-e1ea79a .hz-kicker p{ color:var(--gold-700)!important;text-shadow:none!important;text-align:left} .elementor-22 .elementor-element-e1ea79a .hz-h1 .elementor-heading-title{ color:var(--gruen-800)!important;text-shadow:none!important;text-align:left;font-size:clamp(2.4rem,2.7vw,4rem)!important;text-wrap:balance} .elementor-22 .elementor-element-e1ea79a .hz-lead,.elementor-22 .elementor-element-e1ea79a .hz-lead p{ color:var(--text)!important;text-shadow:none!important;text-align:left;margin-left:0;max-width:34ch;font-size:var(--s-lead)!important} .elementor-22 .elementor-element-e1ea79a .elementor-align-center .elementor-button-wrapper{text-align:left} .elementor-22 .elementor-element-e1ea79a .hz-cta-hell .elementor-button{background:var(--gruen-800)!important;color:#fff!important} .elementor-22 .elementor-element-e1ea79a .hz-cta-hell .elementor-button:hover{background:var(--gruen-900)!important;box-shadow:none;transform:none} @media (max-width:767px){ /* Handy: Foto ist Querformat, Braut rechts — Text oben, Bild als Band darunter */ .elementor-22 .elementor-element-e1ea79a{min-height:auto!important;padding:28px 20px 0!important;background:#fff} .elementor-22 .elementor-element-e1ea79a:before{position:static;display:block;width:100%;aspect-ratio:3/2;order:9; background-position:78% 40%;margin-top:24px} .elementor-22 .elementor-element-e1ea79a > .elementor-widget{max-width:100%!important;width:100%!important} .elementor-22 .elementor-element-e1ea79a .hz-h1 .elementor-heading-title{font-size:2.05rem!important} .elementor-22 .elementor-element-e1ea79a .hz-lead,.elementor-22 .elementor-element-e1ea79a .hz-lead p{max-width:none;font-size:var(--s-body)!important} } /* ══ HOVER-STANDARD (24.09.) — Bewegung nur, wo ein Klick hinfuehrt ══ Bild-Kacheln ohne Link (Hochzeit .hz-hoch, .bs-kbild auf Trauer/Hotels/ Abo/Ueber-uns) zoomen NICHT mehr: Zoom verspricht einen Klick, der ins Leere ging (Chris, 23.09.). Regel gilt fuer alle Seiten: - Karte MIT Link: Bild-Zoom 1.045 in .8s + Schatten, cursor:pointer - Karte OHNE Link: nichts. Kein transform, kein cursor. ═════════════════════════════════════════════════════════════════════ */ a:hover img, a:focus-visible img{ /* nur innerhalb echter Links */ } ul.products li.product a.woocommerce-LoopProduct-link img{transition:transform .8s cubic-bezier(.2,.7,.3,1)} ul.products li.product:hover a.woocommerce-LoopProduct-link img{transform:scale(1.045)} /* ══ PRODUKTKARTE = eine Karte, ueberall (24.09.) ═════════════════════ Startseite ist die Wahrheit: sichtbarer Rahmen wie die Picker-Karte, Bild mit Innenrand (nicht randlos an der Kante), Text 18 px eingerueckt, Knopf unten buendig. Gilt fuer Shop, Kategorien, Related, Startseite. ═════════════════════════════════════════════════════════════════════ */ .woocommerce ul.products li.product{ border:1px solid var(--border)!important;background:#fff!important; padding:12px 12px 18px!important;box-shadow:var(--schatten-1)!important; transition:border-color .3s,box-shadow .3s,transform .3s!important} .woocommerce ul.products li.product:hover{ border-color:var(--gruen-800)!important; box-shadow:var(--schatten-3)!important;transform:translateY(-2px)!important} .woocommerce ul.products li.product a.woocommerce-LoopProduct-link{overflow:hidden;display:block} .woocommerce ul.products li.product a img{margin:0 0 16px!important;aspect-ratio:4/5;object-fit:cover} .woocommerce ul.products li.product .woocommerce-loop-product__title, .woocommerce ul.products li.product .price, .woocommerce ul.products li.product .wc-gzd-additional-info, .woocommerce ul.products li.product .woocommerce-gzd-shipping-costs-info, .woocommerce ul.products li.product .price-unit{padding-left:6px!important;padding-right:6px!important} .woocommerce ul.products li.product .button,.woocommerce ul.products li.product .added_to_cart{margin:14px 6px 0!important;width:calc(100% - 12px)!important} .woocommerce ul.products li.product .woocommerce-loop-product__title{padding-top:2px!important} @media (max-width:767px){ .woocommerce ul.products li.product{padding:8px 8px 14px!important} .woocommerce ul.products li.product a img{margin-bottom:10px!important}} /* ══ SHOP-FLUCHT (24.09.): Regal, Filter, Ergebniszeile und Raster auf EINER Linie. Vorher: Header 48px + Shopkopf 48px Innenabstand = zwei Fluchten (Regal 246px, Raster 150px, gemessen 1440). ══════════════ */ .woocommerce .site-main,.post-type-archive-product .site-main,.tax-product_cat .site-main{ max-width:var(--container)!important;width:100%;margin:0 auto;padding:0 var(--rand)!important;box-sizing:border-box} .woocommerce-products-header,.woocommerce ul.products,.woocommerce-breadcrumb, .woocommerce .woocommerce-result-count,.woocommerce .woocommerce-ordering,.woocommerce nav.woocommerce-pagination{ max-width:none!important;padding-left:0!important;padding-right:0!important;margin-left:0!important;margin-right:0!important} .woocommerce-products-header .bs-shopkopf{padding-left:0!important;padding-right:0!important;max-width:none!important} @media (min-width:1920px){.woocommerce .site-main,.post-type-archive-product .site-main,.tax-product_cat .site-main{max-width:var(--container-breit)!important}} /* ══ PRODUKTSEITE — das Kaufmodul (24.09.) ════════════════════════════ Vorher reines Woo-Standardtemplate (lila Button, Mint-Preis, 13-px- Meta, Tab-Kasten). Jetzt: Galerie gross links, rechts eine ruhige Kaufspalte in der Kartensprache der Seite. Native Woo-Hooks bleiben. ═════════════════════════════════════════════════════════════════════ */ .single-product .site-main{max-width:var(--container)!important;margin:0 auto;padding:0 var(--rand) 96px!important;box-sizing:border-box} .single-product div.product{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(32px,5vw,80px);align-items:start;margin-top:clamp(16px,2vw,32px)} .single-product div.product > *{grid-column:1 / -1} .single-product div.product > .woocommerce-product-gallery{grid-column:1;width:100%!important;float:none!important;margin:0!important} .single-product div.product > .summary{grid-column:2;width:100%!important;float:none!important;margin:0!important} /* ⛔ KEIN position:sticky auf der Kaufspalte. Sie stand bis 22.10.2026 auf `sticky;top:110px`. Das war harmlos, solange sie kurz war (Zirbenlüfter gemessen: 481 px). Mit dem Addon-Formular („Individueller Text", 18 von 22 Produkten) wächst sie auf 1302–1457 px — mehr als die Fensterhöhe. Ein sticky Element, das nicht ins Fenster passt, klebt oben fest: sein unterer Teil (Kaufen-Knopf, Lieferdatum) ist dann NIE erreichbar. Gemeldet von Chris am 22.10. („das ding scrollt nicht"). CSS kann Inhaltshöhe nicht abfragen — und Birgit kann jeden Text jederzeit verlängern. Deshalb gar nicht sticky, statt einer Regel, die bei langem Inhalt still umkippt. */ .single-product .woocommerce-product-gallery__wrapper{border:1px solid var(--border);background:#fff;padding:12px} /* ⛔ KEIN festes aspect-ratio auf dem Produktfoto. Es stand bis 22.10.2026 auf `aspect-ratio:4/5; object-fit:cover`. Bei den 8 Querformat-Produkten (von 22) schnitt das 47 % der Bildbreite weg und vergrößerte den Rest — genau der Eindruck „voll rangezoomt" (Chris 22.10.). Gemessen Samtherz-Rosenbox: Original 1199×799 quer, sichtbar nur 53 % der Breite. Hochformat war mit 94 % unauffällig, deshalb fiel es lange nicht auf. Auf der PRODUKTSEITE zeigt das Bild jetzt sein eigenes Seitenverhältnis — dort ist das Foto der Inhalt, nicht ein Rasterbaustein. Höhe gedeckelt, damit Querformate die Kaufspalte nicht überragen. ⚠️ Im KACHELRASTER bleibt 4:5 (gleiche Reihenhöhen sind dort Pflicht) — aber WooCommerce schneidet die Dateien seit 22.10. selbst auf 4:5 (`woocommerce_thumbnail_cropping = custom 4:5`), also beschneidet der Browser nicht mehr nach. */ .single-product .woocommerce-product-gallery__image img{ aspect-ratio:auto!important;object-fit:contain!important; width:100%;height:auto;max-height:78vh} .single-product .flex-control-thumbs{display:flex;gap:10px;margin:12px 0 0!important} .single-product .flex-control-thumbs li{width:72px!important;float:none!important;margin:0!important} .single-product .flex-control-thumbs img{border:1px solid var(--border);opacity:.6;transition:opacity .2s} .single-product .flex-control-thumbs img.flex-active,.single-product .flex-control-thumbs img:hover{opacity:1;border-color:var(--gruen-800)} .single-product .woocommerce-product-gallery__trigger{background:#fff!important;border:1px solid var(--border)!important;border-radius:0!important} /* Kaufspalte */ .single-product .summary{border:1px solid var(--border);background:#fff;padding:clamp(24px,2.6vw,40px); border-top:3px solid var(--gruen-800);box-shadow:var(--schatten-2)} .single-product .product_title{font-family:var(--font-display);font-weight:400;font-size:var(--s-h2)!important;line-height:1.1;color:var(--gruen-800)!important;margin:0 0 14px!important} .single-product .summary .price{font-family:var(--font-text);font-size:1.5rem!important;font-weight:500;color:var(--gruen-800)!important;margin:0 0 4px!important;display:flex;flex-wrap:wrap;align-items:baseline;gap:6px} .single-product .summary .price .amount{color:var(--gruen-800)!important} .single-product .summary .price .wc-gzd-additional-info,.single-product .summary .price .legal-price-info,.single-product .summary .price small{font-size:.8rem;font-weight:400;color:var(--text-muted)} .single-product .summary .legal-price-info,.single-product .summary .wc-gzd-additional-info:not(.price *){font-size:.8rem;color:var(--text-muted);margin:0 0 18px} .single-product .summary .legal-price-info a{color:var(--gold-700)} .single-product .woocommerce-product-details__short-description{font-size:var(--s-body);line-height:1.7;color:var(--text);margin:0 0 22px;padding-bottom:22px;border-bottom:1px solid var(--border)} .single-product .woocommerce-product-details__short-description p{margin:0} /* Varianten */ .single-product table.variations{margin:0 0 18px!important;border:0} .single-product table.variations th,.single-product table.variations td{padding:0 0 10px!important;border:0;display:block;text-align:left} .single-product table.variations th label{font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--text-muted);font-weight:500} .single-product table.variations select{width:100%;min-height:var(--tap);padding:0 40px 0 14px;border:1px solid var(--border);border-radius:0;background:#fff;color:var(--ink);font:400 1rem/1 var(--font-text);appearance:none; background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%23284F1C' d='M6 8 0 0h12z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;background-size:10px} .single-product .reset_variations{font-size:.8rem;color:var(--text-muted)} .single-product .woocommerce-variation-price .price{margin:6px 0 12px!important} /* Menge + Knopf */ .single-product form.cart{display:flex;flex-wrap:wrap;gap:10px;align-items:stretch;margin:0 0 20px!important} .single-product form.cart.variations_form{display:block} .single-product .woocommerce-variation-add-to-cart{display:flex;gap:10px;align-items:stretch} .single-product .quantity{margin:0!important;display:flex} .single-product .quantity input.qty{width:72px!important;min-height:var(--tap);border:1px solid var(--border);border-radius:0;font:500 1rem var(--font-text);color:var(--ink);text-align:center;padding:0 8px} .single-product .single_add_to_cart_button{flex:1;min-height:var(--tap)!important;padding:0 28px!important;border-radius:0!important; background:var(--gruen-800)!important;color:#fff!important;font:500 .9rem var(--font-text)!important;letter-spacing:.08em;text-transform:uppercase;transition:background .2s} .single-product .single_add_to_cart_button:hover{background:var(--gruen-900)!important} .single-product .single_add_to_cart_button.disabled{opacity:.5} /* Meta leise */ .single-product .product_meta{font-size:.8rem;color:var(--text-muted);padding-top:18px;border-top:1px solid var(--border);display:flex;flex-direction:column;gap:4px} .single-product .product_meta .sku_wrapper{display:none} .single-product .product_meta a{color:var(--gold-700);text-decoration:none} .single-product .product_meta a:hover{text-decoration:underline} /* Beschreibung ohne Tab-Kasten */ .single-product .woocommerce-tabs{grid-column:1;margin-top:clamp(24px,3vw,48px)} .single-product .woocommerce-tabs ul.tabs{display:none!important} .single-product .woocommerce-tabs .panel{padding:0!important;margin:0!important} .single-product .woocommerce-tabs .panel h2{font-family:var(--font-display);font-weight:400;font-size:var(--s-h3);color:var(--gruen-800);margin:0 0 14px} .single-product .woocommerce-tabs .panel p{font-size:var(--s-body);line-height:1.75;color:var(--text);max-width:var(--lese);margin:0 0 12px} /* Aehnliche Produkte */ .single-product .related.products{margin-top:var(--abstand-sektion);padding-top:var(--abstand-sektion);border-top:1px solid var(--border)} .single-product .related.products > h2{font-family:var(--font-display);font-weight:400;font-size:var(--s-h2);color:var(--gruen-800);margin:0 0 28px} @media (max-width:1023px){ .single-product div.product{grid-template-columns:1fr} .single-product div.product > .woocommerce-product-gallery,.single-product div.product > .summary,.single-product .woocommerce-tabs{grid-column:1 / -1} .single-product div.product > .summary{position:static}} @media (max-width:767px){ .single-product .site-main{padding-bottom:56px!important} .single-product .summary{padding:22px 18px;box-shadow:none} .single-product .woocommerce-product-gallery__wrapper{padding:0;border:0} .single-product .flex-control-thumbs{overflow-x:auto;scrollbar-width:none} .single-product .flex-control-thumbs li{width:60px!important;flex:0 0 auto}} .single-product table.variations,.single-product table.variations tbody,.single-product table.variations tr, .single-product table.variations th,.single-product table.variations td{background:transparent!important;border:0!important} .single-product table.variations tr{display:block;margin-bottom:12px} .single-product .summary .price .wc-gzd-additional-info{display:none} /* steht darunter schon einmal */ .single-product .summary .legal-price-info{margin-bottom:18px;display:block} /* ══ Birgit & Sonja (24.09.): eine Ausrichtung, ein Rhythmus ══════════ Vorher drei zentrierte Ueberschriften ueber linksbuendigem Text. Jetzt alles links, Foto und Text vertikal mittig, Foto mit Kartenrahmen. */ .elementor-page-45 .elementor-element-31e7339 .elementor-heading-title, .elementor-page-45 .elementor-element-31e7339 .elementor-widget-heading, .elementor-page-45 .elementor-element-31e7339 .elementor-widget-text-editor, .elementor-page-45 .elementor-element-31e7339 .elementor-widget-button .elementor-button-wrapper{text-align:left!important} .elementor-page-45 .elementor-element-31e7339 .elementor-widget-text-editor p{margin:0 0 14px;line-height:1.72} .elementor-page-45 .elementor-element-31e7339 .elementor-widget-text-editor p:last-child{margin:0} .elementor-page-45 .elementor-element-31e7339 .elementor-widget-button{margin-top:10px} .elementor-page-45 .elementor-element-946c4ad img{border:1px solid var(--border);padding:12px;background:#fff;box-sizing:border-box;width:100%} .elementor-page-45 .elementor-element-f6ad7e7{align-items:center!important} @media (max-width:767px){.elementor-page-45 .elementor-element-743364c .elementor-button{width:100%;white-space:normal;padding-left:12px;padding-right:12px;font-size:.8rem}} /* ══ INFO-KARTE = eine Karte auf allen Unterseiten (24.09.) ═══════════ Trauer/Hotels/Abo/Ueber-uns (.bs-kbild/.bs-k-titel/.bs-k-text) und Hochzeit (.hz-kbild/.hz-k-titel/.hz-k-text) sahen aus wie lose Bilder mit zentrierter Ueberschrift ueber linksbuendigem Text. Jetzt dieselbe Kartensprache wie Produkt- und Leistungskarten: Rahmen, Innenrand, alles links. KEIN Hover — die Karten fuehren nirgendwohin. ═════════════════════════════════════════════════════════════════════ */ .e-con:has(> .bs-kbild), .e-con:has(> .hz-kbild){ background:#fff;border:1px solid var(--border);padding:12px 12px 22px!important; box-shadow:var(--schatten-1);align-items:flex-start!important;gap:0!important} .bs-kbild,.hz-kbild,.elementor-22 .hz-kbild{width:100%!important;margin:0 0 16px!important} .bs-kbild img,.hz-kbild img,.elementor-22 .hz-kbild img{height:auto!important;aspect-ratio:4/3;object-fit:cover;width:100%!important;transition:none!important} .bs-k-titel,.hz-k-titel,.bs-k-text,.hz-k-text{width:100%!important;padding:0 8px!important;text-align:left!important} .bs-k-titel .elementor-heading-title,.hz-k-titel .elementor-heading-title,.elementor-22 .hz-k-titel .elementor-heading-title{ text-align:left!important;margin:0 0 8px!important;font-size:var(--s-h3)!important} .bs-k-text p,.hz-k-text p,.hz-k-text,.elementor-22 .hz-k-text{text-align:left!important;max-width:none!important;margin:0} /* Galerie-Kacheln (Hochzeit „Drei Braeute", „Paare") bleiben Bilder ohne Karte, aber mit Innenrand-Rahmen wie das Hero-Foto */ .elementor-22 .hz-hoch img{border:1px solid var(--border);padding:10px;background:#fff;box-sizing:border-box} @media (max-width:767px){ .e-con:has(> .bs-kbild), .e-con:has(> .hz-kbild){padding:8px 8px 18px!important}} /* ══ Oeffnungszeiten-Tabelle (24.09.): Widget war 305 px schmal (Container align-items:center) und das Theme legte Zebra-Streifen drueber. */ .bs-zeitentabelle{width:100%!important;max-width:560px!important} table.bs-zeiten{max-width:none;margin:0;width:100%} table.bs-zeiten tbody > tr > td, table.bs-zeiten tbody > tr > th, table.bs-zeiten tr:nth-child(2n+1) > td, table.bs-zeiten tr:nth-child(2n+1) > th{background:transparent!important} table.bs-zeiten th{text-align:left;font:500 1rem var(--font-text);color:var(--gruen-800);padding:13px 0;border-bottom:1px solid var(--border);width:40%} table.bs-zeiten td{font:400 1rem var(--font-text);white-space:nowrap;border-bottom:1px solid var(--border)} table.bs-zeiten, table.bs-zeiten th, table.bs-zeiten td{border-left:0!important;border-right:0!important;border-top:0!important} /* ══ BEWEGUNG (24.09.) — ein Vokabular fuer die ganze Seite ═══════════ 1. Reveal: Elemente kommen 18 px von unten, 0->1, 700 ms, gestaffelt (Snippet 732 setzt .bs-reveal/.bs-in). Ohne JS oder bei reduced-motion: alles sofort sichtbar. 2. Nav: Goldstrich waechst von links unter dem Menuepunkt. 3. Hover-Standard: Karten MIT Link heben sich 2 px + Schatten + Bild-Zoom 1.045/.8s. Buttons: Farbwechsel, kein Springen. ═════════════════════════════════════════════════════════════════════ */ .bs-reveal{opacity:0;transform:translateY(18px);transition:opacity .7s cubic-bezier(.2,.7,.2,1) var(--bs-d,0ms),transform .7s cubic-bezier(.2,.7,.2,1) var(--bs-d,0ms);will-change:opacity,transform} .bs-reveal.bs-in{opacity:1;transform:none} .bs-no-reveal .bs-reveal{opacity:1;transform:none;transition:none} @media (prefers-reduced-motion:reduce){.bs-reveal{opacity:1;transform:none;transition:none}} .elementor-location-header .elementor-nav-menu--main .elementor-item{position:relative} .elementor-location-header .elementor-nav-menu--main .elementor-item:after{ content:"";position:absolute;left:0;right:auto;bottom:6px!important;height:2px;width:0; background:var(--gold-500)!important;transition:width .35s cubic-bezier(.2,.7,.2,1);transform:none!important;opacity:1!important} .elementor-location-header .elementor-nav-menu--main .elementor-item:hover:after, .elementor-location-header .elementor-nav-menu--main .elementor-item.elementor-item-active:after, .elementor-location-header .elementor-nav-menu--main .elementor-item:focus-visible:after{width:100%} .elementor-location-header .elementor-item{transition:color .25s} /* Buttons: keine Spruenge, nur Farbe + Schatten */ .elementor-button,.woocommerce .button,.single_add_to_cart_button{transition:background-color .22s,color .22s,border-color .22s,box-shadow .22s!important} .elementor-button:hover,.woocommerce .button:hover{transform:none!important} /* Anlass-Kacheln im Picker: Bild-Zoom wie ueberall */ .e-atomic-element a.e-flexbox:hover img, a.e-flexbox:hover img{transform:scale(1.045)} @media (max-width:360px){ /* Kopf bei 320: Warenkorb-Preis weg, nur Icon+Zahl (Ueberlauf 332>320 gemessen) */ .elementor-location-header .elementor-menu-cart__toggle .elementor-button{padding-left:10px;padding-right:10px;min-height:42px} .elementor-location-header .elementor-menu-cart__toggle .elementor-button-text{display:none} .elementor-location-header .e-con-inner,.elementor-location-header .e-con{padding-left:12px!important;padding-right:12px!important}} @media (max-width:1023px){ /* Produktseite: Woo setzt width:48% + float; unter 1024 volle Breite, min-width 0 (Ueberlauf 364>320 gemessen) */ .single-product div.product{grid-template-columns:minmax(0,1fr)} .single-product div.product > .woocommerce-product-gallery,.single-product div.product > .summary{width:100%!important;max-width:100%!important;min-width:0;box-sizing:border-box} .single-product .site-main{overflow-x:clip}} @media (max-width:420px){.single-product .woocommerce-variation-add-to-cart,.single-product form.cart{flex-wrap:wrap} .single-product .single_add_to_cart_button{flex:1 1 100%;width:100%;padding:0 12px!important;font-size:.82rem!important;white-space:normal} .single-product .quantity{width:100%}.single-product .quantity input.qty{width:100%!important}} /* Hochzeit Video-Section: Bluete rechts, Text links auf dunklem Gruen */ .elementor-22 .elementor-element-f3600b4 .elementor-background-video-container video{object-position:78% 50%} .elementor-22 .elementor-element-f3600b4{align-items:flex-start!important} .elementor-22 .elementor-element-f3600b4 > .e-con-inner,.elementor-22 .elementor-element-f3600b4 > .elementor-widget{max-width:640px;margin-left:0;align-items:flex-start;text-align:left} .elementor-22 .elementor-element-f3600b4 .elementor-heading-title,.elementor-22 .elementor-element-f3600b4 p{text-align:left!important} @media (min-width:1024px){.elementor-22 .elementor-element-f3600b4{padding-left:max(var(--rand),calc((100% - var(--container)) / 2 + 24px))!important}} .elementor-22 .elementor-element-f3600b4 > .elementor-background-overlay, .elementor-22 .elementor-element-f3600b4::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none; background:linear-gradient(90deg,rgba(18,26,14,.86) 0%,rgba(18,26,14,.72) 40%,rgba(18,26,14,.22) 100%)!important;opacity:1!important} .elementor-22 .elementor-element-f3600b4 > *:not(.elementor-background-video-container):not(.elementor-background-overlay){position:relative;z-index:2} /* ══ KORREKTURRUNDE 24.09. (Chris, iPhone) ═══════════════════════════ */ /* 2 Mobilmenü: Vollbreite statt Toggle-Breite */ @media (max-width:1024px){ /* 10.11.2026: nur das Panel selbst (nav), NICHT die ul.sub-menu darin. Die trugen dieselbe Klasse, wurden dadurch ebenfalls position:fixed, fielen aus dem Panel und wurden abgeschnitten. */ .elementor-location-header nav.elementor-nav-menu--dropdown{position:fixed!important;left:0!important;right:0!important;width:100vw!important;max-width:100vw!important; top:var(--bs-kopf-h,138px);background:#fff;box-shadow:0 18px 40px rgba(0,0,0,.12);padding:8px 0 16px;z-index:9999} .elementor-location-header .elementor-nav-menu--dropdown a{display:block;padding:16px var(--rand,20px)!important;font-size:1.05rem;border-bottom:1px solid #EEE8DF} .elementor-location-header .elementor-nav-menu--dropdown li:last-child a{border-bottom:0} .elementor-location-header nav.elementor-nav-menu--dropdown ul.sub-menu{ position:static!important;width:100%!important;min-width:0!important;max-width:none!important; margin:0!important;box-shadow:none!important;background:#FBF8F3!important; transform:none!important;left:auto!important;top:auto!important} .elementor-location-header nav.elementor-nav-menu--dropdown ul.sub-menu a{ padding-left:calc(var(--rand,20px) + 18px)!important;font-size:.98rem} .elementor-location-header .elementor-menu-toggle.elementor-active + nav.elementor-nav-menu--dropdown{ max-height:calc(100vh - var(--bs-kopf-h,138px))!important; max-height:calc(100dvh - var(--bs-kopf-h,138px))!important; overflow-y:auto!important;overscroll-behavior:contain;-webkit-overflow-scrolling:touch} } /* 3 V3-Seiten: mobil derselbe Seitenrand wie die Startseite; Bildkarten bleiben im Rand */ @media (max-width:767px){ main .e-con.e-parent:not(.e-con-full-mobile){padding-left:var(--rand,20px)!important;padding-right:var(--rand,20px)!important} main .e-con.e-parent > .e-con-inner{padding-left:0!important;padding-right:0!important} main .e-con .elementor-widget-image img,main .bs-kbild,main .hz-kbild{max-width:100%} main .e-con.e-parent > .e-con-inner > .e-con,main .e-con.e-parent > .e-con{margin-left:0!important;margin-right:0!important;width:auto!important;max-width:100%!important} } /* 4 Reveal: nie Inhalt verstecken, wenn der Observer nicht feuert (iOS) */ .bs-reveal{opacity:1;transform:none} html.bs-reveal-ok .bs-reveal{opacity:0;transform:translateY(18px)} html.bs-reveal-ok .bs-reveal.bs-in{opacity:1;transform:none} /* Shop: Filter-Tap lädt neu → Anker #produkte, damit die neue Seite beim Ergebnis öffnet. Sprungziel sitzt unter dem fixen Kopf. Aktiver Filter: Pille grün. */ #produkte{scroll-margin-top:calc(var(--bs-kopf-h,138px) + 12px)} html{scroll-behavior:auto} .bs-pille[aria-current=page],.bs-pille.ist-aktiv{background:#284F1C;color:#fff;border-color:#284F1C} @media (max-width:767px){.bs-details{margin-top:14px}.bs-summary{font-size:.95rem}} /* ══ KEN BURNS auf allen Standbild-Heros (24.09., Auftrag Chris) ═══════ EINE Bildebene: Container-Hintergrund aus, ::before trägt das Foto und zoomt langsam (26 s, hin und zurück). Kein Overlay-Doppel → kein Kaleidoskop. Zoom-Zentrum je Motiv (Hochzeit: Braut rechts, Wand links bleibt für den Text). */ @keyframes bs-kenburns{from{transform:scale(1) translate3d(0,0,0)}to{transform:scale(1.10) translate3d(-1.2%,-0.8%,0)}} .elementor-22 .elementor-element-e1ea79a{position:relative;overflow:hidden;isolation:isolate;background-image:none!important} .elementor-22 .elementor-element-e1ea79a::before{content:"";position:absolute;inset:0;z-index:-1;background:url("https://blumenstadl.at/wp-content/uploads/2026/09/hz-hero-braut.jpg") 78% 50%/cover no-repeat;transform-origin:78% 50%;animation:bs-kenburns 26s ease-in-out infinite alternate;will-change:transform;backface-visibility:hidden} .elementor-23 .elementor-element-71e487a{position:relative;overflow:hidden;isolation:isolate;background-image:none!important} .elementor-23 .elementor-element-71e487a::before{content:"";position:absolute;inset:0;transform-origin:68% 22%;z-index:-1;background:url("https://blumenstadl.at/wp-content/uploads/2026/09/tr-kranz-holzwand.jpg") 68% 22%/cover no-repeat;transform-origin:50% 55%;animation:bs-kenburns 26s ease-in-out infinite alternate;will-change:transform;backface-visibility:hidden} .elementor-24 .elementor-element-f6bc12f{position:relative;overflow:hidden;isolation:isolate;background-image:none!important} .elementor-24 .elementor-element-f6bc12f::before{content:"";position:absolute;inset:0;z-index:-1;background:url("https://blumenstadl.at/wp-content/uploads/2026/09/ho-tischschmuck.jpg") 50% 50%/cover no-repeat;transform-origin:50% 50%;animation:bs-kenburns 26s ease-in-out infinite alternate;will-change:transform;backface-visibility:hidden} .elementor-26 .elementor-element-ce23d50{position:relative;overflow:hidden;isolation:isolate;background-image:none!important} .elementor-26 .elementor-element-ce23d50::before{content:"";position:absolute;inset:0;z-index:-1;background:url("https://blumenstadl.at/wp-content/uploads/2026/09/ub-werkstatt.jpg") 50% 45%/cover no-repeat;transform-origin:50% 45%;animation:bs-kenburns 26s ease-in-out infinite alternate;will-change:transform;backface-visibility:hidden} .elementor-27 .elementor-element-c1784af{position:relative;overflow:hidden;isolation:isolate;background-image:none!important} .elementor-27 .elementor-element-c1784af::before{content:"";position:absolute;inset:0;z-index:-1;background:url("https://blumenstadl.at/wp-content/uploads/2026/09/ub-laden-weit.jpg") 50% 50%/cover no-repeat;transform-origin:50% 50%;animation:bs-kenburns 26s ease-in-out infinite alternate;will-change:transform;backface-visibility:hidden} @media (prefers-reduced-motion:reduce){[class*="elementor-element-"]::before{animation:none!important}} /* Ken Burns: Overlay als ::after ÜBER dem Foto (Elementors Overlay-Div lag unter dem ::before). Hochzeit keins. */ .elementor-23 .elementor-element-71e487a::after{content:"";position:absolute;inset:0;z-index:0;background:rgba(20,28,18,.64);pointer-events:none} .elementor-24 .elementor-element-f6bc12f::after{content:"";position:absolute;inset:0;z-index:0;background:linear-gradient(180deg,rgba(26,22,18,.62),rgba(26,22,18,.48));pointer-events:none} .elementor-26 .elementor-element-ce23d50::after{content:"";position:absolute;inset:0;z-index:0;background:rgba(26,22,18,.52);pointer-events:none} .elementor-27 .elementor-element-c1784af::after{content:"";position:absolute;inset:0;z-index:0;background:rgba(26,22,18,.56);pointer-events:none} .elementor-23 .elementor-element-71e487a > *,.elementor-24 .elementor-element-f6bc12f > *,.elementor-26 .elementor-element-ce23d50 > *,.elementor-27 .elementor-element-c1784af > *{position:relative;z-index:1} .elementor-23 .elementor-element-71e487a > .elementor-background-overlay,.elementor-24 .elementor-element-f6bc12f > .elementor-background-overlay,.elementor-26 .elementor-element-ce23d50 > .elementor-background-overlay,.elementor-27 .elementor-element-c1784af > .elementor-background-overlay{display:none} /* Trauer-Hero: Text links, Kranz rechts frei; Overlay als Verlauf von links */ .elementor-23 .elementor-element-71e487a::after{background:linear-gradient(90deg,rgba(20,28,18,.82) 0%,rgba(20,28,18,.62) 45%,rgba(20,28,18,.18) 100%)!important} @media (min-width:1024px){ .elementor-23 .elementor-element-71e487a{align-items:flex-start!important;padding-left:max(var(--rand),calc((100% - var(--container)) / 2 + 24px))!important} .elementor-23 .elementor-element-71e487a > .e-con-inner,.elementor-23 .elementor-element-71e487a > .elementor-widget{max-width:600px;margin-left:0;align-items:flex-start;text-align:left} .elementor-23 .elementor-element-71e487a .elementor-heading-title,.elementor-23 .elementor-element-71e487a p{text-align:left!important} .elementor-23 .elementor-element-71e487a .elementor-widget-button .elementor-button-wrapper{text-align:left}} /* Trauer + Über uns: Video ist die Bildebene, Ken-Burns-Foto nur noch mobil (Video dort aus) */ @media (min-width:768px){.elementor-23 .elementor-element-71e487a::before,.elementor-26 .elementor-element-ce23d50::before{display:none}} .elementor-23 .elementor-element-71e487a,.elementor-26 .elementor-element-ce23d50{isolation:auto} .elementor-23 .elementor-element-71e487a .elementor-background-video-container,.elementor-26 .elementor-element-ce23d50 .elementor-background-video-container{z-index:0} .elementor-23 .elementor-element-71e487a::after,.elementor-26 .elementor-element-ce23d50::after{z-index:1} .elementor-23 .elementor-element-71e487a > *:not(.elementor-background-video-container),.elementor-26 .elementor-element-ce23d50 > *:not(.elementor-background-video-container){z-index:2} .elementor-23 .elementor-element-71e487a .elementor-background-video-container video{object-position:68% 22%} .elementor-23 .elementor-element-71e487a .elementor-background-video-container,.elementor-26 .elementor-element-ce23d50 .elementor-background-video-container{animation:bs-kenburns 26s ease-in-out infinite alternate;transform-origin:68% 22%} /* Video-Container muss absolut bleiben (die Ken-Burns-Regel „Kinder relativ" hatte ihn auf 0 px gedrückt) */ .elementor-23 .elementor-element-71e487a > .elementor-background-video-container,.elementor-26 .elementor-element-ce23d50 > .elementor-background-video-container{position:absolute!important;inset:0;z-index:0!important;overflow:hidden} /* Über uns: Text links, Birgit bleibt rechts im Bild */ .elementor-26 .elementor-element-ce23d50 > .elementor-background-video-container{left:0!important;right:auto!important;width:130%!important;transform-origin:0 50%} .elementor-26 .elementor-element-ce23d50 > .elementor-background-video-container video{object-fit:cover;object-position:50% 50%} .elementor-26 .elementor-element-ce23d50::after{background:linear-gradient(90deg,rgba(26,22,18,.80) 0%,rgba(26,22,18,.55) 48%,rgba(26,22,18,.15) 100%)!important} @media (min-width:1024px){ .elementor-26 .elementor-element-ce23d50{align-items:flex-start!important;padding-left:max(var(--rand),calc((100% - var(--container)) / 2 + 24px))!important} .elementor-26 .elementor-element-ce23d50 > .e-con-inner,.elementor-26 .elementor-element-ce23d50 > .elementor-widget{max-width:600px;margin-left:0;align-items:flex-start;text-align:left} .elementor-26 .elementor-element-ce23d50 .elementor-heading-title,.elementor-26 .elementor-element-ce23d50 p{text-align:left!important}} /* ══ EBENEN-SYSTEM (24.09., Chris: „wenn das Ding Schatten wirft, muss alles Schatten werfen") ═══ Drei Ebenen, drei Schatten — überall dieselben: --schatten-1 liegt auf der Seite (Produktkarte, Info-Karte, Kachel) --schatten-2 schwebt (Picker-Karte, Kaufmodul, Filter-Box, Menü) --schatten-3 hover / gehoben */ :root{ --schatten-1:0 1px 2px rgba(26,10,15,.05),0 6px 18px -6px rgba(26,10,15,.14); --schatten-2:0 2px 4px rgba(26,10,15,.06),0 24px 56px -16px rgba(26,10,15,.30); --schatten-3:0 4px 8px rgba(26,10,15,.06),0 32px 64px -20px rgba(26,10,15,.36); } /* Ebene 2: schwebende Boxen */ .elementor-page-45 .elementor-element-ac4d793{box-shadow:var(--schatten-2)!important} .single-product div.product > .summary{box-shadow:var(--schatten-2)} .bs-details{box-shadow:var(--schatten-1);background:#fff} .elementor-location-header nav.elementor-nav-menu--dropdown{box-shadow:var(--schatten-2)!important} /* Ebene 1: Karten auf der Seite */ ul.products li.product,.bs-produkt, .elementor-page-45 .elementor-element-2a054a7 > .e-con, .bs-drei > .e-con-inner > .e-con:has(.bs-kbild),.bs-zwei > .e-con-inner > .e-con:has(.bs-kbild),.hz-dreier > .e-con-inner > .e-con:has(.hz-kbild),.hz-zweier > .e-con-inner > .e-con:has(.hz-kbild), .bs-drei > .e-con:has(.bs-kbild),.bs-zwei > .e-con:has(.bs-kbild),.hz-dreier > .e-con:has(.hz-kbild),.hz-zweier > .e-con:has(.hz-kbild), .bs-kachel,.elementor-page-45 .elementor-element-1ac2e0c .e-con:has(img){box-shadow:var(--schatten-1)} /* Ebene 3: alles, was einen Link hat, hebt sich beim Hover — und bleibt klickbar (kein transform auf dem Link selbst) */ @media (hover:hover){ ul.products li.product:hover,.bs-produkt:hover,.elementor-page-45 .elementor-element-2a054a7 > .e-con:hover,.bs-kachel:hover{box-shadow:var(--schatten-3);transition:box-shadow .3s ease} } /* Leistungs-Dreierreihe Startseite: Karten sind Links → gleiche Ebene wie Produktkarten */ .elementor-page-45 .elementor-element-2a054a7 > .e-con{transition:box-shadow .3s ease} /* Leistungs-Dreierreihe (2c887688): Karten = Ebene 1, Hover Ebene 3 */ .elementor-page-45 .elementor-element-68c6a36e > .e-con{box-shadow:var(--schatten-1);transition:box-shadow .3s ease} @media (hover:hover){.elementor-page-45 .elementor-element-68c6a36e > .e-con:hover{box-shadow:var(--schatten-3)}} /* ══ Rechtsseiten 28–33 (30.09.2026) ═══════════════════════════════════ Fliesstext-Layout fuer Impressum, Datenschutz, AGB, Ruecktritt, Versand, Zahlungsarten. Die Seiten tragen ein einzelnes HTML-Widget, aufgebaut von `website/rechtstexte_einbau.py` aus den Markdown-Quellen. Warum eigene Regeln: Die Klassen bs-rechts/bs-luecke/bs-warnung hatten bis zum 30.09. KEIN CSS — die Seiten rendern sonst als unformatierter Blocktext ohne Zeilenlaengenbegrenzung. Gemessen, nicht vermutet. Variablen kommen aus :root im Kit (gruen-800 usw.) und gelten global. Das Theme setzt die H1 selbst (.page-header .entry-title), deshalb beginnt der Inhalt hier bei H2. ═════════════════════════════════════════════════════════════════════ */ .bs-rechts{ max-width:72ch;margin-inline:auto; font:400 1rem/1.7 var(--font-text),Georgia,serif; color:var(--text,#3F3B36); padding:8px 24px 56px; -webkit-hyphens:auto;hyphens:auto; } .bs-rechts h2{ font:400 1.5rem/1.3 var(--font-display),Georgia,serif; color:var(--gruen-800,#284F1C); margin:2.2em 0 .5em; } .bs-rechts h2:first-child{margin-top:.6em} .bs-rechts h3{ font:600 1.08rem/1.4 var(--font-text),Georgia,serif; color:var(--gruen-900,#1B3712); margin:1.7em 0 .35em; } .bs-rechts h4{ font:600 1rem/1.4 var(--font-text),Georgia,serif; color:var(--text,#3F3B36);margin:1.4em 0 .3em; } .bs-rechts p{margin:0 0 1.05em} .bs-rechts ul,.bs-rechts ol{margin:0 0 1.2em;padding-inline-start:1.4em} .bs-rechts li{margin-bottom:.4em} .bs-rechts li::marker{color:var(--gold-700,#8A6A3B)} .bs-rechts strong{font-weight:600;color:var(--gruen-900,#1B3712)} .bs-rechts a{color:var(--gruen-600,#2F7D45);text-underline-offset:2px} .bs-rechts a:hover{color:var(--gruen-800,#284F1C)} .bs-rechts code{ font-size:.92em;background:var(--creme,#F9F3EB); padding:1px 5px;border-radius:3px; } /* Tabellen (Versandzonen, Datenkategorien) — mobil scrollbar statt gequetscht */ .bs-rechts .bs-tabelle{overflow-x:auto;margin:0 0 1.4em;-webkit-overflow-scrolling:touch} .bs-rechts table{border-collapse:collapse;width:100%;font-size:.94rem} .bs-rechts th,.bs-rechts td{ border:1px solid rgba(40,79,28,.16); padding:9px 11px;text-align:left;vertical-align:top; } .bs-rechts th{background:rgba(40,79,28,.055);font-weight:600;color:var(--gruen-900,#1B3712)} /* Offene Angabe: muss ins Auge springen, damit die Seite niemand fuer fertig haelt. Kein reines Rot — Farbe allein darf nicht die einzige Information sein, deshalb zusaetzlich Rahmen und Vorsatz. */ .bs-rechts .bs-luecke{ background:#FFF4D6;color:#7A4B00; border:1px solid #D9A400;border-radius:3px; padding:1px 6px;font-weight:600; } .bs-rechts .bs-luecke::before{content:"offen: "} .bs-rechts .bs-warnung{ background:#FFF4D6;border-inline-start:4px solid #D9A400; padding:14px 18px;margin:0 0 1.8em;border-radius:4px; font-size:.95rem; } .bs-rechts .bs-rechts__fuss{ margin-top:2.6em;padding-top:1.1em; border-top:1px solid rgba(40,79,28,.14); font-size:.86rem;color:var(--text-muted,#6B6560); } /* Matomo-Opt-out (Datenschutz 29, unter dem Text als Shortcode-Widget). Das Markup kommt vom Plugin ueber do_shortcode() und landet in Elementors .elementor-shortcode - wir duerfen es nicht umbauen, nur umrahmen. Die Checkbox wird auf 22 px vergroessert: das Standard-Kaestchen ist ~13 px und damit unter jeder brauchbaren Tapgroesse. Tapziel ist das Label, das sie ganzflaechig mitnimmt (44 px Mindesthoehe). */ .bs-optout-kopf{padding-bottom:0} .bs-optout-kopf h2{margin-bottom:.5em} .elementor-widget-shortcode .elementor-shortcode{ background:#fff;border:1px solid rgba(40,79,28,.18); border-radius:6px;padding:18px 20px; margin:0 auto 2.4em;max-width:72ch; box-shadow:var(--schatten-1,0 1px 2px rgba(27,55,18,.06)); font-size:.96rem;line-height:1.65; } .elementor-widget-shortcode .elementor-shortcode form{ margin:0;display:flex;align-items:flex-start;gap:12px; } .elementor-widget-shortcode .elementor-shortcode input[type=checkbox]{ position:static;opacity:1;pointer-events:auto; width:22px;height:22px;min-width:22px;margin:2px 0 0; accent-color:var(--gruen-800,#284F1C);cursor:pointer; } .elementor-widget-shortcode .elementor-shortcode label{ display:flex;align-items:center;min-height:44px; cursor:pointer;font-weight:400;line-height:1.5; } .elementor-widget-shortcode .elementor-shortcode label strong{font-weight:400} .elementor-widget-shortcode .elementor-shortcode p{margin:0 0 .8em} .elementor-widget-shortcode .elementor-shortcode p:last-child{margin-bottom:0} .elementor-widget-shortcode .elementor-shortcode noscript p{ color:var(--text-muted,#6B6560); } @media(max-width:600px){ .bs-rechts{padding:4px 18px 44px;font-size:.98rem} .bs-rechts h2{font-size:1.32rem} /* Tabellen mobil: nicht die Woerter brechen, sondern die Tabelle breiter werden lassen und horizontal scrollen. Sonst entsteht "Kos-ten" und "Lieferge-biet" (gemessen 390 px, 30.09.). */ .bs-rechts table{min-width:460px;font-size:.88rem} .bs-rechts th,.bs-rechts td{hyphens:none;padding:8px 10px} .bs-rechts .bs-tabelle{ margin-inline:-18px;padding-inline:18px; scroll-snap-type:x proximity; } } /* ══════════════════════════════════════════════════════════════════════════ Warenkorb 9 · Kasse 10 · Mein Konto 11 — Woo-Blocks auf die Blumenstadl- Tokens ziehen. (22.10.2026) AUSGANGSLAGE, gemessen im Browser und nicht geschaetzt: 1. ⛔ Hello Elementor `reset.css` faerbt JEDEN Link und JEDEN Button `#cc3366` — ein Pink, das in keinem Token des Projekts vorkommt. Belegt: `a { color: rgb(204,51,102) }` und `[type=submit], button { border:1px solid rgb(204,51,102); color:… }`. Auf den Elementor-Seiten faellt das nie auf, weil dort jedes Element eine eigene Regel hat. Warenkorb und Kasse sind native Woo-Blocks — dort schlaegt der Theme-Reset voll durch. Deshalb standen Produktnamen pink-unterstrichen und „Jetzt kaufen" an der Kasse als pinker Umriss. 2. ⛔ `theme.css` setzt `.alignwide { margin-inline:-80px }`. Der Woo- Cart-Block traegt `alignwide`. Bei 390 px beginnt er dadurch bei x = −70 px: „Gutscheine hinzufuegen", „Zwischensumme" und „Versandkostenpauschale" waren links aus dem Bild geschnitten. Das ist kein Geschmack, das ist eine unbenutzbare Seite am Telefon. 3. Der Kaufen-Knopf stand auf `#32373c` (Woo-Grau) mit `text-decoration: underline` — grau unterstrichener Text auf dunklem Grund. 4. Alles stand auf 13 px, die Zeilen klebten ohne Trenner aufeinander, Bilder waren `object-fit: fill` (Motive verzerrt, 64 px quadratisch aus Hochformaten gequetscht). REGELN, die hier gelten: - Warenkorb/Kasse/Konto bleiben native Woo-Templates, NUR Token-CSS (STAND.md „Nicht anfassen"). Kein Markup-Umbau, keine Shortcodes. - ⛔ Keine Bewegung auf Warenkorb und Kassa (BEWEGUNGSREGELN R3): ausschliesslich Farb-/Rahmen-Uebergaenge auf Hover, nichts Selbstlaufendes. - Selektoren haengen an Woos eigenen `wc-block-*`-Klassen, nie an Element-Hashes (R7). ══════════════════════════════════════════════════════════════════════════ */ /* ── 1. Der Theme-Reset wird NUR dort zurueckgenommen, wo er sichtbar wird ─ Bewusst eng gefasst. Ein globales `a{color:…}` haette die Elementor- Seiten mitgenommen, wo die Farben stimmen. ⚠️ Gegenprobe, die eine Ueberreaktion verhindert hat: auf der Shop-Seite melden 26 Elemente `color: #cc3366`. Sichtbar pink sind davon **zwei** — bei allen anderen traegt ein Kindelement den Text mit eigener Farbe. Gezaehlt wurden deshalb nur Elemente mit eigenem Textknoten. Eine Farbe am `` ist noch kein pinker Text. */ .woocommerce-cart .wp-block-woocommerce-cart a, .woocommerce-checkout .wp-block-woocommerce-checkout a, .woocommerce-account .woocommerce a:not(.button), .bs-fagg a, .eu-owb-order-withdraw-from-contract-button a, .elementor-menu-cart__product-name a, .skip-link{ color:var(--gruen-800,#284F1C); text-decoration-color:rgba(40,79,28,.35); text-underline-offset:3px; transition:color .15s ease,text-decoration-color .15s ease; } .woocommerce-cart .wp-block-woocommerce-cart a:hover, .woocommerce-checkout .wp-block-woocommerce-checkout a:hover, .woocommerce-account .woocommerce a:not(.button):hover, .bs-fagg a:hover, .eu-owb-order-withdraw-from-contract-button a:hover, .elementor-menu-cart__product-name a:hover, .skip-link:focus{ color:var(--gruen-900,#1B3712); text-decoration-color:var(--gruen-900,#1B3712); } /* Der § 13a-FAGG-Knopf „Vertrag widerrufen" kam vom Theme-Reset als pinker Textlink. Er ist eine Pflichtschaltflaeche und soll wie eine aussehen — aber leise: er ist kein Kaufknopf. ⛔ Beinahe-Fehler, deshalb notiert: die erste Fassung gab ihm cremefarbenen Text, weil er im Screenshot unter dem dunklen Fuss stand. Gemessen steht er auf **weiss** (`body`, y = 2417 auf der Kasse) bzw. auf `#E9E6ED` (Seite 804). Creme auf Weiss waere ein unsichtbarer Knopf gewesen — exakt die Falle vom 19.10. (Creme auf Creme im dunklen Band). **Vor jeder Textfarbe den echten Hintergrund messen, nicht den vermuteten.** */ .eu-owb-order-withdraw-from-contract-button .button, .eu-owb-order-withdraw-from-contract-button a.button{ display:inline-flex;align-items:center;justify-content:center; min-height:44px;padding:0 22px; background:transparent!important; border:1px solid rgba(40,79,28,.4)!important; border-radius:0!important; color:var(--gruen-800,#284F1C)!important; text-decoration:none!important; font:500 .82rem/1 var(--font-text,Outfit),sans-serif!important; letter-spacing:.09em;text-transform:uppercase; transition:background-color .22s ease,border-color .22s ease,color .22s ease!important; } .eu-owb-order-withdraw-from-contract-button .button:hover, .eu-owb-order-withdraw-from-contract-button a.button:hover{ background:var(--gruen-800,#284F1C)!important; border-color:var(--gruen-800,#284F1C)!important; color:#fff!important; } /* ── 2. Der Ueberlauf am Telefon ────────────────────────────────────────── `.alignwide` zieht den Block 80 px nach links aus dem Satzspiegel. Am Desktop ist das gewollt (breitere Tabelle), unter 1100 px ist es ein Beschnitt. Statt die Theme-Regel global zu loeschen — sie gilt auch fuer andere Inhalte — wird sie hier nur fuer die Kassenblocks neutralisiert. */ .wp-block-woocommerce-cart.alignwide, .wp-block-woocommerce-checkout.alignwide{ margin-inline:0; } @media(min-width:1200px){ /* Oberhalb des Satzspiegels darf der Block wieder atmen — aber symmetrisch und nur so weit, wie der Rahmen es traegt. */ .wp-block-woocommerce-cart.alignwide, .wp-block-woocommerce-checkout.alignwide{margin-inline:-40px} } /* ── 3. Seitenkopf: der Ruecktrittshinweis ist Pflichttext, kein Fliesstext ─ Er steht nach § 18 Abs. 1 Z 3/Z 4 FAGG vor dem Kaufen-Knopf und wurde bisher als nackter Absatz direkt unter die H1 geworfen. Als ruhige Creme-Kachel mit Goldkante liest er sich als das, was er ist: ein Hinweis, kein Einleitungstext. Lesbarkeit gegen Creme geprueft. ⚠️ Der Text sitzt in `div.bs-fagg` (aus `post_content` von 9 und 10), NICHT in einem `

` — die erste Fassung dieser Regel hing deshalb an nichts. Im DOM gemessen, nicht angenommen. */ .bs-fagg{ background:var(--creme,#F9F3EB); border-left:3px solid var(--gold-500,#C9A87C); border-radius:0 4px 4px 0; padding:16px 20px; margin:0 0 32px; font:400 .95rem/1.6 var(--font-text,Outfit),sans-serif; color:var(--text,#3F3B36); max-width:none; } /* ── 4. Produkttabelle ────────────────────────────────────────────────────── */ /* Kopfzeile: als Eyebrow lesen, nicht als Ueberschrift */ .wc-block-cart-items__header{ font:500 .72rem/1 var(--font-text,Outfit),sans-serif!important; letter-spacing:.14em!important; text-transform:uppercase; color:var(--text-muted,#6B6560)!important; border-bottom:1px solid var(--border,#E3DCD2); padding-bottom:12px; } /* Zeilen bekommen Luft und einen echten Trenner. ⚠️ Spezifitaet: Woos `cart.css` setzt `table.wc-block-cart-items td {border:0}` (0,0,2,2) und schlaegt damit jede einfache Klassenregel. Deshalb wird der Tabellenname mitgeschrieben. Gemessen, nicht geraten — die erste Fassung meldete im Browser `border-bottom-width: 0px`. */ table.wc-block-cart-items .wc-block-cart-items__row > td{ border-bottom:1px solid var(--border,#E3DCD2)!important; padding-top:22px;padding-bottom:22px; } table.wc-block-cart-items .wc-block-cart-items__row:last-child > td{ border-bottom:0!important; } /* Bilder: 80 px, `cover` statt `fill`. ⛔ `fill` quetscht Hochformate — bei Blumenbildern ist das sichtbar, die Straeusse waren gestaucht. ⚠️ `width` am `` allein reicht NICHT: Theme-Reset und `woocommerce-layout.css` setzen beide `img{max-width:100%}`, und die Bildzelle ist nur 81 px breit — das Bild wurde auf 64,9 px gekappt und lief oval. Deshalb wird die Zelle mitbemasst und `max-width` gelöst. */ .wc-block-cart-item__image{ width:96px!important;padding-right:16px!important; } .wc-block-cart-item__image img{ width:80px!important;height:80px!important;max-width:none!important; object-fit:cover;border-radius:4px; border:1px solid var(--border,#E3DCD2); background:var(--creme,#F9F3EB); } /* Produktname: Markenschrift, Groesse eines Namens — nicht 13 px */ .wc-block-components-product-name{ font:400 1.05rem/1.3 var(--font-display,"Young Serif"),Georgia,serif!important; color:var(--gruen-800,#284F1C)!important; text-decoration:none!important; letter-spacing:-.01em; } .wc-block-components-product-name:hover{color:var(--gruen-900,#1B3712)!important} /* Kurzbeschreibung leise, auf zwei Zeilen begrenzt. Der Abschnitt ist Beiwerk — er darf den Namen nicht ueberstimmen. */ .wc-block-components-product-metadata__description{ color:var(--text-muted,#6B6560)!important; font-size:.82rem!important;line-height:1.5!important; margin-top:4px; } .wc-block-components-product-metadata__description p{ display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical; overflow:hidden;margin:0; } /* Preise: tabellarische Ziffern, damit Spalten untereinander fluchten */ .wc-block-components-product-price, .wc-block-cart-item__total, .wc-block-components-totals-item__value{ font-variant-numeric:tabular-nums; } .wc-block-cart-item__total .wc-block-components-product-price__value{ font:500 1.02rem/1.3 var(--font-text,Outfit),sans-serif!important; color:var(--text,#3F3B36)!important; } .wc-block-cart-item__prices .wc-block-components-product-price__value{ color:var(--text-muted,#6B6560)!important;font-size:.88rem!important; } /* Mengenwaehler: 48 px Tapziel (--tap), Ziffer mittig und lesbar. ⛔ FALLE, die hier zugebissen hat und fuer JEDES Kit-CSS gilt: Elementor ersetzt im Kit-Custom-CSS das Platzhalterwort (`s`+`elector`) durch den Kit-Scope. Aus Woos Klasse `…quantity-s`+`elector` wurde auf dem Server woertlich `.wc-block-components-quantity-.elementor-kit-16` — ein Selektor, der auf nichts passt. Gemeldet wurde nichts: die Datei lud, die Klammern stimmten, die Regel war einfach tot. Gegenmittel: Woos Klasse ueber einen Attribut-Selektor ansprechen, der das Wort nicht ausschreibt. `[class*="quantity-sel"]` trifft dieselben Elemente und ueberlebt die Ersetzung. */ .wc-block-cart-item__quantity > [class*="quantity-sel"]{ border:1px solid var(--border,#E3DCD2)!important; border-radius:4px!important; height:var(--tap,48px)!important; max-width:132px; background:#fff; } .wc-block-cart-item__quantity input[class*="quantity-sel"]{ font:500 1rem/1 var(--font-text,Outfit),sans-serif!important; color:var(--text,#3F3B36)!important; } .wc-block-cart-item__quantity button[class*="quantity-sel"]{ color:var(--gruen-800,#284F1C)!important; font-size:1.1rem!important; min-width:44px; transition:background-color .15s ease; } .wc-block-cart-item__quantity button[class*="quantity-sel"]:hover{ background:var(--creme,#F9F3EB)!important; } /* Loeschen: war ein 24-px-Icon — unter jedem Tapmass. Jetzt 44 px. */ .wc-block-cart-item__remove-link{ color:var(--text-muted,#6B6560)!important; min-width:44px;min-height:44px; display:inline-flex;align-items:center;justify-content:center; border-radius:4px; transition:color .15s ease,background-color .15s ease; } .wc-block-cart-item__remove-link:hover{ color:#A33333!important;background:rgba(163,51,51,.07)!important; } /* ── 5. Die Summenspalte wird eine Kachel ───────────────────────────────── Sie stand als freier Text neben der Tabelle, ohne Flaeche und ohne Kante — genau die „flache" Wirkung, die Chris am 10.10. schon einmal benannt hat (Skill: Qualitaetsstufe V4). Als Kachel ist sofort erkennbar, wo abgerechnet wird. */ .wp-block-woocommerce-cart-totals-block{ background:#fff; border:1px solid var(--border,#E3DCD2); border-radius:6px; padding:26px 24px; box-shadow:var(--schatten-1,0 1px 2px rgba(26,10,15,.05)); align-self:flex-start; position:sticky;top:120px; } @media(max-width:1000px){ .wp-block-woocommerce-cart-totals-block{position:static;margin-top:32px} } /* Ueberschrift der Kachel */ .wp-block-woocommerce-cart-order-summary-heading-block, .wc-block-cart__totals-title{ font:500 .72rem/1 var(--font-text,Outfit),sans-serif!important; letter-spacing:.14em!important; text-transform:uppercase; color:var(--text-muted,#6B6560)!important; margin:0 0 18px!important; padding:0!important; } /* Summenzeilen: Luft zwischen den Zeilen, Trenner vor der Endsumme */ .wc-block-components-totals-item{ padding:9px 0!important; font-size:.95rem!important; color:var(--text,#3F3B36)!important; } .wc-block-components-totals-item__label{color:var(--text,#3F3B36)!important} .wc-block-components-totals-item__description, .wc-block-components-totals-shipping__via{ color:var(--text-muted,#6B6560)!important; font-size:.8rem!important; } /* Endsumme: die einzige Stelle, die laut sein darf. ⚠️ Gemessen statt geschaetzt: „Veranschlagte Gesamtsumme" misst in Young Serif 252 px, der Betrag 78 px — zusammen 330 px bei 310 px Innenraum der Kachel. Die Zeile MUSS also brechen, und der Betrag landete linksbuendig unter dem Label. Deshalb traegt das Label hier die Textschrift (Outfit ist deutlich schmaler) und darf notfalls umbrechen, waehrend der Betrag nie umbricht. Haelt auch bei vierstelligen Summen. */ .wc-block-components-totals-footer-item{ border-top:1px solid var(--border,#E3DCD2)!important; margin-top:10px!important;padding-top:18px!important; flex-wrap:wrap!important;align-items:baseline!important; column-gap:12px; } .wc-block-components-totals-footer-item .wc-block-components-totals-item__label{ font:500 1.05rem/1.3 var(--font-text,Outfit),sans-serif!important; color:var(--gruen-900,#1B3712)!important; flex:1 1 0!important;min-width:0!important; } .wc-block-components-totals-footer-item .wc-block-components-totals-item__value{ font:500 1.45rem/1.2 var(--font-text,Outfit),sans-serif!important; color:var(--gruen-900,#1B3712)!important; flex:0 0 auto!important;text-align:right!important; white-space:nowrap; } .wc-block-components-totals-footer-item .wc-block-components-totals-item__description{ flex:1 1 100%!important;margin-top:4px; } /* Der USt-Ausweis ist Pflichtangabe — leise, aber ueber 4,5:1. `--text-muted` = #6B6560 schafft 5,74:1 auf Weiss (gemessen 19.10.). */ .wc-block-components-totals-footer-item-tax{ color:var(--text-muted,#6B6560)!important; font-size:.8rem!important; } /* Gutscheinklappe als eigene Zeile, nicht als Textfragment */ .wp-block-woocommerce-cart-order-summary-coupon-form-block{ border-bottom:1px solid var(--border,#E3DCD2); padding-bottom:14px;margin-bottom:6px; } .wc-block-components-panel__button{ font:500 .9rem/1.3 var(--font-text,Outfit),sans-serif!important; color:var(--gruen-800,#284F1C)!important; min-height:44px; } /* ── 6. Kaufen-Knoepfe ──────────────────────────────────────────────────── ⛔ Die Unterstreichung kam aus dem Theme-Reset und stand auf JEDEM Woo-Button. Grau (#32373c) war Woos Standardfarbe, nicht unsere. Jetzt Blumenstadl-Gruen, 48 px Tapziel, kein Radius (wie die Produktseiten-Buttons, Kit-Zeile 1700). */ .wc-block-cart__submit-button, .wc-block-components-checkout-place-order-button{ background:var(--gruen-800,#284F1C)!important; border:1px solid var(--gruen-800,#284F1C)!important; color:#fff!important; text-decoration:none!important; border-radius:0!important; min-height:var(--tap,48px)!important; font:500 .95rem/1 var(--font-text,Outfit),sans-serif!important; letter-spacing:.09em; text-transform:uppercase; transition:background-color .22s ease,border-color .22s ease!important; } .wc-block-cart__submit-button:hover, .wc-block-components-checkout-place-order-button:hover{ background:var(--gruen-900,#1B3712)!important; border-color:var(--gruen-900,#1B3712)!important; color:#fff!important; } .wc-block-cart__submit-container{margin-top:4px} /* ── 7. Express-Kasse (Apple Pay / Google Pay / Link) ───────────────────── Die drei Knoepfe gehoeren Stripe und liegen in Iframes — ihr Inneres ist fuer uns unerreichbar und darf es bleiben. Geordnet wird nur der Rahmen: gleiche Breite, gleicher Abstand, und eine saubere ODER-Trennlinie. */ .wc-block-components-express-payment{ margin:0 0 4px; padding:20px 0 0; border-top:1px solid var(--border,#E3DCD2); } .wc-block-components-express-payment__event-buttons > li{margin-bottom:10px} .wc-block-components-express-payment__event-buttons > li:last-child{margin-bottom:0} .wc-block-components-express-payment-continue-rule{ font:500 .72rem/1 var(--font-text,Outfit),sans-serif!important; letter-spacing:.14em!important; color:var(--text-muted,#6B6560)!important; margin:18px 0!important; } .wc-block-components-express-payment-continue-rule::before, .wc-block-components-express-payment-continue-rule::after{ border-color:var(--border,#E3DCD2)!important; } .wc-block-components-express-payment__title-container{display:none} /* ── 8. Kasse: Formularfelder ───────────────────────────────────────────── Der Rahmen stand auf einem fast schwarzen `rgba(43,45,47,.8)` — technisch korrekt, optisch ein Fremdkoerper neben den Produktkacheln. */ .wc-block-components-text-input input, .wc-block-components-text-input textarea, .wc-block-components-select__container, .wc-block-components-combobox-control input{ border:1px solid var(--border,#E3DCD2)!important; border-radius:4px!important; min-height:var(--tap,48px)!important; font-family:var(--font-text,Outfit),sans-serif!important; background:#fff!important; } .wc-block-components-text-input input:focus, .wc-block-components-combobox-control input:focus, .wc-block-components-select__select:focus{ border-color:var(--gruen-800,#284F1C)!important; box-shadow:0 0 0 2px rgba(40,79,28,.14)!important; outline:none!important; } .wc-block-components-text-input label, .wc-block-components-select__label{ color:var(--text-muted,#6B6560)!important; font-family:var(--font-text,Outfit),sans-serif!important; } /* Abschnittsueberschriften an der Kasse auf die Markenschrift */ .wc-block-components-checkout-step__title{ font:400 1.25rem/1.3 var(--font-display,"Young Serif"),Georgia,serif!important; color:var(--gruen-900,#1B3712)!important; } .wc-block-components-checkout-step__description{ color:var(--text-muted,#6B6560)!important; } /* Bestelluebersicht an der Kasse: dieselbe Kachel wie im Warenkorb */ .wp-block-woocommerce-checkout-totals-block{ background:#fff; border:1px solid var(--border,#E3DCD2); border-radius:6px; padding:24px 22px; box-shadow:var(--schatten-1,0 1px 2px rgba(26,10,15,.05)); } .wc-block-components-order-summary__content{background:transparent!important} /* Woos eigener Hinweis „Gib eine Lieferadresse ein…" steht auf `color(srgb … / .66)` = effektiv #807E7A auf Weiss = **4,06:1**, also unter den 4,5:1 fuer 13-px-Text. Gefunden erst beim Kontrastdurchlauf, nicht im Screenshot — er sieht nur „leise" aus. ⚠️ Der Rechner muss dabei `color(srgb …)` kennen: die Werte sind 0–1, nicht 0–255, und die Deckkraft .66 muss gegen den Grund verrechnet werden. Eine Messung, die das nicht tut, meldet hier 1,0 und ist falsch. */ .wc-block-components-shipping-rates-control__no-shipping-address-message, .wc-block-components-shipping-rates-control__no-results-notice, .wc-block-components-shipping-rates-control__package-items, .wc-block-components-checkout-step__description{ color:var(--text-muted,#6B6560)!important; } /* ── 10. „Mein Konto" 11 ────────────────────────────────────────────────── Beim Gegenmessen als Gast aufgefallen: die Anmeldemaske war noch vollstaendig Woo-Rohzustand. Gemessen: Knopf `#E9E6ED` auf `#515151` (ein graues Kaestchen, 107 × 36 px — unter dem Tapmass), Eingabefelder mit `rgba(32,7,7,.8)`, Formular 1.140 px breit ueber die volle Seite. ⚠️ Das war kein Auftrag, gehoert aber zur selben Strecke: wer bestellt hat, landet hier. Eine Kaufstrecke, die auf der letzten Seite das Theme-Grau zeigt, wirkt wie abgebrochen. Native Woo-Templates bleiben unberuehrt, nur Token-CSS. */ .woocommerce-account .woocommerce form.login, .woocommerce-account .woocommerce form.register, .woocommerce-account .woocommerce-ResetPassword{ max-width:520px; border:1px solid var(--border,#E3DCD2)!important; border-radius:6px!important; padding:28px 26px!important; background:#fff; box-shadow:var(--schatten-1,0 1px 2px rgba(26,10,15,.05)); } .woocommerce-account .woocommerce form .input-text{ border:1px solid var(--border,#E3DCD2)!important; border-radius:4px!important; min-height:var(--tap,48px)!important; padding:0 14px; font:400 1rem/1 var(--font-text,Outfit),sans-serif!important; color:var(--text,#3F3B36)!important; background:#fff; } .woocommerce-account .woocommerce form .input-text:focus{ border-color:var(--gruen-800,#284F1C)!important; box-shadow:0 0 0 2px rgba(40,79,28,.14)!important; outline:none!important; } .woocommerce-account .woocommerce form label{ color:var(--text-muted,#6B6560)!important; font:400 .88rem/1.4 var(--font-text,Outfit),sans-serif!important; margin-bottom:6px;display:block; } /* Anmelden/Registrieren: derselbe Knopf wie an der Kasse. ⚠️ `.woocommerce-form-login button` trifft auch Woos Augen-Symbol (`.show-password-input`) — deshalb ausdruecklich `button[type=submit]`. */ .woocommerce-account .woocommerce button[type="submit"], .woocommerce-account .woocommerce .woocommerce-Button{ background:var(--gruen-800,#284F1C)!important; border:1px solid var(--gruen-800,#284F1C)!important; color:#fff!important; border-radius:0!important; min-height:var(--tap,48px)!important; padding:0 28px!important; font:500 .9rem/1 var(--font-text,Outfit),sans-serif!important; letter-spacing:.09em;text-transform:uppercase; text-decoration:none!important; transition:background-color .22s ease,border-color .22s ease!important; } .woocommerce-account .woocommerce button[type="submit"]:hover, .woocommerce-account .woocommerce .woocommerce-Button:hover{ background:var(--gruen-900,#1B3712)!important; border-color:var(--gruen-900,#1B3712)!important; } /* Das Augen-Symbol im Passwortfeld ist KEIN Knopf im Sinne oben — zuruecksetzen, sonst sitzt ein gruener Block im Eingabefeld. */ .woocommerce-account .woocommerce button.show-password-input{ background:transparent!important;border:0!important; min-height:0!important;padding:0!important; } .woocommerce-account .woocommerce-MyAccount-navigation ul li a{ font-family:var(--font-text,Outfit),sans-serif!important; min-height:44px;display:flex;align-items:center; } /* ── 9. Mobil ───────────────────────────────────────────────────────────── Bei 390 px war der Block 70 px aus dem Bild gerutscht (Punkt 2). Hier zusaetzlich: Bilder kleiner, Summenkachel randlos bis zum Seitenrand, Knopf volle Breite. */ @media(max-width:600px){ .woocommerce-cart .page-content > p:first-child, .woocommerce-checkout .page-content > p:first-child{ padding:14px 16px;font-size:.9rem;margin-bottom:24px; } .wc-block-cart-item__image img{width:64px!important;height:64px!important} .wc-block-components-product-name{font-size:.98rem!important} .wc-block-cart-items__row td{padding-top:16px;padding-bottom:16px} .wp-block-woocommerce-cart-totals-block, .wp-block-woocommerce-checkout-totals-block{padding:20px 16px} .wc-block-cart__submit-button, .wc-block-components-checkout-place-order-button{width:100%} .wc-block-components-totals-footer-item .wc-block-components-totals-item__value{ font-size:1.32rem!important; } } /* ══ LIGHTBOX (22.10.2026) ═══════════════════════════════════════════════ Elementors eigene Lightbox, ausgeloest ueber den Dynamic Tag `lightbox` auf 28 Inhaltsbildern. Zwei gemessene Maengel am Stand von heute: 1. Die Bedienknoepfe (X, Zoom, Vollbild, Teilen) messen 30x30 px — unter der 44-px-Pflichtgroesse. Bei 390 px lagen sie zusaetzlich direkt ueber dem Oeffnungszeiten-Band des Kopfes. 2. Der Lightbox-Hintergrund steht auf rgba(0,0,0,.8); der Seitenkopf (z-index 50, sticky) scheint durch und macht das Bild unruhig. Beides nur Token-CSS, kein Eingriff in Elementors Markup. */ .elementor-lightbox{background-color:rgba(16,22,14,.96)!important} /* ⛔ Die Bedienelemente heissen NICHT `.elementor-slideshow__zoom-in` o.ae. — das sind inline-SVGs mit `e-font-icon-svg e-eicon-*` (gemessen im DOM, 22.10.). Ein Selektor auf die naheliegenden Namen trifft nichts und meldet trotzdem nichts. Deshalb ueber die echten Klassen. ⛔ Und `:not(.elementor-hidden)` ist Pflicht: Zoom und Vollbild liegen je zweimal im Kopf (ein/aus), der inaktive Zustand haengt an `.elementor-hidden{display:none}`. Ein `display:flex!important` ohne die Ausnahme macht beide sichtbar — gemessen: 5 Symbole statt 3. */ .elementor-lightbox .dialog-lightbox-close-button, .elementor-lightbox .elementor-slideshow__header > svg.e-font-icon-svg:not(.elementor-hidden){ min-width:48px;min-height:48px;box-sizing:content-box; display:flex!important;align-items:center;justify-content:center; } /* Kopfleiste der Lightbox bekommt einen eigenen dunklen Streifen, damit die Symbole nicht auf dem Seitenkopf schweben. */ .elementor-lightbox .elementor-slideshow__header{ background:rgba(16,22,14,.96); padding:4px 8px;min-height:56px;align-items:center; } /* Bildunterschrift: Markenschrift statt Theme-Default, ruhiger Abstand. */ .elementor-lightbox .elementor-slideshow__title{ font-family:var(--font-text,Outfit),sans-serif!important; font-size:.95rem;letter-spacing:.01em;padding:14px 20px; } /* Keine Oeffnungsanimation, wenn das Geraet darum bittet. */ @media(prefers-reduced-motion:reduce){ .elementor-lightbox .dialog-message.animated{animation:none!important} } /* ══ BETRIEBSURLAUB / VERKAUFSPAUSE (Snippet 1026) ════════════════════════ Ein von Hand geschalteter Zustand, kein Datumslauf (Entscheidung 25.10.). Drei Orte, drei Gewichtungen: .bs-urlaub-band Band ueber Shop/Produkt/Warenkorb/Kasse .bs-urlaub-produkt steht dort, wo sonst der Kaufen-Knopf war .bs-urlaub-kachel leise Zeile in der Shop-Kachel ⚠️ Erbt bewusst die Creme-Goldkante von `.bs-fagg` (Zeile 2213) — ein Hinweis sieht aus wie ein Hinweis, nicht wie ein Fehler. Rot waere hier falsch: der Betrieb ist nicht kaputt, er hat zu. */ .bs-urlaub-band{ background:var(--creme,#F9F3EB); border-left:3px solid var(--gold-500,#C9A87C); border-radius:0 4px 4px 0; padding:16px 20px; margin:0 0 28px; font:400 1rem/1.6 var(--font-text,Outfit),sans-serif; color:var(--text,#3F3B36); } .bs-urlaub-produkt{ background:var(--creme,#F9F3EB); border:1px solid var(--border,#E3DCD2); border-left:3px solid var(--gold-500,#C9A87C); border-radius:0 4px 4px 0; padding:18px 20px; margin:8px 0 24px; font:400 1rem/1.6 var(--font-text,Outfit),sans-serif; color:var(--text,#3F3B36); } /* In der Kachel nur eine leise Zeile — das Raster darf nicht springen, deshalb feste Mindesthoehe statt Kachel-Optik. */ .bs-urlaub-kachel{ margin:6px 0 0; min-height:1.4em; font:500 .78rem/1.4 var(--font-text,Outfit),sans-serif; letter-spacing:.06em; text-transform:uppercase; color:var(--text-muted,#6B6560); } @media (max-width:480px){ .bs-urlaub-band, .bs-urlaub-produkt{padding:14px 16px;font-size:.95rem} } /* ════════════════════════ BILDREIHEN MIT LIGHTBOX ════════════════════════ ⛔ Behebt einen Fehler, der site-weit JEDE Bildreihe mit Lightbox traf. Beim Lightbox-Einbau (22.10.) hat Elementor jedes Bild in ein gewickelt. `.bs-grid-wrap` ist ein Flex-Container; die Breitenregeln hingen aber am , nicht am neuen . Folge: die Verweise stehen auf `flex: 0 1 auto`, das erste nimmt die ganze Zeile, die anderen fallen auf Breite 0. Gemessen 02.11.2026 bei 1440 px: /hochzeit/ „Echte Tage, echte Blumen" -> 3 Bilder je 1189x1585 px, Reihe 4815 px hoch statt ~400 /ueber-uns/ „Ein Blick hinein" -> Bild 1 riesig, Bilder 2+3 auf 0 Die Seiten waren seit dem 22.10. so. Aufgefallen ist es erst, weil der Fototausch dieselbe Reihe noch einmal unter die Lupe genommen hat. Der Verweis muss erben, was vorher das Bild hatte: gleiche Breite, gleiche Hoehe, und das darin fuellt ihn aus. ⛔ Die Spezifitaet muss `.elementor .e-image-link-base` schlagen. Diese Elementor-Regel setzt `width:fit-content` und `display:inherit` und gewinnt gegen ein schlichtes `.bs-grid-wrap > a` (0,2,1 gegen 0,1,1). Gemessen per CSS.getMatchedStylesForNode — ohne diese Messung sieht es aus, als waere das CSS gar nicht angekommen. Deshalb hier `.elementor` vorangestellt. */ .elementor .bs-grid-wrap > a, .elementor .bs-grid-wrap > a.e-image-link-base{ flex:1 1 0; min-width:0; width:auto; display:block; } .elementor .bs-grid-wrap > a > img{ width:100%; height:100%; display:block; } /* Am Telefon stapeln statt quetschen — drei 1/3-Spalten sind dort unlesbar. */ @media (max-width:767px){ .elementor .bs-grid-wrap > a, .elementor .bs-grid-wrap > a.e-image-link-base{flex-basis:100%} } /* 03.11.2026 — Leerer Warenkorb: der Block „Neu im Shop" rendert Woos Produktknoepfe als wp-block-button__link. Hello Elementors Reset gibt dem Knopf Dunkelgrau (#32373c), unser Kit setzt die Textfarbe auf gruen-800 — gemessen 1,27:1, unlesbar. Hier wird der Knopf auf die Marke gezogen. Selektor ueber Attribut, nie das Wort „sel…ector" ins Kit. */ .woocommerce-cart .wp-block-woocommerce-cart a.wp-block-button__link, .woocommerce-checkout .wp-block-woocommerce-checkout a.wp-block-button__link, .woocommerce-cart .wp-block-woocommerce-cart a.add_to_cart_button, .woocommerce-checkout .wp-block-woocommerce-checkout a.add_to_cart_button{ background:var(--gruen-800,#284F1C)!important; color:var(--creme,#F8F3EC)!important; border:0!important; border-radius:0!important; min-height:var(--tap,48px); display:inline-flex;align-items:center;justify-content:center; padding:0 14px;width:100%;box-sizing:border-box; font-size:.86rem;letter-spacing:.02em;text-transform:none; white-space:normal;overflow-wrap:normal;word-break:keep-all;hyphens:manual; text-decoration:none!important; } .woocommerce-cart .wp-block-woocommerce-cart a.wp-block-button__link:hover, .woocommerce-checkout .wp-block-woocommerce-checkout a.wp-block-button__link:hover{ background:var(--gruen-900,#1B3712)!important;color:var(--creme,#F8F3EC)!important; } /* R11 05.11.: Germanized-Gewaehrleistungslabel nie breiter als der Bildschirm */ .wc-gzd-legal-guarantee-label-image-link{display:inline-block;max-width:100%} .wc-gzd-legal-guarantee-label-image{max-width:100%!important;min-width:0!important;height:auto!important} /* ══ NAVFIX 10.11.2026 (Chris: Mobilmenü weiss auf weiss) ═══════════════ Ursache: der Widget-Selektor 89d9e42 faerbte AUCH die Punkte im mobilen Aufklappmenue weiss (#FFF auf #FFF, Kontrast 1,0:1). Oben eingeengt auf .elementor-nav-menu--main. Hier zusaetzlich der aktive Punkt, der sonst Elementors Grau-Default #1F2124 bekommt. */ .elementor-location-header nav.elementor-nav-menu--dropdown a.elementor-item, .elementor-location-header nav.elementor-nav-menu--dropdown a.elementor-sub-item{ color:#3F3B36!important;text-shadow:none!important} .elementor-location-header nav.elementor-nav-menu--dropdown a.elementor-item-active, .elementor-location-header nav.elementor-nav-menu--dropdown a.elementor-item.highlighted, .elementor-location-header nav.elementor-nav-menu--dropdown a.elementor-item:focus{ background:#F9F3EB!important;color:#284F1C!important}/* End custom CSS */