/* Stylesheet for the storefront_child/templates/ page templates. Only enqueued on pages using one of these templates (see functions.php). Typography (font, sizes, weights, colors, line-height) matches the actual values the Elementor pages rendered with on the live site (checked via the per-page generated CSS at chicco-fresh.de/wp-content/uploads/elementor/css/post-.css), not defaults. Note: the existing storefront_child/style.css has .elementor-heading-title.elementor-size-default { font-family: 'Montserrat', serif !important; } which — because virtually every Elementor heading widget carries that "size-default" class — is what actually wins over the kit's Roboto setting on every heading site-wide. So headings here use Montserrat too (body text genuinely is Roboto, that rule only targets headings). Only the brand colors for links/buttons come from the Customizer (accent #6d902b etc.). */ .tpl-page { /* Matches .tpl-header-inner's max-width (header.css) so page content lines up edge-to-edge with the header instead of sitting narrower under it. */ max-width: 1320px; margin: 0 auto; color: #6a7680; font-family: 'Roboto', sans-serif; } /* Storefront core (style.css) has its own ".page-template-template-homepage:not(.has-post-thumbnail) .site-main {padding-top:4.235801032em}" rule (~68px) — not ours, but it's what actually creates the gap above the hero slider on mobile. !important since that core rule outranks a same-specificity override otherwise. */ @media (max-width: 767px) { .tpl-home.tpl-page { padding-top: 20px !important; } } /* Extra breathing room between the site header and the first section on the Produkte, Produktbundles and Abomodell pages (requested) — the default .tpl-page sits flush under the header otherwise. */ .page-template-template-produkte .tpl-page, .page-template-template-produktbundles .tpl-page, .page-template-template-abomodell .tpl-page, .page-template-template-datenschutz .tpl-page { padding-top: 48px; } @media (max-width: 767px) { .page-template-template-produkte .tpl-page, .page-template-template-produktbundles .tpl-page, .page-template-template-abomodell .tpl-page, .page-template-template-datenschutz .tpl-page { padding-top: 28px; } } /* The MailPoet front-end pages (#9359 subscriptions/confirmation/manage, #9360 captcha) get the same header gap via .single-mailpoet_page .site-main — added as an inline style in chicco_mailpoet_page_spacing() (functions.php), since templates.css isn't enqueued on those (custom-post-type) pages. */ .tpl-page h1 { font-family: 'Montserrat', serif; font-size: 25px; font-weight: bold; line-height: 1.24em; color: #333333; margin-top: 1.6em; margin-bottom: 0.6em; } .tpl-page h2 { font-family: 'Montserrat', serif; font-size: 20px; font-weight: 600; color: #333333; margin-top: 1.6em; margin-bottom: 0.6em; } /* "Anmelden" / "Registrieren" headings from WooCommerce's own login/register form markup on the My Account page (#customer_login), not one of ours. */ .tpl-page #customer_login h2 { font-size: 2em; } .tpl-page h3 { font-family: 'Montserrat', serif; font-size: 18px; font-weight: 600; color: #333333; margin-top: 1.6em; margin-bottom: 0.6em; } /* Elementor's default heading alignment + a short centered divider under the title, used on pages where the live site centers the (page or section) heading. */ .tpl-title-centered { text-align: center; } .tpl-divider { border: none; border-top: 2px solid #686157; margin: 0 auto 1.5em; } .tpl-divider-sm { width: 70px; } .tpl-divider-lg { width: 200px; } @media (max-width: 1024px) { .tpl-page h2 { font-size: 19px; } } @media (max-width: 767px) { .tpl-page h2 { font-size: 16px; } } .tpl-page h1:first-child, .tpl-page h2:first-child { margin-top: 0; } /* * On several pages (Impressum, Datenschutz, Versandarten) every heading is at the * same "top" tier (25px bold) rather than following a title + 20px/600 sub-heading * hierarchy like AGB/Widerrufsbelehrung do. Use this modifier on h2s that should * render at that top tier instead of the default 20px/600 h2 style. */ .tpl-page h2.tpl-heading-lg { font-size: 25px; font-weight: bold; line-height: 1.24em; color: #333333; } /* page-specific heading overrides, taken from the live page's own CSS (size/weight/color only — font-family stays Montserrat everywhere, see note above) */ .tpl-page h2.tpl-404-title { font-size: 40px; font-weight: 400; color: #333333; } /* Über uns: hero title + all Q&A headings are 25px/500/black instead of the h1/h3 defaults */ .tpl-ueber-uns-headings h1, .tpl-ueber-uns-headings h3 { font-size: 25px; font-weight: 500; color: #000000; } .tpl-page p, .tpl-page li { font-size: 14px; font-weight: 300; line-height: 2.2em; letter-spacing: 0.4px; color: #6a7680; } .tpl-page a { color: #6d902b; text-decoration: none; } .tpl-page a:hover { text-decoration: none; } .tpl-page hr:not(.tpl-divider) { border: none; border-top: 1px solid #e8ece6; margin: 1.5em 0; } .tpl-section { margin-bottom: 2.5em; } /* Extra breathing room around the two new plain-style sections ("Ganz nach deinem Geschmack" / "Alles griffbereit!") — more than the standard .tpl-section gap, both between the two of them and before the next section that follows. Scoped to just these two, not every .tpl-section. */ .tpl-section-spacious { margin-bottom: 5em; } @media (max-width: 767px) { .tpl-section-spacious { margin-bottom: 2.5em; } } .tpl-section + .tpl-section { border-top: 1px solid #e8ece6; padding-top: 2em; } /* Abomodell: no divider lines between sections — separate them with extra whitespace instead (e.g. before "Warum ein Abo?" and the sections after it). The green "So funktioniert's" panel (.tpl-abomodell-flow) keeps its own top padding, so it's excluded from the padding-top reset and just gets the gap. */ .tpl-abomodell .tpl-section + .tpl-section:not(.tpl-abomodell-flow) { border-top: none; padding-top: 0; margin-top: 4.5em; } .tpl-abomodell .tpl-section + .tpl-section.tpl-abomodell-flow { margin-top: 5em; } @media (max-width: 767px) { .tpl-abomodell .tpl-section + .tpl-section:not(.tpl-abomodell-flow) { margin-top: 3em; } .tpl-abomodell .tpl-section + .tpl-section.tpl-abomodell-flow { margin-top: 3em; } } /* two-column layout used on AGB/Datenschutz/Widerruf */ .tpl-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 0 60px; } @media (max-width: 782px) { .tpl-columns { grid-template-columns: 1fr; } } /* buttons - matches the site's own .elementor-button rule in style.css exactly (white pill button, black border, generous horizontal padding, green on hover) */ /* Padding and font-size match .tpl-footer-btn (footer.css) — the green- background button style — so every button on the site is the same size regardless of which color variant (white-on-white vs white-on-green) is used where. */ .tpl-btn { display: inline-block; color: #000000 !important; background-color: #ffffff; border: 1px solid #000000; border-radius: 20px; padding: 8px 16px; font-size: 13px; line-height: 1; font-weight: 400; margin: 6px 10px 6px 0; } .tpl-btn:hover, .tpl-btn:active, .tpl-btn:focus { background-color: #6d902b; border-color: #6d902b; color: #ffffff !important; text-decoration: none !important; } /* icon-box grid (Über uns, My Account dashboard) */ .tpl-icon-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 20px; margin: 2em 0; } .tpl-icon-box { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; background: #ffffff; box-shadow: 0px 0px 5px 2px rgba(0, 0, 0, 0.2); border-radius: 0; padding: 24px 16px; color: #70786e; font-weight: 600; } .tpl-icon-box a { color: #70786e; display: block; } .tpl-icon-box .tpl-icon { display: block; font-size: 34px; margin-bottom: 10px; color: #6d902b; } /* hero / intro layout (Über uns, 404) */ /* 60/40 column grid, matching the live site's Elementor section for this block; stacks to a single column on mobile with the image on top (matching elementor-reverse-mobile in the original markup). */ .tpl-hero { display: grid; grid-template-columns: 3fr 2fr; gap: 40px; align-items: center; margin-bottom: 2.5em; } /* 50/50 (instead of 3fr/2fr) and the image box narrower than its own column (below) — together this gives .tpl-home .tpl-hero-image img's scale(1.28) room to grow into on the right without exceeding the boxed .tpl-page width: box width 76% × scale 1.28 ≈ 97% of the column, landing just inside the column/page's own right edge instead of past it. No clipping needed this way, so the effect isn't cut off. */ .tpl-home .tpl-hero { margin-top: 3em; } /* Only above the mobile breakpoint — unscoped, this beat the mobile single-column override below on specificity alone (two classes vs one), regardless of the media query, silently forcing 2 columns on mobile too. */ @media (min-width: 768px) { .tpl-home .tpl-hero { grid-template-columns: 1fr 1fr; } } .tpl-home .tpl-hero-image { width: 76%; /* Nudges just this column down from the row's centered position (.tpl-hero has align-items: center) — .tpl-hero-text stays centered. */ margin-top: 40px; } .tpl-hero-image img { max-width: 100%; height: auto; border-radius: 0; box-shadow: 0px 0px 5px 2px rgba(0, 0, 0, 0.2); } /* Green backdrop block behind "Unser Pizzabäcker" specifically (.tpl-home scopes this to the homepage — .tpl-hero-image is shared with Über uns/404, which should keep their plain drop-shadow look above, untouched). The green box itself stays put, matching the image's normal bounds exactly; it's the image that's scaled up instead, anchored at its bottom-left corner (transform-origin) so that corner stays flush against the green while the image grows outward over the top and right edges only. */ .tpl-home .tpl-hero-image { position: relative; } .tpl-home .tpl-hero-image::before { content: ""; position: absolute; inset: 0; background-color: #6d902b; z-index: 0; } .tpl-home .tpl-hero-image img { position: relative; z-index: 1; display: block; transform-origin: bottom left; transform: scale(1.28); box-shadow: none; } /* Caps the image at the text column's own height instead of the two being independently sized and just vertically centered (the base .tpl-hero rule uses align-items: center, so a naturally taller image would otherwise stretch the row to its own height instead of following the text). Switch to stretch, and take the img out of the grid's height calculation via position: absolute so it can't contribute its own intrinsic height to the row — it just fills whatever height the text column (the only remaining contributor) ends up being, cropped via object-fit instead of distorted. */ .tpl-ueber-uns-headings .tpl-hero { align-items: stretch; } .tpl-ueber-uns-headings .tpl-hero-image { position: relative; overflow: hidden; } .tpl-ueber-uns-headings .tpl-hero-image img { position: absolute; inset: 0; width: 100%; height: 100%; /* contain, not cover — the whole image must stay visible, never cropped, even if that means it doesn't fill the full height-matched box. */ object-fit: contain; } @media (max-width: 767px) { .tpl-hero { grid-template-columns: 1fr; } .tpl-hero-image { order: -1; } /* "Unser Pizzabäcker" (homepage) should read text-then-image on mobile, unlike Über uns/404 which keep the image-first order above. */ .tpl-home .tpl-hero-image { order: 0; } /* Single-column mobile layout: text and image are separate rows, each sized to its own content — but the image has no in-flow content of its own anymore (see above), so without an explicit height its row would collapse to 0 and the image would disappear. */ .tpl-ueber-uns-headings .tpl-hero-image { height: 260px; } } .tpl-hero-badges { display: flex; gap: 30px; margin-top: 1.5em; flex-wrap: wrap; } /* Über uns page specifics (.tpl-ueber-uns-headings scopes to it — border/ spacing tweaks here shouldn't touch My Account's .tpl-icon-grid cards or the 404 page's .tpl-hero-image, which share the base classes above). */ .tpl-ueber-uns-headings .tpl-hero-image img { box-shadow: none; } .tpl-ueber-uns-headings .tpl-hero { margin-top: 2.5em; } .tpl-ueber-uns-headings .tpl-hero-badges .tpl-icon-box .tpl-icon { margin-bottom: -10px; } .tpl-ueber-uns-headings .tpl-hero-badges { margin-bottom: 1.5em; } /* * Homepage hero slider (first section, above "Unsere Bestseller"). Boxed — * stays inside the 1140px .tpl-page container like every other homepage * section. Holds 2+ slides (see .tpl-hero-slider-track / .tpl-hero-slide and * templates/hero-slider.js). .tpl-hero-slider-nav (the dots) is a sibling * AFTER this element, not a child — it must live outside the overflow:hidden * box below, otherwise it gets clipped along with the off-screen slide. */ .tpl-hero-slider { position: relative; overflow: hidden; } .tpl-hero-slider-track { display: flex; transition: transform .5s ease; } .tpl-hero-slide { flex: 0 0 100%; min-width: 0; } .tpl-hero-slide-split { position: relative; display: grid; grid-template-columns: 1fr 1fr; /* min-height, not a fixed height — long text (e.g. the "Alles griffbereit" section's narrow 1/3 column) must be able to push the box taller than this instead of overflowing past it into whatever follows. .tpl-hero-slide-media below gets its own fixed height instead, so the image still resolves correctly independent of how tall text makes this row grow (see that rule for why img needs a definite height at all). */ min-height: clamp(380px, 40vw, 480px); } /* Modifier for the middle slide: 1/3 image, 2/3 text (instead of the default 1:1 split) — same height/behavior, just a different column ratio. */ .tpl-hero-slide-split-1-2 { grid-template-columns: 1fr 2fr; } /* The leaves mark the image/panel seam, which sits at 33.33% (not 50%) on this narrower-image variant. */ .tpl-hero-slide-split-1-2 .tpl-hero-leaf-right { left: 33.3333%; } .tpl-hero-slide-split-1-2 .tpl-hero-leaf-left { right: 66.6667%; } /* Explicit, definite height (not 100% of the row) — a percentage height would depend on the row's own resolved height, which now varies with how tall the text column's content is (see .tpl-hero-slide-split above). This keeps the image itself always at the intended 380–480px band regardless, so it never stretches to some taller row or square-collapses to auto. */ .tpl-hero-slide-media { position: relative; height: clamp(380px, 40vw, 480px); } /* Subtle "KI generiert" disclosure badge (see the "Alles griffbereit!" section's image) — small, low-contrast corner tag rather than a loud overlay, since it's just a disclosure, not a call to action. */ .tpl-hero-ai-badge { position: absolute; right: 12px; bottom: 12px; z-index: 2; padding: 4px 10px; border-radius: 100px; background: rgba(0, 0, 0, 0.45); color: #ffffff; font-family: Arial, sans-serif; font-size: 11px; font-weight: 400; letter-spacing: 0.2px; pointer-events: none; } .tpl-hero-slide-media img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 0; } .tpl-hero-slide-content { display: flex; flex-direction: column; justify-content: center; background-color: #6d902b; padding: clamp(24px, 4vw, 40px) clamp(36px, 7vw, 90px); } /* Scoped under .tpl-hero-slide-content (two classes) so this reliably beats the sitewide .tpl-page h2 / .tpl-page p rules (also two selector parts, but class+type — .tpl-hero-slide-title/-text alone were losing to them on specificity regardless of source order). */ /* Matches .tpl-step h3 ("Du bestellst." etc. in the Bestellablauf section) — same size/weight, just white instead of black for the green background — font-size fluid via clamp() so it shrinks together with the box height. */ .tpl-hero-slide-content .tpl-hero-slide-title { font-family: 'Montserrat', serif; font-size: clamp(20px, 2.4vw, 30px); font-weight: 400; line-height: 1.3; color: #ffffff; margin: 0 0 clamp(10px, 1.8vw, 20px); } .tpl-hero-slide-content .tpl-hero-slide-text { font-family: Arial, sans-serif; font-size: clamp(13px, 1.1vw, 15px); font-weight: 400; line-height: 1.6; /* !important needed: style.css has a sitewide `p { color: #000000 !important; }`. */ color: #ffffff !important; margin: 0 0 clamp(18px, 3vw, 32px); } /* Reuses .tpl-footer-btn as-is (see templates/footer.css) — the "Vertrag widerrufen" footer button's style (transparent bg, subtle white border, white text, fills white on hover) is what this CTA should look like. */ .tpl-hero-slide-content .tpl-footer-btn { align-self: flex-start; margin-top: 0; } /* Compact variant (see the "Alles griffbereit!" section) — tighter padding and title/text spacing, for a longer text block in a narrower 1/3 column that would otherwise push the box a lot taller than the other slides. */ .tpl-hero-slide-content-compact { padding: clamp(18px, 2.5vw, 28px) clamp(24px, 4vw, 48px); } .tpl-hero-slide-content-compact .tpl-hero-slide-title { margin-bottom: clamp(6px, 1vw, 12px); } .tpl-hero-slide-content-compact .tpl-hero-slide-text { margin-bottom: clamp(10px, 1.6vw, 18px); } /* .tpl-btn ("mehr erfahren" style, see .tpl-hero below) used instead of .tpl-footer-btn on the plain-background variant — needs the same flex-column fix, otherwise it stretches to the column's full width. */ .tpl-hero-slide-content .tpl-btn { align-self: flex-start; } /* Plain variant (see the standalone "GANZ NACH DEINEM GESCHMACK" section, template-homepage.php) — no green panel, black body text, green heading, matching the rest of the page instead of the slider's white-on-green look. */ .tpl-hero-slide-content-plain { background-color: transparent; } .tpl-hero-slide-content-plain .tpl-hero-slide-title { color: #6d902b; } .tpl-hero-slide-content-plain .tpl-hero-slide-text { /* !important to beat style.css's sitewide `p { color: #000000 !important; }` — here that's actually the color we want, but still needs to win over the (also !important) white from the default .tpl-hero-slide-text rule. */ color: #000000 !important; } /* Decorative leaves marking the seam where the image and the green panel meet, mirrored across it near the bottom of the slide. Positioned relative to .tpl-hero-slide-split (not either column) so "left/right: 50%" lands exactly on the seam regardless of column content. */ .tpl-hero-leaf { position: absolute; bottom: 40px; height: 26px; width: auto; z-index: 2; pointer-events: none; } .tpl-hero-leaf-right { left: 50%; margin-left: 6px; } .tpl-hero-leaf-left { right: 50%; margin-right: 6px; transform: scaleX(-1); } /* Dots only (no prev/next arrows) — a normal-flow row below the slide (not overlaid), so they never compete for the same bottom-center spot as the leaves above. */ .tpl-hero-slider-nav { display: flex; justify-content: center; gap: 10px; margin: 16px 0 4.5em; } .tpl-hero-slider-dot { width: 10px; height: 10px; padding: 0; border-radius: 50%; border: 1px solid #6d902b; background: transparent; cursor: pointer; } .tpl-hero-slider-dot.is-active { background: #6d902b; } @media (max-width: 767px) { .tpl-hero-slide-split { display: block; /* Stacked layout — media and content flow independently instead of sharing one grid row, so the desktop fixed height doesn't apply. */ height: auto; } .tpl-hero-slide-media { height: 260px; } .tpl-hero-slide-content { padding: 36px 24px 46px; } .tpl-hero-leaf { top: 260px; bottom: auto; transform: translateY(-50%); } .tpl-hero-leaf-left { transform: translateY(-50%) scaleX(-1); } } /* * Abo/subscription promo banner ("Dein Abo. Ganz nach deinem Geschmack.") — * matches the slides' green/white brand colors and .tpl-footer-btn button, * but centered and without an image column, per request. Boxed like every * other homepage section (not full-bleed). */ .tpl-abo-banner { background-color: #6d902b; color: #ffffff; text-align: center; padding: 56px 40px; } .tpl-abo-banner .tpl-abo-banner-title { font-family: 'Montserrat', serif; font-size: clamp(24px, 3vw, 34px); font-weight: 400; color: #ffffff; margin: 0 0 14px; } .tpl-abo-banner .tpl-abo-banner-text { font-family: Arial, sans-serif; font-size: 15px; font-weight: 400; line-height: 1.8; /* !important needed: style.css has a sitewide `p { color: #000000 !important; }`. */ color: #ffffff !important; max-width: 640px; margin: 0 auto 32px; } .tpl-abo-banner-steps { display: flex; justify-content: center; flex-wrap: wrap; gap: 40px; margin-bottom: 36px; } .tpl-abo-banner-step { display: flex; flex-direction: column; align-items: center; gap: 12px; max-width: 210px; text-align: center; } .tpl-abo-banner-step i { width: 56px; height: 56px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: rgba(255, 255, 255, 0.15); font-size: 20px; color: #ffffff; } .tpl-abo-banner .tpl-abo-banner-step strong { font-family: 'Montserrat', serif; font-size: 15px; font-weight: 400; color: #ffffff; } /* Two classes in the selector so this beats the sitewide .tpl-home p rule (font-size/family/line-height) further down; !important on color because style.css also has `p { color: #000000 !important; }`. */ .tpl-abo-banner .tpl-abo-banner-step p { font-family: Arial, sans-serif; font-size: 13px; font-weight: 400; line-height: 1.7; margin: 0; color: #ffffff !important; } @media (max-width: 767px) { .tpl-abo-banner { padding: 40px 20px; } .tpl-abo-banner-steps { gap: 24px; } } /* * Homepage: unlike the legal pages (Roboto/gray body text, 20px Montserrat headings), * the actual homepage design uses black Arial body copy and large 40px black section * titles (font-family still ends up Montserrat via the site-wide !important rule on * .elementor-size-default, but size/weight/color are page-specific and were black/400/40px * on chicco-fresh.de, checked against the live post-8656 CSS/JSON). */ .tpl-home { color: #000000; } .tpl-home .tpl-section { border-top: none; padding-top: 0; } .tpl-home p, .tpl-home li { font-family: Arial, sans-serif; font-size: 15px; font-weight: 400; line-height: 1.8; letter-spacing: normal; color: #000000; } .tpl-page .tpl-home-title { font-size: 40px; font-weight: 400; color: #000000; margin: 30px 0 20px; } /* .tpl-steps' own margin-top has no visible effect on the gap below this heading — adjacent block margins collapse to whichever is larger, and this heading's 20px margin-bottom was always the bigger one. Reducing it here (scoped to just this heading, not every .tpl-home-title) is what actually controls that gap. */ .tpl-page .tpl-home-title-tight { margin-bottom: 0; } .tpl-home .tpl-section > p { max-width: 720px; } /* Same intro-text width on Produkte & Produktbundles as the homepage "Unsere Bestseller" block above — paragraph capped, grid stays full width. */ .page-template-template-produkte .tpl-section > p, .page-template-template-produktbundles .tpl-section > p { max-width: 720px; } @media (max-width: 1024px) { .tpl-page .tpl-home-title { font-size: 30px; } } @media (max-width: 767px) { .tpl-page .tpl-home-title { font-size: 25px; } } .tpl-hero-badges .tpl-icon-box { background: none; padding: 0; min-width: 100px; } /* Q&A blocks (Über uns) */ .tpl-qa { display: flex; gap: 14px; margin-bottom: 2em; } .tpl-qa .tpl-icon { color: #6d902b; font-size: 22px; flex-shrink: 0; } .tpl-qa h3 { margin-top: 0; } .tpl-qa-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 0 40px; } /* centered content, e.g. 404 / contact intro */ .tpl-centered { text-align: center; } .tpl-page form.wpcf7-form p { margin-bottom: 1em; } .tpl-page form.wpcf7-form input[type="text"], .tpl-page form.wpcf7-form input[type="email"], .tpl-page form.wpcf7-form input[type="tel"], .tpl-page form.wpcf7-form textarea { width: 100%; padding: 10px 12px; border: 1px solid #e8ece6; border-radius: 3px; font-family: inherit; } .tpl-page form.wpcf7-form input[type="submit"] { background: #70786e; color: #e8ece6; border: none; padding: 12px 28px; border-radius: 3px; font-weight: 600; cursor: pointer; } .tpl-page form.wpcf7-form input[type="submit"]:hover { background: #6d902b; } /* Shopseite: sticky anchor nav (Leggera/Nuvola/Pizzabrot/Glutenfrei) */ .tpl-shop-nav { position: sticky; top: 100px; z-index: 10; background: #ffffff; margin-bottom: 1em; } .tpl-shop-nav-list { display: flex; flex-wrap: wrap; gap: 20px; list-style: none; margin: 0; padding: 12px 0; border-bottom: 1px solid #e8ece6; } .tpl-shop-nav-list a { color: #70786e; font-weight: 600; text-decoration: none; } .tpl-shop-nav-list a:hover { color: #6d902b; } /* Suche — the form itself (.tpl-search-box) is styled in header.css since it's shared with the header; this just centers/sizes it on this page. */ .tpl-search-form { max-width: 480px; margin: 2em auto 0; } .tpl-search-form .tpl-search-box { width: 100%; } .tpl-search-form .tpl-search-input { width: 100%; } .tpl-search-results { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 2em; text-align: left; } @media (max-width: 767px) { .tpl-search-results { grid-template-columns: 1fr; } } .tpl-search-pagination { display: flex; justify-content: center; gap: 10px; margin-top: 3em; } .tpl-search-pagination .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 40px; padding: 0 14px; border-radius: 100px; border: 1px solid #e8ece6; color: #333333; font-size: 14px; text-decoration: none; } .tpl-search-pagination .page-numbers.current { background: #6d902b; border-color: #6d902b; color: #ffffff; } .tpl-search-pagination .page-numbers:hover { border-color: #6d902b; color: #6d902b; } .tpl-search-empty { max-width: 480px; margin: 3em auto 0; text-align: center; } /* The
wrapping this link has no rule of its own anywhere in the theme, so it was rendering with the browser's default h6 margin — which, being larger than .tpl-carousel's margin-top, was the one actually controlling the gap to the carousel below (adjacent block margins collapse to whichever is larger, not their sum). Reset it here instead of relying on .tpl-carousel's margin, which this whole time had no visible effect. */ .tpl-home h6 { margin: 0; } .tpl-discover-link { display: inline-block; font-family: Arial, sans-serif; font-style: italic; font-size: 15px; font-weight: 500; color: #6d902b; margin: -10px 0 6px; } /* * Steps ("I'm coming home ..."): exact staircase layout supplied as a reference * mock-up (absolute positions on a 1200px canvas) — step 2 branches into two * alternatives (Wir versenden / Du holst ab) which both lead into step 4. * Percentages below are those px positions converted to % of the 1200px canvas. */ .tpl-steps { position: relative; max-width: 1200px; height: 820px; margin-top: 0; text-align: left; } .tpl-step { position: absolute; width: 26.6%; } .tpl-step h3 { font-size: 30px; font-weight: 400; color: #000000; margin: 10px 0 6px; } .tpl-step-badge { width: 60px; height: 60px; margin-bottom: 14px; } .tpl-step-1 { top: 90px; left: 0; } .tpl-step-2 { top: 330px; left: 27.5%; } .tpl-step-3a { top: 90px; left: 50.8%; } .tpl-step-3b { top: 570px; left: 50.8%; } .tpl-step-4 { top: 330px; left: 75%; } /* width:80% of a 25%-wide column (the original's own widget setting) = 20% of the whole steps canvas; square aspect since the source SVG is square and the original only ever sets a width (height follows automatically). */ .tpl-arrow { position: absolute; width: 20%; aspect-ratio: 1 / 1; } .tpl-arrow img { width: 100%; height: 100%; display: block; object-fit: contain; } /* Exact values taken from the live site's own Elementor markup for this section (_transform_rotateZ_effect / _transform_flipX_effect settings): "down" connectors (1-2, 2-3b, 3a-4) = rotateZ(60deg) + flipX "up" connectors (2-3a, 3b-4) = rotateZ(120deg), no flip */ .tpl-arrow-down img { transform: rotateZ(60deg) scaleX(-1); margin-top: 30px; } .tpl-arrow-up img { transform: rotateZ(120deg); } .tpl-arrow-1-2 { top: 233px; left: 6.7%; } .tpl-arrow-2-3a { top: 165px; left: 28.3%; } .tpl-arrow-2-3b { top: 455px; left: 28.3%; } .tpl-arrow-3a-4 { top: 185px; left: 52.1%; } .tpl-arrow-3b-4 { top: 395px; left: 52.1%; } @media (max-width: 1024px) { /* Original CSS at this breakpoint: the 3 down-connectors' own margin changes from -134px 0 -90px 0 (desktop) to -101px 44px -42px -45px (tablet) — a delta of top +33px, left -45px. The 2 up-connectors have no tablet override in the original, so they're left untouched here. */ .tpl-arrow-1-2, .tpl-arrow-2-3b, .tpl-arrow-3a-4 { transform: translate(-45px, 33px); } /* also from the original at this breakpoint: 30px->22px headings, text->15px */ .tpl-step h3 { font-size: 22px; } .tpl-step p { font-size: 15px; } } @media (max-width: 767px) { .tpl-steps { position: static; height: auto; display: flex; flex-direction: column; align-items: center; gap: 40px; /* Desktop sets this to 0 (see .tpl-home-title-tight nearby) — on mobile the heading needs its own breathing room above the first number again. */ margin-top: 1.5em; } .tpl-step { position: static; width: 100%; max-width: 320px; } .tpl-step-badge { width: 40px; height: 40px; } .tpl-arrow { display: none; } /* matches elementor-hidden-mobile on these two elements in the original */ .tpl-step-3b .tpl-step-badge { display: none; } .tpl-step-4 h3 { display: none; } } .tpl-home .tpl-section-cook { padding-top: 5em; padding-bottom: 6em; } /* * "Der perfekte Match" — sauce/dough pairing cross-sell, between "Unser * Pizzabäcker" and "Let's cook together". Deliberately a different layout * from the split image/text sections and the green abo banner: two square * product photos side by side with a "+" between them, heading/text/button * centered below. */ .tpl-match-section { margin-top: 6em; } .tpl-match-images { position: relative; display: grid; grid-template-columns: 1fr 1fr; margin-bottom: 2em; } .tpl-match-image { height: clamp(300px, 30vw, 420px); overflow: hidden; } .tpl-match-image img { display: block; width: 100%; height: 100%; object-fit: cover; /* Storefront core sets a sitewide img{border-radius:3px} — overridden here since these images should be sharp-cornered like the rest of the site's product/hero photos. */ border-radius: 0; } /* Overlay badge at the seam between the two images (top/left 50% of .tpl-match-images, not either image, so it lands exactly on the border regardless of image content — works for the side-by-side desktop grid and the stacked mobile layout below, since a 2-row equal-height grid's center always falls on the row boundary too). White circle so it stays visible against any photo, unlike a plain colored icon would be. */ .tpl-match-plus { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 2; width: 64px; height: 64px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: #ffffff; box-shadow: 0px 0px 8px 2px rgba(0, 0, 0, 0.15); font-family: 'Montserrat', serif; font-size: 30px; font-weight: 600; color: #6d902b; } @media (max-width: 767px) { .tpl-match-images { grid-template-columns: 1fr; } .tpl-match-image { height: 260px; } .tpl-match-plus { width: 48px; height: 48px; font-size: 24px; } } .tpl-match-content { max-width: 640px; margin: 0 auto 2em; text-align: center; } .tpl-match-content p { margin-bottom: 1.2em; } .tpl-recipe-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 2em; text-align: left; } @media (max-width: 767px) { .tpl-recipe-grid { grid-template-columns: 1fr; } } .tpl-recipe-card h3 { font-size: 19px; font-weight: 400; color: #000000; } @media (max-width: 1024px) { .tpl-recipe-card h3 { font-size: 17px; } } .tpl-recipe-card img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 0; margin-bottom: 1em; } /* "zum Rezept" button full width within the card, matching the "Zum Produkt" button on the product cards (.tpl-product-more-btn). */ .tpl-recipe-card .tpl-btn { display: block; width: 100%; box-sizing: border-box; margin: 10px 0 0; text-align: center; } /* * Abomodell page (template-abomodell.php). .tpl-hero/.tpl-icon-grid/ * .tpl-icon-box/.tpl-faq-* are all shared with Über uns/homepage already — * only the benefit-card heading+description combo and the step row below * are new to this page. */ .tpl-abomodell .tpl-icon-box strong { display: block; font-family: 'Montserrat', serif; font-size: 16px; margin-bottom: 8px; } .tpl-abomodell .tpl-icon-box p { font-weight: 400; font-size: 14px; line-height: 1.7; margin: 0; } .tpl-abomodell-steps { display: flex; justify-content: center; flex-wrap: wrap; gap: 40px; margin-top: 2em; } .tpl-abomodell-step { display: flex; flex-direction: column; align-items: center; gap: 12px; max-width: 210px; text-align: center; } .tpl-abomodell-step i { width: 56px; height: 56px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: rgba(109, 144, 43, 0.12); font-size: 20px; color: #6d902b; } .tpl-abomodell-step strong { font-family: 'Montserrat', serif; font-size: 15px; font-weight: 400; color: #000000; } .tpl-abomodell-step p { font-family: Arial, sans-serif; font-size: 13px; font-weight: 400; line-height: 1.7; margin: 0; } /* "So funktioniert's" as a green panel with white text/buttons — same treatment as the homepage .tpl-abo-banner. */ .tpl-section.tpl-abomodell-flow { background-color: #6d902b; text-align: center; padding: 56px 40px; border-top: none; } .tpl-abomodell-flow .tpl-home-title { color: #ffffff; margin-top: 0; } .tpl-abomodell-flow .tpl-abomodell-step strong { color: #ffffff; } .tpl-abomodell-flow .tpl-abomodell-step p { /* !important needed: style.css has a sitewide `p { color: #000000 !important; }`. */ color: #ffffff !important; } .tpl-abomodell-flow .tpl-abomodell-step i { background: rgba(255, 255, 255, 0.16); color: #ffffff; } .tpl-abomodell-flow .tpl-abomodell-steps { margin-bottom: 36px; } @media (max-width: 767px) { .tpl-abomodell-steps { gap: 24px; } .tpl-section.tpl-abomodell-flow { padding: 40px 20px; } } /* * FAQ ("Häufige Fragen") — same structural pattern as Prography2026's * .faq-section (native
/, independently-toggleable items, * CSS-only "+" icon that rotates 45° into an "×" on [open], no JS needed), * restyled with this site's own design language instead of that theme's * glassmorphism cards: white .tpl-icon-box-style card per item, brand green * icon, Montserrat/Arial typography matching the rest of the homepage. */ .tpl-faq-section { max-width: 780px; margin-left: auto; margin-right: auto; } .tpl-faq-list { display: flex; flex-direction: column; gap: 14px; margin-top: 2em; } .tpl-faq-item { background: #ffffff; box-shadow: 0px 0px 5px 2px rgba(0, 0, 0, 0.2); border-radius: 0; padding: 4px 24px; } .tpl-faq-item summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 12px 0; font-family: 'Montserrat', serif; font-size: 17px; font-weight: 500; color: #000000; } .tpl-faq-item summary::-webkit-details-marker { display: none; } .tpl-faq-item summary::after { content: '+'; flex-shrink: 0; font-size: 24px; font-weight: 400; color: #6d902b; transition: transform 0.25s ease; } .tpl-faq-item[open] summary::after { transform: rotate(45deg); } .tpl-faq-item summary:focus-visible { outline: 2px solid #6d902b; outline-offset: 3px; } .tpl-faq-item p { padding-bottom: 14px; font-family: Arial, sans-serif; font-size: 15px; line-height: 1.8; color: #000000 !important; } @media (max-width: 767px) { .tpl-faq-item { padding: 4px 18px; } .tpl-faq-item summary { font-size: 16px; } } /* More (link-in-bio page) */ .tpl-more-page { min-height: 100vh; background-size: cover; background-position: center; background-repeat: no-repeat; display: flex; justify-content: center; padding: 40px 16px; font-family: 'Roboto', sans-serif; } .tpl-more-inner { width: 100%; max-width: 480px; display: flex; flex-direction: column; align-items: center; gap: 16px; } .tpl-more-logo { max-width: 220px; margin-bottom: 20px; } .tpl-more-card { display: flex; flex-direction: column; align-items: center; text-align: center; width: 100%; background: #f9f9f9; border-radius: 10px; padding: 24px 20px; text-decoration: none; color: #333333; } .tpl-more-card-icon { font-size: 30px; color: #6d902b; margin-bottom: 10px; } .tpl-more-card-title { font-family: 'Montserrat', serif; font-weight: 700; font-size: 16px; color: #333333; margin-bottom: 6px; } .tpl-more-card-desc { font-size: 14px; font-weight: 300; color: #6a7680; } .tpl-more-card .tpl-divider { margin: 12px auto; } .tpl-more-card-sub { font-size: 12px; color: #6a7680; } .tpl-more-footer-links { display: flex; gap: 30px; margin-top: 10px; } .tpl-more-footer-link { display: flex; flex-direction: column; align-items: center; font-size: 11px; font-weight: 600; color: #ffffff; } .tpl-more-footer-link .tpl-more-card-icon { color: #ffffff; font-size: 22px; margin-bottom: 4px; } /* Product grid / cards (Produkte, Produktbundles, Startseite) — matches the original "premium-woo-products" grid_1 skin: 3 columns, white circular add-to-cart icon button over the image (see .tpl-product-cart-btn below). */ .tpl-product-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; list-style: none; margin: 2em 0 0; padding: 0; } /* Storefront's own woocommerce.css sets width/float/margin-right on ul.products li.product for its float-based 3-col layout (via ".site-main ul.products li.product", which — despite looking less specific — beats this selector on tie-broken specificity since it has one more type selector). That leaves real width/float applied on top of our grid, shrinking items to ~29% of their grid track. !important forces ours to actually win, instead of editing the parent theme's file. */ .tpl-product-grid.products li.product { margin-right: 0 !important; width: auto !important; float: none !important; } @media (max-width: 767px) { .tpl-product-grid { grid-template-columns: repeat(2, 1fr); } } .tpl-product { text-align: left; } .tpl-product-thumb { position: relative; overflow: hidden; } .tpl-product-thumb img { width: 100% !important; max-width: 100% !important; height: auto !important; display: block; border-radius: 0 !important; } .tpl-product-cart-btn { position: absolute; top: 10px; right: 10px; } .tpl-product-cart-btn a.add_to_cart_button, .tpl-product-cart-btn a.added_to_cart { box-sizing: border-box !important; display: flex !important; align-items: center !important; justify-content: center !important; width: 36px !important; height: 36px !important; min-width: 36px !important; min-height: 36px !important; margin: 0 !important; padding: 0 !important; background: #ffffff !important; border: 1px solid #333333 !important; border-radius: 50% !important; font-size: 0 !important; line-height: 36px !important; color: #6d902b !important; text-decoration: none !important; } .tpl-product-cart-btn a.add_to_cart_button::before { font-family: "Font Awesome 5 Free"; font-weight: 900; content: "\f291"; font-size: 15px; } /* Measured (not guessed): specifically on the standalone Produkte / Produktbundles pages this icon glyph renders ~3px left of the circle's true center; the identical markup/CSS in the homepage's own Produktbundles section and in the carousel both render it dead-center already — a browser sub-pixel text-rendering quirk tied to this particular page context, not a layout bug, so it's nudged back only there. */ .tpl-product-grid-page .tpl-product-cart-btn a.add_to_cart_button::before { left: 3px; position: relative; } /* After WooCommerce's AJAX add succeeds it puts `.added` on the button itself (add-to-cart.js) and appends a separate `.added_to_cart` "view cart" link that's hidden below — target both so the basket glyph flips to a checkmark. */ .tpl-product-cart-btn a.add_to_cart_button.added::before, .tpl-product-cart-btn a.added_to_cart::before { font-family: "Font Awesome 5 Free"; font-weight: 900; content: "\f00c"; font-size: 15px; position: relative; top: 1px; } .tpl-product-cart-btn a.add_to_cart_button:hover, .tpl-product-cart-btn a.added_to_cart:hover { background: #6d902b; border-color: #6d902b; color: #ffffff; } /* WooCommerce's AJAX add-to-cart JS appends a separate "Warenkorb ansehen" link after the button once it succeeds — redundant next to the checkmark icon the button itself already switches to, so hide it. */ .tpl-product-cart-btn a.added_to_cart.wc-forward { display: none !important; } .tpl-product-title-link, .tpl-product-title-link:hover { text-decoration: none !important; color: #000000; font-family: "Inter Tight", Sans-serif; font-weight: 400; text-transform: none; } .tpl-product .woocommerce-loop-product__title { font-size: 18px !important; font-weight: 400; color: #333333; text-align: left; margin: 14px 0 4px; } .tpl-product .price { display: block; text-align: left; color: #333333; font-size: 15px; } .tpl-product .price .price-suffix, .tpl-product .price ins { color: #999999; font-size: 12px; font-weight: 400; text-decoration: none; } /* "Zum Produkt" link under the price on each product card — links through to the single product page (the add-to-cart icon over the image stays as is). Full width to match the loop "In den Warenkorb" / "Ausführung wählen" buttons (see .button.product_type_* rule in style.css). */ .tpl-product-more-btn { display: block; width: 100%; box-sizing: border-box; margin: 10px 0 0; text-align: center; } /* Same look as the carousel cards (centered text, square thumb) for grids that should match it visually without the scrolling behaviour — e.g. the homepage Produktbundles section. Plain CSS Grid kept fighting Storefront's own float-grid rules on ul.products li.product for track placement, so this uses flex-wrap instead (same mechanism the carousel itself already uses successfully) — items that don't fit the row wrap to the next one. carousel.js measures the real pixel width per row (3 → 2 → 1, same breakpoints as the carousel) into --tpl-grid-item-width, so sizing stays identical to the carousel cards at every screen size. */ .tpl-product-grid-carousel-style { display: flex !important; flex-wrap: wrap; justify-content: flex-start; gap: 0; max-width: 1320px; } .tpl-product-grid-carousel-style .tpl-product { text-align: center; box-sizing: border-box !important; flex: 0 0 var(--tpl-grid-item-width, 356px) !important; width: var(--tpl-grid-item-width, 356px) !important; margin-left: 0 !important; padding: 0 6px; } .tpl-product-grid-carousel-style .tpl-product .woocommerce-loop-product__title, .tpl-product-grid-carousel-style .tpl-product .price, .tpl-product-grid-carousel-style .tpl-product-title-link { text-align: center; } .tpl-product-grid-carousel-style .tpl-product-thumb { border-radius: 0; } /* Carousel (Startseite: Bestseller) — a continuous one-direction marquee, not a step-and-snap-back slider: tpl_product_carousel() renders the product list 4x back to back, and this animates translateX(0) to translateX(-25%) (= one pass width) in an endless loop, so it always keeps moving the same way and the wrap-around is invisible (same technique as the .top-banner ticker elsewhere on this site). Rendering 4 passes instead of just 2 leaves enough extra buffer either side for the prev/next arrows and manual drag (carousel.js) to also move freely without ever running out of duplicated content, even when a category has as few as 3 products. Viewport is exactly 3 × item width so three full cards are always visible, never a cut-off partial one. */ .tpl-carousel { position: relative; margin-top: 0.2em; max-width: 1320px; } .tpl-carousel-viewport { overflow: hidden; width: 1320px; max-width: 100%; margin: 0; } /* Manual drag/swipe layer: purely an extra translateX offset stacked on top of the track below, which keeps running its own unmodified auto-scroll animation the whole time — dragging never touches that animation. */ .tpl-carousel-drag { cursor: grab; touch-action: pan-y; -webkit-user-select: none; user-select: none; will-change: transform; } .tpl-carousel-drag.tpl-carousel-dragging { cursor: grabbing; } .tpl-carousel-track { display: flex; gap: 0; width: max-content; --tpl-carousel-steps: 6; animation: tpl-carousel-scroll calc(var(--tpl-carousel-steps) * 4s) steps(var(--tpl-carousel-steps)) infinite; } /* Responsive: 3 visible on desktop, 2 on tablet, 1 on mobile. A plain % item width can't work here — it would resolve against the track itself, which is deliberately "width: max-content" (so all the duplicated items fit in one long row for the marquee); that's a circular dependency, so the browser falls back to each item's own content size instead, leaving a stray sliver of the next item peeking in. carousel.js measures the viewport's real pixel width instead and writes it into --tpl-item-width, which this reads. */ @media (max-width: 767px) { .tpl-carousel { margin-left: 32px; margin-right: 32px; } } .tpl-carousel:hover .tpl-carousel-track { animation-play-state: paused; } @keyframes tpl-carousel-scroll { from { transform: translateX(0); } to { transform: translateX(-25%); } } .tpl-carousel-track.tpl-product-grid { display: flex; } .tpl-carousel-track .tpl-product { box-sizing: border-box !important; flex: 0 0 var(--tpl-item-width, 356px) !important; width: var(--tpl-item-width, 356px) !important; margin-right: 0 !important; padding: 0 6px; text-align: center; } .tpl-carousel-track .tpl-product .woocommerce-loop-product__title, .tpl-carousel-track .tpl-product .price, .tpl-carousel-track .tpl-product-title-link { text-align: center; } .tpl-carousel-track .tpl-product-thumb { border-radius: 0; } .tpl-carousel-arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; background: #54595F; border: none; border-radius: 50%; color: #6d902b; cursor: pointer; } .tpl-carousel-arrow svg { width: 16px; height: 16px; } .tpl-carousel-arrow:hover { background: #3f4247; } .tpl-carousel-arrow.tpl-carousel-prev { left: -10px; } .tpl-carousel-arrow.tpl-carousel-next { right: -10px; } .tpl-carousel-track img { -webkit-user-drag: none; user-drag: none; pointer-events: none; } /* * Über uns page (template-ueber-uns.php) — one warm, left-anchored narrative: * hero → story (left-rail timeline on a cream panel) → Antonio pull-quote → * interview (accordion, reuses .tpl-faq-*). Shared across all three sections: * Montserrat .tpl-home-title headings, Arial black body like the homepage, * brand green #6d902b as the single accent, everything left-aligned, sections * parted by whitespace (no grey hairlines). */ /* homepage body typography on this page too (base .tpl-page is Roboto/grey) */ .tpl-ueber-uns p, .tpl-ueber-uns li { font-family: Arial, sans-serif; font-size: 15px; font-weight: 400; line-height: 1.8; letter-spacing: normal; color: #000000; } .tpl-ueber-uns .tpl-home-title { margin: 0 0 0.5em; } /* even section rhythm, whitespace only */ .tpl-ueber-uns > .tpl-hero, .tpl-ueber-uns > .tpl-section, .tpl-ueber-uns > .tpl-ueber-values, .tpl-ueber-uns > .tpl-ueber-cta { margin-top: 0; margin-bottom: 3.25em; } .tpl-ueber-uns > *:last-child { margin-bottom: 0; } /* the green bands get extra breathing room from the sections around them */ .tpl-ueber-uns > .tpl-ueber-values { margin-bottom: 5em; } .tpl-ueber-uns > .tpl-ueber-cta { margin-top: 5em; margin-bottom: 5em; } @media (max-width: 767px) { .tpl-ueber-uns > .tpl-hero, .tpl-ueber-uns > .tpl-section, .tpl-ueber-uns > .tpl-ueber-values, .tpl-ueber-uns > .tpl-ueber-cta { margin-bottom: 2.25em; } .tpl-ueber-uns > .tpl-ueber-values { margin-bottom: 3em; } .tpl-ueber-uns > .tpl-ueber-cta { margin-top: 3em; margin-bottom: 3em; } } /* ---------- 1. Hero ---------- */ .tpl-ueber-uns-headings .tpl-hero.tpl-ueber-hero { grid-template-columns: 3fr 2fr; align-items: stretch; margin-top: 2em; } .tpl-ueber-hero .tpl-hero-text { align-self: center; } .tpl-ueber-uns-headings .tpl-ueber-hero .tpl-hero-text h1 { margin-top: 0; } /* Round portrait — anton-rund-480.png carries its own green disc; it just sits centred in its column, no panel behind it. */ .tpl-ueber-portrait { display: flex; align-items: center; justify-content: center; } .tpl-ueber-portrait img { display: block; width: 100%; max-width: 340px; height: auto; border-radius: 50%; } @media (max-width: 767px) { .tpl-ueber-uns-headings .tpl-hero.tpl-ueber-hero { grid-template-columns: 1fr; } .tpl-ueber-portrait { order: -1; } .tpl-ueber-portrait img { max-width: 240px; } } /* ---------- 2. Story: centered rail, stations alternate left / right ---------- */ .tpl-timeline-section > .tpl-home-title, .tpl-timeline-intro { text-align: center; } .tpl-timeline-intro { max-width: 60ch; margin: 0 auto 0.5em; } .tpl-timeline { position: relative; list-style: none; margin: 2.6em auto 0; padding: 0; max-width: 1000px; } /* the centered rail */ .tpl-timeline::before { content: ""; position: absolute; left: 50%; transform: translateX(-50%); top: 8px; bottom: 8px; width: 2px; background: #cdd8bd; } /* odd stations → left half, right-aligned toward the rail */ .tpl-timeline-item { position: relative; width: 50%; box-sizing: border-box; padding: 0 42px 2.6em 0; text-align: right; } /* even stations → right half, left-aligned toward the rail */ .tpl-timeline-item:nth-child(even) { margin-left: 50%; padding: 0 0 2.6em 42px; text-align: left; } .tpl-timeline-item:last-child { padding-bottom: 0; } /* the dot — straddles the centered rail */ .tpl-timeline-item::before { content: ""; position: absolute; top: 6px; right: -9px; width: 18px; height: 18px; border-radius: 50%; background: #ffffff; border: 3px solid #6d902b; box-sizing: border-box; } .tpl-timeline-item:nth-child(even)::before { left: -9px; right: auto; } .tpl-timeline-item--now::before { background: #6d902b; } .tpl-timeline-year { display: block; font-family: 'Montserrat', serif; font-size: 14px; font-weight: bold; letter-spacing: 0.5px; color: #6d902b; line-height: 1.2; margin-bottom: 0.1em; } .tpl-ueber-uns-headings .tpl-timeline-item h3 { font-family: 'Montserrat', serif; font-size: 18px; font-weight: 500; color: #000000; margin: 0 0 0.3em; } .tpl-timeline-item p { margin: 0; max-width: 44ch; } /* odd (left) station: push its text block toward the rail */ .tpl-timeline-item:nth-child(odd) p { margin-left: auto; } @media (max-width: 860px) { .tpl-timeline-section > .tpl-home-title, .tpl-timeline-intro { text-align: left; } .tpl-timeline-intro { margin-left: 0; } .tpl-timeline { max-width: none; margin-top: 2.2em; } .tpl-timeline::before { left: 7px; transform: none; } .tpl-timeline-item, .tpl-timeline-item:nth-child(even) { width: 100%; margin-left: 0; padding: 0 0 1.9em 32px; text-align: left; } .tpl-timeline-item:last-child { padding-bottom: 0; } .tpl-timeline-item::before, .tpl-timeline-item:nth-child(even)::before { left: 0; right: auto; width: 16px; height: 16px; } .tpl-timeline-item p, .tpl-timeline-item:nth-child(odd) p { max-width: none; margin-left: 0; } } /* ---------- 3. "Was uns wichtig ist" — Qualität · Handwerk · Amore on a centered green band (same green/white treatment as the homepage .tpl-abo-banner). Icons are inline SVG — Font Awesome is not loaded on the frontend, so would render nothing. ---------- */ .tpl-ueber-values { margin-left: 0; margin-right: 0; padding: clamp(40px, 6vw, 64px) clamp(24px, 5vw, 48px); background: #6d902b; color: #ffffff; text-align: center; } .tpl-ueber-uns .tpl-ueber-values .tpl-home-title { color: #ffffff; margin: 0 0 clamp(24px, 4vw, 40px); } .tpl-ueber-values-grid { list-style: none; max-width: 900px; margin: 0 auto; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 36px; text-align: center; } .tpl-ueber-values-grid li { display: flex; flex-direction: column; align-items: center; gap: 10px; } /* Round icon chip — same treatment as the Abomodell "So funktioniert's" step icons (.tpl-abomodell-flow .tpl-abomodell-step i). */ .tpl-ueber-value-icon { width: 56px; height: 56px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: rgba(255, 255, 255, 0.16); color: #ffffff; font-size: 20px; } .tpl-ueber-values-grid strong { font-family: 'Montserrat', serif; font-size: 18px; font-weight: 500; letter-spacing: 0.6px; color: #ffffff; } .tpl-ueber-uns .tpl-ueber-values-grid p { font-family: Arial, sans-serif; font-size: 13.5px; font-weight: 400; line-height: 1.65; /* !important beats style.css's sitewide `p { color: #000 !important; }` */ color: rgba(255, 255, 255, 0.9) !important; max-width: 26ch; margin: 0; } @media (max-width: 767px) { .tpl-ueber-values-grid { grid-template-columns: 1fr; gap: 26px; } } /* ---------- Green CTA band between the story and the interview — Antonio quote + a link into the shop (same green/white treatment as .tpl-abo-banner, .tpl-footer-btn button). ---------- */ .tpl-ueber-cta { margin-left: 0; margin-right: 0; padding: clamp(40px, 6vw, 64px) clamp(24px, 5vw, 48px); background: #6d902b; color: #ffffff; text-align: center; } .tpl-ueber-uns .tpl-ueber-cta-title { font-family: 'Montserrat', serif; font-size: clamp(24px, 3.2vw, 36px); font-weight: 400; line-height: 1.25; /* !important beats style.css's sitewide `p { color: #000 !important; }` */ color: #ffffff !important; margin: 0 0 0.35em; } .tpl-ueber-uns .tpl-ueber-cta-text { font-family: Arial, sans-serif; font-size: 15px; line-height: 1.7; color: rgba(255, 255, 255, 0.9) !important; max-width: 46ch; margin: 0 auto clamp(22px, 3vw, 32px); } .tpl-ueber-cta .tpl-footer-btn { margin-top: 0; } /* ---------- 4. Interview: standard centered FAQ accordion ---------- */ .tpl-ueber-interview .tpl-faq-list { margin-top: 1.6em; } /* * Instagram-Section auf der Startseite (template-homepage.php) — kuratierte * quadratische Kacheln, die aufs Instagram-Profil verlinken. Kein Feed-Plugin. */ .tpl-home .tpl-instagram-section { margin-top: 7.5em; } @media (max-width: 767px) { .tpl-home .tpl-instagram-section { margin-top: 4em; } } .tpl-instagram-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin: 1.8em 0 0; } .tpl-instagram-tile { position: relative; display: block; aspect-ratio: 1 / 1; overflow: hidden; background: #f1f1ec; } /* Video-Kachel ist ein