/* ═══════════════════════════════════════════════════════════════════ JAC MOTORS — Layout Enthaelt bewusst KEINE Farbwerte, Schriftnamen oder Radien. Alles kommt aus css/jac-tokens.css. Ladereihenfolge: fonts.css → style.css → jac-fonts.css → jac-tokens.css → jac.css ═══════════════════════════════════════════════════════════════════ */ /* ── Typografie-Scope ─────────────────────────────────────────────── Nur der Seiteninhalt bekommt die JAC-Schrift. mcf-Header, Footer und das an gehaengte Anfrage-Modal bleiben Mulish. */ .jac-scope { font-family: var(--jac-font-body); color: var(--jac-ink); } .jac-scope h1, .jac-scope h2, .jac-scope h3, .jac-scope h4 { font-family: var(--jac-font-display); font-weight: var(--jac-weight-bold); letter-spacing: var(--jac-tracking-tight); color: var(--jac-ink); } .jac-scope p { color: var(--jac-ink-soft); } /* :where() haelt die Spezifitaet bei 0, damit Buttons und Karten, die als ausgezeichnet sind, ihre eigene Textfarbe behalten */ .jac-scope :where(a) { color: var(--jac-primary); } /* Kicker ueber Ueberschriften */ .jac-kicker { display: block; font-size: 12px; font-weight: var(--jac-weight-bold); letter-spacing: var(--jac-tracking-wide); text-transform: uppercase; color: var(--jac-accent); margin-bottom: var(--jac-space-3); } /* ── Sub-Navigation ───────────────────────────────────────────────── .header in style.css ist position:fixed und belegt damit keinen Platz im Fluss. Ohne margin-top laege die Sub-Navigation hinter dem Header und der gesamte Seiteninhalt waere um die Headerhoehe nach oben verschoben. */ .jac-subnav { position: sticky; top: var(--jac-header-h); margin-top: var(--jac-header-h); z-index: 90; background: var(--jac-surface); border-bottom: 1px solid var(--jac-border); } .jac-subnav-list { display: flex; gap: var(--jac-space-6); margin: 0; padding: 0; list-style: none; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity; } .jac-subnav-list::-webkit-scrollbar { display: none; } .jac-subnav-link { display: block; padding: var(--jac-space-4) 2px; white-space: nowrap; scroll-snap-align: start; font-family: var(--jac-font-display); font-size: 15px; font-weight: var(--jac-weight-medium); text-decoration: none; color: var(--jac-ink-soft); border-bottom: 2px solid transparent; transition: var(--jac-transition); } .jac-subnav-link:hover { color: var(--jac-ink); } .jac-subnav-link.is-active { color: var(--jac-accent); border-bottom-color: var(--jac-accent); } /* ── Buttons ────────────────────────────────────────────────────── */ .jac-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--jac-space-2); padding: var(--jac-space-4) var(--jac-space-8); font-family: var(--jac-font-display); font-size: 15px; font-weight: var(--jac-weight-bold); line-height: 1.2; text-align: center; text-decoration: none; border: 2px solid transparent; border-radius: var(--jac-radius-md); cursor: pointer; transition: var(--jac-transition); } .jac-btn-primary { background: var(--jac-accent); color: var(--jac-on-accent); } .jac-btn-primary:hover { background: var(--jac-accent-dark); color: var(--jac-on-accent); } .jac-btn-secondary { background: var(--jac-primary); color: var(--jac-on-primary); } .jac-btn-secondary:hover { background: var(--jac-primary-dark); color: var(--jac-on-primary); } .jac-btn-outline { background: transparent; border-color: var(--jac-border); color: var(--jac-ink); } .jac-btn-outline:hover { border-color: var(--jac-ink); color: var(--jac-ink); } .jac-btn-on-dark { background: transparent; border-color: rgba(255, 255, 255, .5); color: var(--jac-on-dark); } .jac-btn-on-dark:hover { background: var(--jac-on-dark); color: var(--jac-ink); border-color: var(--jac-on-dark); } /* ── Hero ─────────────────────────────────────────────────────────── Dunkler Grund statt Markenblau: die Guideline untersagt das weisse Logo auf Flaechen nahe der Hauptfarbe. Midnight Black ist sicher. */ .jac-hero { position: relative; background: var(--jac-surface-dark); color: var(--jac-on-dark); padding: var(--jac-space-24) 0 var(--jac-space-16); overflow: hidden; } .jac-hero-media { position: absolute; inset: 0; z-index: 0; } .jac-hero-media img { width: 100%; height: 100%; object-fit: cover; } .jac-hero-media::after { content: ''; position: absolute; inset: 0; background: linear-gradient( 100deg, rgba(17, 21, 29, .92) 0%, rgba(17, 21, 29, .78) 45%, rgba(17, 21, 29, .35) 100% ); } .jac-hero-inner { position: relative; z-index: 1; max-width: 620px; } .jac-hero-logo { display: block; width: 120px; min-width: var(--jac-logo-min); height: auto; margin-bottom: var(--jac-space-8); } .jac-hero .jac-kicker { color: var(--jac-on-dark); opacity: .75; } .jac-hero-title { font-size: clamp(2rem, 5vw, 3.25rem); line-height: 1.1; margin-bottom: var(--jac-space-4); } .jac-scope .jac-hero-title { color: var(--jac-on-dark); } .jac-hero-text { font-size: 1.05rem; line-height: 1.7; margin-bottom: var(--jac-space-8); } .jac-scope .jac-hero-text { color: rgba(255, 255, 255, .85); } .jac-hero-actions { display: flex; flex-wrap: wrap; gap: var(--jac-space-3); } /* ── Modellkarte ────────────────────────────────────────────────── */ .jac-model-card { display: flex; flex-direction: column; background: var(--jac-surface); border: 1px solid var(--jac-border); border-radius: var(--jac-radius-lg); overflow: hidden; text-decoration: none; transition: var(--jac-transition); } .jac-model-card:hover { transform: translateY(-4px); box-shadow: var(--jac-shadow-md); } .jac-model-card-media { position: relative; aspect-ratio: 4 / 3; background: var(--jac-surface-alt); } .jac-model-card-media img { width: 100%; height: 100%; object-fit: cover; } .jac-model-card-body { display: flex; flex-direction: column; flex: 1; gap: var(--jac-space-2); padding: var(--jac-space-6); } .jac-model-card-title { font-size: 1.25rem; margin: 0; } .jac-model-card-sub { font-size: .9rem; margin: 0; flex: 1; } .jac-model-card-foot { display: flex; align-items: baseline; justify-content: space-between; gap: var(--jac-space-3); margin-top: var(--jac-space-2); } /* ── Pills und Badges ───────────────────────────────────────────── */ .jac-pill { display: inline-flex; align-self: flex-start; /* sonst dehnt der Flex-Container die Pill */ align-items: center; gap: var(--jac-space-1); padding: 4px var(--jac-space-3); border-radius: var(--jac-radius-pill); font-size: 11px; font-weight: var(--jac-weight-bold); letter-spacing: .04em; text-transform: uppercase; color: var(--jac-on-fuel); background: var(--jac-drive-fuel); } .jac-pill--ev { background: var(--jac-drive-ev); color: var(--jac-on-ev); } .jac-pill--phev { background: var(--jac-drive-phev); color: var(--jac-on-phev); } .jac-badge-soon { position: absolute; top: var(--jac-space-3); left: var(--jac-space-3); padding: 5px var(--jac-space-3); border-radius: var(--jac-radius-pill); background: var(--jac-ink); color: var(--jac-white); font-size: 11px; font-weight: var(--jac-weight-bold); letter-spacing: .04em; text-transform: uppercase; } /* ── Preis ──────────────────────────────────────────────────────── */ .jac-price { font-family: var(--jac-font-display); font-size: 1.35rem; font-weight: var(--jac-weight-bold); color: var(--jac-ink); white-space: nowrap; } .jac-price small { display: block; /* nowrap der Elternregel zuruecknehmen - der Preishinweis ist ein ganzer Satz und wuerde die Seite sonst horizontal aufziehen */ white-space: normal; max-width: 42ch; margin-top: var(--jac-space-1); font-size: .7rem; font-weight: var(--jac-weight-regular); line-height: 1.5; color: var(--jac-ink-soft); } .jac-price-note { margin: var(--jac-space-2) 0 0; font-size: .8rem; line-height: 1.5; } /* ── Verfuegbarkeitshinweis ───────────────────────────────────────── Pflichtangabe fuer noch nicht verkaeufliche Modelle. Muss so auffaellig sein wie ein Preis — deshalb bewusst kein Kleingedrucktes. */ .jac-availability-note { display: flex; gap: var(--jac-space-4); padding: var(--jac-space-6); margin: var(--jac-space-8) 0; background: var(--jac-primary-tint); border-left: 4px solid var(--jac-primary); border-radius: var(--jac-radius-md); } .jac-availability-note i { flex: 0 0 auto; margin-top: 3px; font-size: 1.15rem; color: var(--jac-primary); } .jac-availability-note strong { display: block; margin-bottom: var(--jac-space-1); font-family: var(--jac-font-display); color: var(--jac-ink); } .jac-scope .jac-availability-note p { margin: 0; font-size: .95rem; line-height: 1.65; color: var(--jac-ink); } /* ── Technische Daten ───────────────────────────────────────────── */ .jac-spec-table { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0; margin: 0; border-top: 1px solid var(--jac-border); } .jac-spec-row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--jac-space-4); padding: var(--jac-space-4) var(--jac-space-2); border-bottom: 1px solid var(--jac-border); } .jac-spec-key { font-size: .9rem; color: var(--jac-ink-soft); } .jac-spec-val { font-family: var(--jac-font-display); font-size: .95rem; font-weight: var(--jac-weight-bold); color: var(--jac-ink); text-align: right; } /* ── Galerie ────────────────────────────────────────────────────── */ .jac-gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--jac-space-4); } .jac-gallery figure { margin: 0; border-radius: var(--jac-radius-md); overflow: hidden; background: var(--jac-surface-alt); } .jac-gallery img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; transition: var(--jac-transition); } .jac-gallery figure:hover img { transform: scale(1.03); } /* Erstes Bild ueber die volle Breite */ .jac-gallery figure:first-child { grid-column: 1 / -1; } .jac-gallery figure:first-child img { aspect-ratio: 21 / 9; } /* ── FAQ (natives details/summary, kein JS) ─────────────────────── */ .jac-faq details { border-bottom: 1px solid var(--jac-border); } .jac-faq summary { display: flex; align-items: center; justify-content: space-between; gap: var(--jac-space-4); padding: var(--jac-space-6) 0; font-family: var(--jac-font-display); font-size: 1.05rem; font-weight: var(--jac-weight-medium); color: var(--jac-ink); cursor: pointer; list-style: none; } .jac-faq summary::-webkit-details-marker { display: none; } .jac-faq summary::after { content: '\002B'; flex: 0 0 auto; font-size: 1.4rem; font-weight: var(--jac-weight-light); color: var(--jac-accent); transition: var(--jac-transition); } .jac-faq details[open] summary::after { transform: rotate(45deg); } .jac-faq summary:focus-visible { outline: 2px solid var(--jac-primary); outline-offset: 2px; } .jac-scope .jac-faq details p { margin: 0 0 var(--jac-space-6); padding-right: var(--jac-space-8); line-height: 1.7; } /* ── ENVKV-Pflichtangaben ───────────────────────────────────────── */ .jac-envkv { padding: var(--jac-space-6); background: var(--jac-surface-alt); border: 1px solid var(--jac-border); border-radius: var(--jac-radius-md); } .jac-envkv-title { margin: 0 0 var(--jac-space-3); font-family: var(--jac-font-display); font-size: .95rem; font-weight: var(--jac-weight-bold); color: var(--jac-ink); } .jac-scope .jac-envkv p, .jac-scope .jac-envkv li { margin: 0 0 var(--jac-space-2); font-size: .85rem; line-height: 1.6; color: var(--jac-ink-soft); } .jac-envkv ul { margin: 0; padding-left: var(--jac-space-6); } /* CO2-Klasse in der Farbskala des amtlichen Energielabels, damit sie wiedererkennbar ist. Textfarbe je Klasse so gewaehlt, dass der Kontrast WCAG AA erreicht - auf Gelb waere Weiss unlesbar. */ .jac-envkv-co2 { display: inline-block; min-width: 26px; padding: 2px var(--jac-space-2); border-radius: var(--jac-radius-sm); background: var(--jac-ink); color: var(--jac-white); font-weight: var(--jac-weight-bold); text-align: center; } .jac-envkv-co2--a { background: #007A34; color: #FFFFFF; } .jac-envkv-co2--b { background: #3B8123; color: #FFFFFF; } /* leicht abgedunkelt: das Label-Gruen erreicht nur 4,31:1 */ .jac-envkv-co2--c { background: #C8D400; color: #1C1C1B; } .jac-envkv-co2--d { background: #FFED00; color: #1C1C1B; } .jac-envkv-co2--e { background: #FBBA00; color: #1C1C1B; } .jac-envkv-co2--f { background: #EF7D00; color: #1C1C1B; } .jac-envkv-co2--g { background: #D40511; color: #FFFFFF; } /* Warnbanner, solange die Werte nicht gegen das CoC-Datenblatt geprueft sind. Absichtlich haesslich — das darf nicht live gehen. */ .jac-envkv-unverified { padding: var(--jac-space-4); margin-bottom: var(--jac-space-4); background: repeating-linear-gradient( 45deg, #FFE8A3, #FFE8A3 12px, #FFD666 12px, #FFD666 24px ); border: 2px solid #B38600; border-radius: var(--jac-radius-sm); font-family: var(--jac-font-display); font-size: .85rem; font-weight: var(--jac-weight-bold); color: #4A3800; } /* ── Aktions-Konditionen ────────────────────────────────────────── */ .jac-terms { padding: var(--jac-space-6); border: 1px solid var(--jac-border); border-radius: var(--jac-radius-md); } .jac-scope .jac-terms p, .jac-scope .jac-terms li { font-size: .8rem; line-height: 1.6; } /* ── CTA-Band ───────────────────────────────────────────────────── */ .jac-cta-band { padding: var(--jac-space-16) 0; background: var(--jac-primary); color: var(--jac-on-primary); text-align: center; } .jac-scope .jac-cta-band h2 { color: var(--jac-on-primary); } .jac-scope .jac-cta-band p { max-width: 560px; margin: var(--jac-space-3) auto var(--jac-space-8); color: rgba(255, 255, 255, .9); } .jac-cta-band .jac-hero-actions { justify-content: center; } /* ── Bestand: Leerzustand ───────────────────────────────────────── */ .jac-stock-empty { padding: var(--jac-space-16) var(--jac-space-8); text-align: center; background: var(--jac-surface-alt); border-radius: var(--jac-radius-lg); } .jac-stock-empty i { font-size: 2.25rem; color: var(--jac-primary); margin-bottom: var(--jac-space-4); } .jac-stock-empty h3 { margin: 0 0 var(--jac-space-3); } .jac-scope .jac-stock-empty p { max-width: 520px; margin: 0 auto var(--jac-space-8); } /* ── Marken-Intro mit Kennzahlen ────────────────────────────────── */ .jac-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--jac-space-8); margin-top: var(--jac-space-12); } .jac-fact-num { display: block; font-family: var(--jac-font-display); font-size: clamp(1.75rem, 4vw, 2.5rem); font-weight: var(--jac-weight-bold); color: var(--jac-primary); line-height: 1.1; } .jac-fact-lbl { display: block; margin-top: var(--jac-space-2); font-size: .85rem; color: var(--jac-ink-soft); } /* ── Responsive ─────────────────────────────────────────────────── */ @media (max-width: 768px) { /* .header-content wird bei <=768px auf 64px hoch */ .jac-subnav { top: 64px; margin-top: 64px; } .jac-subnav-list { gap: var(--jac-space-4); -webkit-mask-image: linear-gradient(90deg, #000 86%, transparent); mask-image: linear-gradient(90deg, #000 86%, transparent); } .jac-subnav-link { font-size: 14px; } .jac-hero { padding: var(--jac-space-16) 0 var(--jac-space-12); } .jac-hero-media::after { background: linear-gradient( 180deg, rgba(17, 21, 29, .70) 0%, rgba(17, 21, 29, .88) 60%, rgba(17, 21, 29, .95) 100% ); } .jac-hero-logo { width: 88px; } .jac-hero-actions .jac-btn { flex: 1 1 100%; } .jac-gallery figure:first-child img { aspect-ratio: 3 / 2; } .jac-availability-note { padding: var(--jac-space-4); } .jac-cta-band { padding: var(--jac-space-12) 0; } }