/* ============================================================ DMC fix-media.css - Echte Bilder, Notturno di Modena (800k) Geteilte Bild-Klassen: .hero-media .photo .photo-frame .photo-scrim .gallery .partners plus Marken-Logos. Laedt zuletzt im . Nur Tokens; die Scrim-Alphas spiegeln den bestehenden components.css .hero__media-Stil (Wert = --bg). Bewegung nur transform/opacity/filter, reduced-motion sicher. ============================================================ */ /* ---------- Marke: Dreizack-Emblem im Header ---------- */ /* logo-trident.png ist schwarz auf transparent -> invert(1) = weiss auf dunkel */ .brand__logo{ height:26px;width:auto;flex:none; filter:invert(1);opacity:.94; transition:opacity var(--dur-normal) var(--ease-standard), filter var(--dur-normal) var(--ease-standard); } .brand:hover .brand__logo{ opacity:1;filter:invert(1) drop-shadow(0 0 7px var(--accent-glow)); } /* ---------- Marke: weisse Wortmarke im Footer ---------- */ .footer-wordmark{ width:min(232px,74%);height:auto;aspect-ratio:800 / 239; opacity:.92;margin-bottom:var(--space-1); } /* ---------- Foto-Grundbehandlung (heterogene Fotos vereinheitlichen) ---------- */ .photo{ display:block;width:100%;height:100%;object-fit:cover;object-position:center; filter:saturate(.9) contrast(1.03) brightness(.96); } .photo-frame{ position:relative;isolation:isolate;overflow:hidden; border:1px solid var(--hairline);border-radius:var(--radius-lg); background:var(--bg-2);box-shadow:var(--shadow-2),var(--edge-catch); } .photo-frame .photo,.photo-frame img{ transition:transform var(--dur-slow) var(--ease-out-quint), filter var(--dur-normal) var(--ease-standard); } .photo-frame:hover .photo,.photo-frame:hover img{ transform:scale(1.04); filter:saturate(1) contrast(1.04) brightness(1); } .photo-scrim{ position:absolute;inset:0;z-index:1;pointer-events:none; background:linear-gradient(180deg,transparent 40%, oklch(13% .02 264 / .5) 78%,var(--bg) 100%); } .photo--contain{object-fit:contain;filter:none} /* ---------- HOME-Hero: Full-Bleed Kuehlergrill + kinematischer Scrim ---------- */ .home-hero .hero-media{ position:absolute;inset:0;z-index:-1;overflow:hidden;background:var(--bg-2); } .home-hero .hero-media img{ width:100%;height:100%;object-fit:cover;object-position:50% 42%; filter:saturate(1) contrast(1.08) brightness(1.32); transform:scale(1.16); } .home-hero .hero-media::after{ content:"";position:absolute;inset:0; background: linear-gradient(180deg, oklch(13% .02 264 / .32) 0%, oklch(13% .02 264 / .04) 30%, oklch(13% .02 264 / .2) 58%, oklch(13% .02 264 / .78) 84%, var(--bg) 100%), radial-gradient(120% 85% at 14% 100%,oklch(13% .02 264 / .4),transparent 66%); } /* ---------- Intro: dezenter kinematischer Fahrzeug-Streifen ---------- */ .intro__media{ margin-top:var(--space-9);width:100%;aspect-ratio:1920 / 600; } @media (max-width:640px){.intro__media{aspect-ratio:16 / 9}} /* ---------- Foto-Galerie (geteilt, responsiv) ---------- */ .gallery{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,16rem),1fr)); gap:var(--gutter); } .gallery .photo-frame{aspect-ratio:4 / 3} /* ---------- Partner-Leiste ---------- Heterogene Logos (dunkel auf transparent, hell auf transparent, deckend farbig oder weiss) auf einer hellen Traeger-Platte vereinheitlicht: entsaettigt und ruhig by default, Farbe beim Hover. Das Baeumer-Logo ist nahezu weiss und wuerde auf der hellen Platte verschwinden -> invertiert, damit es wie die dunklen Logos liest. */ .partners-section{width:100%;max-width:var(--container-xl);margin-inline:auto;padding-inline:var(--gutter)} .partners{ list-style:none;margin:var(--space-2) 0 0;padding:0; display:grid;grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--space-5);align-items:stretch; } .partners__item{min-width:0;display:flex} .partner-chip{ display:flex;align-items:center;justify-content:center;width:100%; min-height:5.5rem;padding:var(--space-5) var(--space-6); background:var(--text);border-radius:var(--radius-md); box-shadow:var(--shadow-2),var(--edge-catch); transition:transform var(--dur-normal) var(--ease-out-quint), box-shadow var(--dur-normal) var(--ease-standard); } .partner-chip img{ max-height:3.25rem;width:auto;max-width:84%;object-fit:contain; filter:grayscale(1) opacity(.72); transition:filter var(--dur-normal) var(--ease-standard); } .partner-chip:hover{transform:translateY(-3px);box-shadow:var(--shadow-3)} .partner-chip:hover img{filter:grayscale(0) opacity(1)} /* Baeumer ist ein sehr helles Logo -> invertieren fuer Lesbarkeit auf heller Platte */ .partner-chip img[src*="baeumer"]{filter:grayscale(1) invert(1) opacity(.76)} .partner-chip:hover img[src*="baeumer"]{filter:grayscale(1) invert(1) opacity(1)} /* ---------- Mitglieder-Karte (nur auf /mitglieder/karte sichtbar) ---------- */ .member-map{display:none} [data-member-body="karte"] .member-map{ display:block;max-width:44rem;margin:0 auto var(--space-7); aspect-ratio:1200 / 1390;background:var(--bg-2); } [data-member-body="karte"] .member-map .photo{ object-fit:contain;filter:saturate(.95) brightness(.98); } [data-member-body="karte"] .member-map:hover .photo{transform:none} /* ---------- Responsive ---------- */ @media (max-width:900px){ .partners{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-4)} } @media (max-width:768px){ .footer-wordmark{width:min(212px,66%)} } @media (max-width:560px){ .partner-chip{min-height:5rem;padding:var(--space-4) var(--space-5)} .partner-chip img{max-height:2.75rem;max-width:88%} } /* ---------- Reduced Motion: keine Zoom-/Sweep-Bewegung ---------- */ @media (prefers-reduced-motion: reduce){ .home-hero .hero-media img{transform:none} .photo-frame:hover .photo,.photo-frame:hover img{transform:none} .partner-chip:hover{transform:none} }