/* ============================================================ DMC fix-media2.css - Event- und History-Bildintegration Ergaenzt fix-media.css (geteilte .photo/.photo-frame/.photo-scrim/.gallery). Laedt zuletzt im (nach fix-04-events + fix-media). Nur Tokens. Deckt: Event-Karten-Medien + Datums-Badge, Veranstaltungs-Detail (Hero-Bild + Fakten-Aside + Galerie), Markenhistorie-Feature/Galerie, Historische Fahrzeuge (routen-gebunden). Bewegung nur transform/opacity/filter, reduced-motion sicher. ============================================================ */ /* ---------- Foto-Bildunterschrift als Overlay ueber dem Scrim ---------- */ .photo-frame figcaption, .photo-cap{ position:absolute;left:0;right:0;bottom:0;z-index:2;margin:0; padding:var(--space-7) var(--space-4) var(--space-3); font-family:var(--font-mono);font-size:var(--text-caption); letter-spacing:.02em;line-height:var(--leading-snug);color:var(--text); text-transform:none;pointer-events:none; } /* ============================================================ EVENT-KARTEN Die designte components.css-Struktur (Medien + Datums-Badge + Body + gestreckter Link) aktivieren. fix-04-events.css hatte den Link fuer das alte flache DOM statisch gemacht; hier zurueck auf das intendierte Karten-Layout (gilt in .event-grid; die Home- Schiene nutzt bereits die components.css-Regeln direkt). ============================================================ */ .event-grid .event-card__link{position:absolute;inset:0;display:block;height:auto;padding:0} .event-grid .event-card__link:focus-visible{outline:2px solid var(--accent-hover);outline-offset:-2px;border-radius:var(--radius-lg)} .event-grid .event-card__date{ order:0;position:absolute;top:var(--space-3);left:var(--space-3);right:auto;bottom:auto; z-index:2;display:grid;place-items:center;gap:.05em;min-width:3.4em; padding:var(--space-2) var(--space-3);text-align:center; background:oklch(13% .02 264 / .82);border:1px solid var(--hairline); border-radius:var(--radius-md);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px); } .event-card__date .d{font-family:var(--font-display);font-weight:700;font-size:var(--text-h4);line-height:1;color:var(--text)} .event-card__date .m{font-family:var(--font-mono);font-size:.62rem;text-transform:uppercase;letter-spacing:var(--tracking-wide);color:var(--accent-hover)} /* Foto-Vereinheitlichung in Karten (heterogene Quellen zusammenfuehren) */ .event-card__media img{filter:saturate(.92) contrast(1.03) brightness(.95)} /* Leere Vektor-Platte, wenn kein Foto vorliegt (elegant statt leer) */ .event-card__media--plate{background:radial-gradient(78% 74% at 50% 32%,var(--surface-2),var(--bg-2) 84%)} .event-card__media--plate::after{content:"";position:absolute;inset:0;background:url("/assets/img/ghost-trident.svg") no-repeat center / auto 74%;opacity:1} /* Karten-Titel: keine Silbentrennung mitten im Wort (text-wrap:balance uebernimmt) */ .event-card__title{hyphens:manual} /* Body-Meta (Datum . Ort) */ .event-card__meta .mi--date{color:var(--text)} .event-card__meta .mi--place{color:var(--text-muted)} .event-card__meta .mi+.mi{position:relative;padding-left:calc(var(--space-4) + 4px)} .event-card__meta .mi+.mi::before{content:"";position:absolute;left:var(--space-2);top:50%;width:4px;height:4px;margin-top:-2px;border-radius:var(--radius-round);background:var(--text-faint)} /* Archiv-Karten etwas dichter */ .event-grid--archive .event-card__body{padding:var(--space-4) var(--space-5)} .event-grid--archive .event-card__title{font-size:var(--text-body)} .event-grid--archive .event-card__date{min-width:3em;padding:var(--space-1) var(--space-2)} .event-grid--archive .event-card__date .d{font-size:var(--text-h4)} /* ============================================================ VERANSTALTUNG DETAIL - Hero-Bild + Fakten-Aside + Galerie ============================================================ */ .event-hero{ padding:var(--space-8);align-content:end; min-height:clamp(300px,50svh,460px); border-radius:var(--radius-lg);box-shadow:var(--shadow-3); } .event-hero__media{position:absolute;inset:0;z-index:-1;overflow:hidden;border-radius:inherit;background:var(--bg-2)} .event-hero__media .photo{width:100%;height:100%;object-fit:cover;object-position:center;filter:saturate(.95) contrast(1.05) brightness(.9)} .event-hero__media .photo-scrim{background:linear-gradient(180deg,oklch(13% .02 264 / .3) 0%,oklch(13% .02 264 / .1) 40%,oklch(13% .02 264 / .74) 88%,var(--bg) 100%)} .event-hero__media--plate{background:radial-gradient(120% 95% at 22% 18%,var(--surface-2),var(--bg-2))} .event-hero__media--plate::after{content:"";position:absolute;inset:0;background:url("/assets/img/ghost-trident.svg") no-repeat 90% center / auto 74%;opacity:.85} .event-hero__inner{position:relative;z-index:1;max-width:60ch} .event-hero__title{font-family:var(--font-display);font-weight:700;font-size:var(--text-h1);line-height:var(--leading-tight);letter-spacing:var(--tracking-tight);color:var(--text);margin:var(--space-2) 0 0;text-shadow:0 2px 28px oklch(13% .02 264 / .65)} .event-detail__layout{display:grid;gap:var(--space-8);margin-top:var(--space-9)} @media (min-width:1024px){.event-detail__layout{grid-template-columns:minmax(0,1fr) 340px;gap:var(--space-9)}} .event-detail__main{min-width:0} .event-detail__main>.event-detail__lead{margin-top:0;margin-bottom:var(--space-8);max-width:var(--container-prose)} .event-detail__aside{align-self:start} @media (min-width:1024px){.event-detail__aside{position:sticky;top:calc(var(--header-h) + var(--space-5))}} .event-facts__cta{width:100%;justify-content:center;margin-top:var(--space-5)} /* Detail-Galerie (z. B. Sizilien) */ .event-gallery{margin-top:var(--space-9)} .event-gallery .section__header{margin-bottom:var(--space-6)} .event-gallery .gallery .photo-frame{aspect-ratio:4 / 3} /* Collage-Kacheln: dominantes Panel in den Blick ruecken */ .photo--bias-left{object-position:15% 50%} .photo--bias-right{object-position:85% 50%} /* ============================================================ MARKENHISTORIE - Renn-Feature + Ikonen-Galerie ============================================================ */ .history-feature{margin:var(--space-8) 0 var(--space-9);aspect-ratio:1920 / 840} @media (max-width:640px){.history-feature{aspect-ratio:3 / 2}} .history-feature .photo{filter:saturate(.85) contrast(1.06) brightness(.93)} .history-icons{margin-top:var(--space-10)} .history-icons .gallery{margin-top:var(--space-7)} .history-icons .gallery .photo-frame{aspect-ratio:3 / 2} /* Jahreszahlen der Meilenstein-Timeline nie umbrechen (z. B. 1939/40) */ .rally-timeline__year{white-space:nowrap} /* ============================================================ HISTORISCHE FAHRZEUGE - nur auf /club/historische-fahrzeuge (geteiltes club-generic-Template; per Route eingeblendet) ============================================================ */ .club-vehicles{display:none} body[data-route="/club/historische-fahrzeuge"] .club-vehicles{display:block;margin-top:var(--space-10)} .club-vehicles__feature{aspect-ratio:1920 / 820;margin-bottom:var(--space-7)} @media (max-width:640px){.club-vehicles__feature{aspect-ratio:3 / 2}} .club-vehicles .gallery .photo-frame{aspect-ratio:4 / 3} /* ---------- Reduced Motion ---------- */ @media (prefers-reduced-motion: reduce){ .event-card:hover .event-card__media img{transform:none} }