/* Etz Chaim Prototyp-Kit — gemeinsame Grundlage für alle Design-Varianten */ *,*::before,*::after{box-sizing:border-box} /* Überlaufschutz: auf schmalen Geräten darf nichts seitlich herausragen. Fängt zu breite Bilder, lange Wörter und feste Breiten ab. */ html,body{max-width:100%;overflow-x:clip} img,svg,video,canvas,iframe{max-width:100%} h1,h2,h3,h4,p,li,a,span{overflow-wrap:anywhere} html{scroll-behavior:smooth} body{margin:0;background:var(--ec-cream);color:var(--ec-ink); font-family:var(--ec-font-body);font-size:var(--ec-body-size);line-height:1.65; -webkit-font-smoothing:antialiased} h1,h2,h3,h4{font-family:var(--ec-font-display);color:var(--ec-bordeaux); line-height:1.1;margin:0 0 .4em;font-weight:400;letter-spacing:.01em} h1{font-size:clamp(2.6rem,6vw,4.6rem)} h2{font-size:clamp(2rem,4vw,3.1rem)} h3{font-size:clamp(1.3rem,2.2vw,1.7rem)} p{margin:0 0 1em;max-width:68ch} a{color:inherit} img{max-width:100%;height:auto;display:block} ::selection{background:var(--ec-yellow);color:var(--ec-bordeaux)} .wrap{width:min(100% - 3rem,var(--ec-max));margin-inline:auto} .section{padding-block:var(--ec-section-y)} .section--tight{padding-block:calc(var(--ec-section-y) * .5)} .grid{display:grid;gap:clamp(1.5rem,3vw,2.8rem)} .grid-3{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))} .grid-2{grid-template-columns:repeat(auto-fit,minmax(360px,1fr))} .split{display:grid;gap:clamp(2rem,5vw,4rem);align-items:center; grid-template-columns:repeat(auto-fit,minmax(320px,1fr))} /* Buttons — System der Live-Seite: primär rot, sekundär weiss */ .btn{display:inline-flex;align-items:center;gap:.55em;border:0;cursor:pointer; font-family:var(--ec-font-body);font-weight:700;font-size:1rem; padding:.85em 1.8em;border-radius:var(--ec-radius);text-decoration:none; transition:transform .25s cubic-bezier(.34,1.56,.64,1),box-shadow .25s,background .2s} .btn--primary{background:var(--ec-red);color:#fff;box-shadow:0 6px 18px rgba(223,49,49,.28)} .btn--secondary{background:#fff;color:var(--ec-bordeaux);box-shadow:0 6px 18px rgba(64,0,0,.12)} .btn--ghost{background:transparent;color:var(--ec-bordeaux);box-shadow:inset 0 0 0 2px currentColor} .btn:hover{transform:translateY(-3px) scale(1.02)} .btn:focus-visible{outline:3px solid var(--ec-blue);outline-offset:3px} /* Karten — gleiche Höhe, Bild oben randlos, Text linksbündig */ .card{background:#fff;border-radius:var(--ec-radius-card);overflow:hidden; display:flex;flex-direction:column; box-shadow:0 10px 30px rgba(64,0,0,.07);transition:transform .3s,box-shadow .3s} .card:hover{transform:translateY(-6px);box-shadow:0 18px 44px rgba(64,0,0,.13)} .card__media{aspect-ratio:3/2;overflow:hidden;background:var(--ec-cream)} .card__media img{width:100%;height:100%;object-fit:cover;object-position:center; transition:transform .6s cubic-bezier(.2,.8,.2,1)} .card:hover .card__media img{transform:scale(1.05)} .card__body{padding:1.5rem 1.6rem 1.8rem;display:flex;flex-direction:column;gap:.6rem;flex:1} .card__body .btn{margin-top:auto;align-self:flex-start} .eyebrow{font-family:var(--ec-font-body);font-weight:700;letter-spacing:.14em; text-transform:uppercase;font-size:.78rem;color:var(--ec-red);margin-bottom:.7rem} .lead{font-size:1.15rem} /* Bewegung: sichtbar by default. Erst wenn JS die Animation wirklich startet, setzt es .js-anim auf — so bleibt die Seite ohne JS oder bei Fehlern lesbar. */ .js-anim [data-reveal]{opacity:0;transform:translateY(28px)} @media (prefers-reduced-motion:reduce){ [data-reveal]{opacity:1!important;transform:none!important} html{scroll-behavior:auto} } /* Skip-Link: visually-hidden statt left:-9999px. Der alte Trick sprengt in RTL-Dokumenten die Scrollbreite nach links — Screenshots und Exporte zeigen dann nur leere Fläche. */ .skip{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden; clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0} .skip:focus{position:fixed;width:auto;height:auto;margin:0;clip:auto;clip-path:none; inset-inline-start:1rem;top:1rem;background:#fff;padding:.7rem 1rem;border-radius:8px;z-index:99}