/* ========================================================= ZT Card Stack Overlappende Sticky-Karten. Mobile first. ========================================================= */ .ztcs { /* Farben – aus der Live-Seite abgeleitet */ --ztcs-accent: #6a9b75; --ztcs-accent-deep: #5d8967; --ztcs-ink: #212a21; --ztcs-paper: #fefdfb; --ztcs-tint-1: #f7fff7; --ztcs-tint-2: #efffef; --ztcs-solid: #74aa81; --ztcs-muted: #b1b1b2; /* Layout */ --ztcs-top: 110px; --ztcs-step: 28px; --ztcs-media-ratio: 1.23; --ztcs-panel-x: 6%; --ztcs-panel-y: 8%; --ztcs-radius: 26px; --ztcs-gap: clamp(1rem, 2.5vw, 2rem); /* Typografie folgt dem Theme */ font-family: inherit; display: flex; flex-direction: column; gap: var(--ztcs-gap); } /* Sticky braucht sichtbaren vertikalen Overflow bei ALLEN Vorfahren, den eingeschlossen. Themes setzen dort gern overflow:hidden, um horizontales Scrollen zu unterbinden. Deshalb wird nur die vertikale Achse freigegeben und die horizontale auf "clip" gesetzt: clip erzeugt keinen Scroll-Container und hebt Sticky damit nicht auf, klemmt aber weiterhin horizontal ab. */ html:has(.ztcs), body:has(.ztcs), .vc_row:has(.ztcs), .wpb_column:has(.ztcs), .vc_column-inner:has(.ztcs), .wpb_wrapper:has(> .ztcs) { overflow-y: visible; } @supports (overflow-x: clip) { body:has(.ztcs), .vc_row:has(.ztcs), .wpb_column:has(.ztcs), .vc_column-inner:has(.ztcs), .wpb_wrapper:has(> .ztcs) { overflow-x: clip; } } /* ---------- Karte ---------- */ .ztcs__card { background: var(--ztcs-tint-1); color: var(--ztcs-ink); border-radius: var(--ztcs-radius); padding: clamp(1.5rem, 3.5vw, 3rem); box-shadow: 0 1px 2px rgba(33, 42, 33, 0.04), 0 18px 40px -24px rgba(33, 42, 33, 0.28); } .ztcs__card--mid { background: var(--ztcs-tint-2); } .ztcs__card--solid { background: var(--ztcs-solid); --ztcs-ink: var(--ztcs-paper); --ztcs-muted: rgba(254, 253, 251, 0.72); } .ztcs__body { display: grid; grid-template-columns: 1fr; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; } /* ---------- Textspalte ---------- */ .ztcs__eyebrow { margin: 0 0 0.5rem; color: var(--ztcs-muted); font-size: 0.8rem; letter-spacing: 0.14em; text-transform: uppercase; line-height: 1.4; } .ztcs__title { margin: 0 0 0.9rem; color: var(--ztcs-ink); font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.05rem); line-height: 1.15; } .ztcs__card--light .ztcs__title, .ztcs__card--mid .ztcs__title { color: var(--ztcs-accent); } .ztcs__text { margin: 0 0 1.75rem; max-width: 46ch; font-size: clamp(0.95rem, 0.9rem + 0.2vw, 1.05rem); line-height: 1.6; } .ztcs__text p { margin: 0 0 0.75rem; } .ztcs__text p:last-child { margin-bottom: 0; } .ztcs__price { margin: 0 0 1.5rem; display: flex; align-items: baseline; gap: 0.25rem; line-height: 1; } .ztcs__amount { font-size: clamp(2.4rem, 1.8rem + 2.2vw, 3.4rem); font-weight: 600; letter-spacing: -0.01em; color: var(--ztcs-ink); } .ztcs__card--light .ztcs__amount, .ztcs__card--mid .ztcs__amount { color: var(--ztcs-accent); } .ztcs__currency { font-size: 0.95rem; color: inherit; opacity: 0.9; } /* ---------- Button ---------- */ .ztcs__btn { display: inline-block; max-width: 100%; padding: 0.95em 1.9em; border-radius: 999px; background: var(--ztcs-accent); color: var(--ztcs-paper); font-size: 0.85rem; font-weight: 600; letter-spacing: 0.1em; line-height: 1.2; text-transform: uppercase; text-decoration: none; text-align: center; overflow-wrap: break-word; } .ztcs__btn:hover, .ztcs__btn:focus-visible { background: var(--ztcs-accent-deep); color: var(--ztcs-paper); } .ztcs__card--solid .ztcs__btn { background: var(--ztcs-tint-2); color: var(--ztcs-accent); } .ztcs__card--solid .ztcs__btn:hover, .ztcs__card--solid .ztcs__btn:focus-visible { background: var(--ztcs-paper); color: var(--ztcs-accent-deep); } .ztcs__btn:focus-visible { outline: 2px solid var(--ztcs-ink); outline-offset: 3px; } @media (prefers-reduced-motion: no-preference) { .ztcs__btn { transition: background-color 0.2s ease, color 0.2s ease; } } /* ---------- Bild + Leistungsliste ---------- */ .ztcs__media { display: flex; flex-direction: column; gap: 1rem; min-width: 0; } .ztcs__img { display: block; width: 100%; height: auto; aspect-ratio: var(--ztcs-media-ratio); /* contain statt cover: das Bild wird nie beschnitten, auch wenn das angegebene Seitenverhältnis nicht exakt stimmt. */ object-fit: contain; object-position: center; border-radius: 20px; } .ztcs__panel { /* Flex-Spalte, damit der Inhalt in der festen Panelhöhe vertikal mittig sitzt statt oben zu kleben. */ display: flex; flex-direction: column; justify-content: center; background: rgba(255, 255, 255, 0.72); border: 1px solid rgba(255, 255, 255, 0.6); border-radius: 20px; padding: clamp(1.1rem, 2.5vw, 1.9rem); box-shadow: 0 10px 30px -18px rgba(33, 42, 33, 0.35); } @supports (backdrop-filter: blur(1px)) { .ztcs__panel { background: rgba(255, 255, 255, 0.58); backdrop-filter: blur(18px) saturate(1.15); } } .ztcs__panel-title { margin: 0 0 0.9rem; color: var(--ztcs-accent); font-size: clamp(1.05rem, 1rem + 0.3vw, 1.2rem); line-height: 1.2; } .ztcs__list { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.7rem; } .ztcs__list li { position: relative; padding-left: 2.1rem; color: #212a21; font-size: clamp(0.9rem, 0.87rem + 0.15vw, 1rem); line-height: 1.45; } .ztcs__list li::before { content: ""; position: absolute; left: 0.15rem; top: 0.28em; width: 1.05em; height: 0.6em; border-left: 2.5px solid var(--ztcs-accent); border-bottom: 2.5px solid var(--ztcs-accent); transform: rotate(-45deg); } /* ---------- Ab Tablet: zwei Spalten, Panel liegt auf dem Bild ---------- */ @media (min-width: 900px) { .ztcs__body { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); } /* Die Bildfläche ergibt sich aus dem Bild selbst. Damit sitzt das Panel immer exakt im Bild – unabhängig vom Seitenverhältnis. */ .ztcs__media { display: block; position: relative; } /* Nur wenn ein Seitenverhältnis erzwungen wurde, bekommt die Fläche eine feste Form und die Panels aller Karten werden gleich groß. */ .ztcs--fixed-ratio .ztcs__media { aspect-ratio: var(--ztcs-media-ratio); } .ztcs--fixed-ratio .ztcs__img { height: 100%; aspect-ratio: auto; } .ztcs__panel { position: absolute; top: var(--ztcs-panel-y); left: var(--ztcs-panel-x); right: var(--ztcs-panel-x); bottom: auto; /* Feste Höhe als Untergrenze. Passt eine sehr lange Liste nicht hinein, wächst das Panel, statt zu überlaufen. */ min-height: calc(100% - 2 * var(--ztcs-panel-y)); } } /* ---------- Ab Desktop: Karten stapeln sich ---------- Nur bei ausreichender Fensterhöhe, sonst würde der obere Teil einer Karte hinter dem Header verschwinden. */ @media (min-width: 1024px) { .ztcs__card { position: sticky; top: calc(var(--ztcs-top) + var(--i, 0) * var(--ztcs-step)); } }