/* ═══════════════════════════════════════════════════════════════════ 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; } } /* ── Ausstattungslinien ───────────────────────────────────────────── */ .jac-variants { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--jac-space-4); } .jac-variant { padding: var(--jac-space-6); background: var(--jac-surface); border: 1px solid var(--jac-border); border-radius: var(--jac-radius-lg); } .jac-variant.is-top { border-color: var(--jac-primary); } .jac-variant-name { margin: 0 0 var(--jac-space-2); font-size: 1.15rem; } .jac-variant-price { margin: 0 0 var(--jac-space-4); padding-bottom: var(--jac-space-4); border-bottom: 1px solid var(--jac-border); font-family: var(--jac-font-display); font-size: 1.5rem; font-weight: var(--jac-weight-bold); color: var(--jac-ink); } .jac-variant-price small { display: block; margin-top: var(--jac-space-1); font-size: .72rem; font-weight: var(--jac-weight-regular); color: var(--jac-ink-soft); } .jac-variant-facts { margin: 0; } .jac-variant-facts > div { display: flex; align-items: baseline; justify-content: space-between; gap: var(--jac-space-4); padding: var(--jac-space-2) 0; border-bottom: 1px solid var(--jac-border); } .jac-variant-facts > div:last-child { border-bottom: 0; } .jac-variant-facts dt { font-size: .85rem; color: var(--jac-ink-soft); } .jac-variant-facts dd { margin: 0; font-family: var(--jac-font-display); font-size: .9rem; font-weight: var(--jac-weight-bold); color: var(--jac-ink); text-align: right; } /* ── Technische Daten als Tabelle ─────────────────────────────────── */ .jac-spectable-wrap { overflow-x: auto; } .jac-spectable { width: 100%; border-collapse: collapse; font-size: .9rem; } .jac-spectable th, .jac-spectable td { padding: var(--jac-space-3) var(--jac-space-4); text-align: left; border-bottom: 1px solid var(--jac-border); vertical-align: top; } .jac-spectable thead th { font-family: var(--jac-font-display); font-size: .8rem; font-weight: var(--jac-weight-bold); color: var(--jac-ink); border-bottom: 2px solid var(--jac-ink); white-space: nowrap; } .jac-spectable tbody th[scope="row"] { font-weight: var(--jac-weight-regular); color: var(--jac-ink-soft); } .jac-spectable td { font-family: var(--jac-font-display); font-weight: var(--jac-weight-bold); color: var(--jac-ink); } .jac-spectable td.is-both { color: var(--jac-ink); } .jac-spectable-group th { padding-top: var(--jac-space-8); font-family: var(--jac-font-display); font-size: .75rem; font-weight: var(--jac-weight-bold); letter-spacing: var(--jac-tracking-wide); text-transform: uppercase; color: var(--jac-accent); border-bottom: 1px solid var(--jac-border); } .jac-spectable tbody:first-of-type .jac-spectable-group th { padding-top: var(--jac-space-4); } /* ── Ausstattungslisten ───────────────────────────────────────────── */ .jac-equip-legend { margin-bottom: var(--jac-space-8); font-size: .85rem; } .jac-equip-group h3 { margin: 0 0 var(--jac-space-4); padding-bottom: var(--jac-space-2); border-bottom: 2px solid var(--jac-primary); font-size: 1rem; } .jac-equip-list { margin: 0 0 var(--jac-space-8); padding: 0; list-style: none; } .jac-equip-list li { display: flex; align-items: flex-start; gap: var(--jac-space-3); padding: var(--jac-space-2) 0; font-size: .9rem; line-height: 1.5; color: var(--jac-ink); } .jac-equip-list i { flex: 0 0 auto; margin-top: 4px; font-size: .7rem; color: var(--jac-ev-text); } .jac-tag { display: inline-block; margin-left: var(--jac-space-2); padding: 1px var(--jac-space-2); border-radius: var(--jac-radius-sm); font-size: 10px; font-weight: var(--jac-weight-bold); letter-spacing: .03em; white-space: nowrap; vertical-align: 1px; } .jac-tag--pure { background: var(--jac-surface-alt); color: var(--jac-ink); border: 1px solid var(--jac-border); } .jac-tag--nordic { background: var(--jac-primary); color: var(--jac-on-primary); } /* ── Farben / Blöcke ──────────────────────────────────────────────── */ .jac-block-title { margin: 0 0 var(--jac-space-4); padding-bottom: var(--jac-space-2); border-bottom: 2px solid var(--jac-primary); font-size: 1rem; } .jac-chiplist { display: flex; flex-wrap: wrap; gap: var(--jac-space-2); margin: 0; padding: 0; list-style: none; } .jac-chiplist li { padding: var(--jac-space-2) var(--jac-space-4); border: 1px solid var(--jac-border); border-radius: var(--jac-radius-pill); font-size: .85rem; color: var(--jac-ink); } /* ── Förderrechner ────────────────────────────────────────────────── */ .jac-calc { padding: var(--jac-space-8); background: var(--jac-surface); border: 1px solid var(--jac-border); border-radius: var(--jac-radius-lg); } .jac-calc-head h3 { margin: 0 0 var(--jac-space-3); font-size: 1.25rem; } .jac-scope .jac-calc-head p { margin: 0 0 var(--jac-space-8); font-size: .95rem; } .jac-calc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--jac-space-4); margin-bottom: var(--jac-space-8); } .jac-calc-field { display: flex; flex-direction: column; } .jac-calc-label { margin-bottom: var(--jac-space-2); font-family: var(--jac-font-display); font-size: .8rem; font-weight: var(--jac-weight-bold); color: var(--jac-ink); } .jac-calc-inputwrap { position: relative; display: flex; align-items: center; } .jac-calc-input { width: 100%; padding: var(--jac-space-3) var(--jac-space-4); font-family: var(--jac-font-body); font-size: 1rem; color: var(--jac-ink); background: var(--jac-surface); border: 1px solid var(--jac-border); border-radius: var(--jac-radius-md); } .jac-calc-input:focus-visible { outline: 2px solid var(--jac-primary); outline-offset: 1px; border-color: var(--jac-primary); } .jac-calc-inputwrap .jac-calc-input { padding-right: 36px; } .jac-calc-unit { position: absolute; right: var(--jac-space-4); font-size: .95rem; color: var(--jac-ink-soft); pointer-events: none; } .jac-calc-hint { margin-top: var(--jac-space-2); font-size: .75rem; color: var(--jac-ink-soft); } .jac-calc-result { padding: var(--jac-space-6); border-radius: var(--jac-radius-md); border-left: 4px solid var(--jac-border); background: var(--jac-surface-alt); } .jac-calc-result.is-positiv { border-left-color: var(--jac-drive-ev); background: #EAF6F0; } .jac-calc-result.is-negativ { border-left-color: var(--jac-ink-soft); } .jac-calc-headline { margin: 0 0 var(--jac-space-4); font-family: var(--jac-font-display); font-size: 1.1rem; font-weight: var(--jac-weight-regular); color: var(--jac-ink); } .jac-calc-headline strong { font-size: 1.5rem; font-weight: var(--jac-weight-bold); } .jac-calc-rows { margin: var(--jac-space-4) 0; } .jac-calc-row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--jac-space-4); padding: var(--jac-space-2) 0; font-size: .9rem; color: var(--jac-ink); } .jac-calc-row span:last-child { font-family: var(--jac-font-display); font-weight: var(--jac-weight-bold); white-space: nowrap; } .jac-calc-row.is-abzug { color: var(--jac-ev-text); } .jac-calc-row.is-total { margin-top: var(--jac-space-2); padding-top: var(--jac-space-3); border-top: 1px solid var(--jac-border); font-size: 1.05rem; } .jac-calc-row.is-total span:last-child { font-size: 1.25rem; } .jac-scope .jac-calc-note { margin: var(--jac-space-3) 0 0; font-size: .78rem; line-height: 1.6; } .jac-calc-details { margin-top: var(--jac-space-6); } .jac-calc-details summary { padding: var(--jac-space-3) 0; font-family: var(--jac-font-display); font-size: .85rem; font-weight: var(--jac-weight-bold); color: var(--jac-primary); cursor: pointer; } .jac-calc-details summary:focus-visible { outline: 2px solid var(--jac-primary); outline-offset: 2px; } .jac-scope .jac-calc-details li, .jac-scope .jac-calc-details p { font-size: .78rem; line-height: 1.6; } .jac-calc-details ul { margin: 0 0 var(--jac-space-4); padding-left: var(--jac-space-6); } .jac-calc-cta { margin-top: var(--jac-space-6); } @media (max-width: 768px) { .jac-calc { padding: var(--jac-space-4); } .jac-calc-grid { grid-template-columns: 1fr; } .jac-calc-cta .jac-btn { width: 100%; } .jac-spectable th, .jac-spectable td { padding: var(--jac-space-2) var(--jac-space-3); } } /* ── Haftungsausschluss am Foerderrechner ──────────────────────────── Bewusst sichtbar statt eingeklappt und farblich abgesetzt: Der Hinweis gehoert unmittelbar zur ausgegebenen Geldsumme. */ .jac-calc-disclaimer { display: flex; gap: var(--jac-space-4); margin-top: var(--jac-space-4); padding: var(--jac-space-4) var(--jac-space-6); background: var(--jac-surface-alt); border: 1px solid var(--jac-border); border-left: 4px solid var(--jac-ink-soft); border-radius: var(--jac-radius-md); } .jac-calc-disclaimer > i { flex: 0 0 auto; margin-top: 3px; font-size: 1rem; color: var(--jac-ink-soft); } .jac-calc-disclaimer strong { display: block; margin-bottom: var(--jac-space-2); font-family: var(--jac-font-display); font-size: .9rem; color: var(--jac-ink); } .jac-scope .jac-calc-disclaimer p { margin: 0; font-size: .8rem; line-height: 1.65; color: var(--jac-ink); } .jac-scope .jac-calc-stand { margin-top: var(--jac-space-3) !important; color: var(--jac-ink-soft) !important; } @media (max-width: 768px) { .jac-calc-disclaimer { padding: var(--jac-space-4); gap: var(--jac-space-3); } } /* ── Befristete Verkaufsaktion ────────────────────────────────────── */ .jac-aktion { position: relative; padding: var(--jac-space-8); background: var(--jac-surface); border: 2px solid var(--jac-accent); border-radius: var(--jac-radius-lg); } .jac-aktion-head { margin-bottom: var(--jac-space-4); } .jac-aktion-title { margin: 0 0 var(--jac-space-1); font-size: clamp(1.4rem, 3vw, 1.9rem); } .jac-scope .jac-aktion-fahrzeug { margin: 0; font-family: var(--jac-font-display); font-size: .95rem; font-weight: var(--jac-weight-medium); color: var(--jac-ink); } .jac-scope .jac-aktion-text { margin: 0 0 var(--jac-space-6); font-size: .95rem; line-height: 1.7; } .jac-aktion-preisbox { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--jac-space-4); padding: var(--jac-space-6) 0; border-top: 1px solid var(--jac-border); border-bottom: 1px solid var(--jac-border); } .jac-aktion-preis { display: block; font-family: var(--jac-font-display); font-size: clamp(2rem, 6vw, 2.75rem); font-weight: var(--jac-weight-bold); line-height: 1.1; color: var(--jac-ink); } .jac-aktion-uvp { display: block; margin-top: var(--jac-space-2); font-size: .8rem; color: var(--jac-ink-soft); } .jac-aktion-uvp s { color: var(--jac-ink-soft); } .jac-aktion-badge { display: inline-flex; flex-direction: column; align-items: center; gap: 2px; padding: var(--jac-space-3) var(--jac-space-6); border-radius: var(--jac-radius-md); background: var(--jac-accent); color: var(--jac-on-accent); font-family: var(--jac-font-display); font-size: 1.25rem; font-weight: var(--jac-weight-bold); white-space: nowrap; } .jac-aktion-badge small { font-size: .68rem; font-weight: var(--jac-weight-regular); opacity: .95; } .jac-aktion-rows { margin: var(--jac-space-6) 0; } .jac-aktion-row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--jac-space-4); padding: var(--jac-space-2) 0; font-size: .9rem; color: var(--jac-ink); } .jac-aktion-row span:last-child { font-family: var(--jac-font-display); font-weight: var(--jac-weight-bold); white-space: nowrap; } .jac-aktion-row.is-total { margin-top: var(--jac-space-2); padding-top: var(--jac-space-3); border-top: 1px solid var(--jac-border); font-size: 1.05rem; } .jac-aktion-row.is-total span:last-child { font-size: 1.2rem; } .jac-scope .jac-aktion-frist { display: flex; align-items: center; gap: var(--jac-space-2); margin: 0 0 var(--jac-space-6); font-family: var(--jac-font-display); font-size: .9rem; font-weight: var(--jac-weight-bold); color: var(--jac-accent); } .jac-aktion-cta { margin-bottom: var(--jac-space-6); } .jac-aktion-hinweise { margin: 0; padding-left: var(--jac-space-6); border-top: 1px solid var(--jac-border); padding-top: var(--jac-space-4); } .jac-scope .jac-aktion-hinweise li { font-size: .78rem; line-height: 1.6; color: var(--jac-ink-soft); } /* Aktionsvariante in der Linienübersicht hervorheben */ .jac-variant.is-aktion { border-color: var(--jac-accent); border-width: 2px; } .jac-variant-aktionsbadge { display: inline-block; margin-bottom: var(--jac-space-3); padding: 3px var(--jac-space-3); border-radius: var(--jac-radius-pill); background: var(--jac-accent); color: var(--jac-on-accent); font-size: 10px; font-weight: var(--jac-weight-bold); letter-spacing: .04em; text-transform: uppercase; } .jac-variant-uvp { display: block; margin-top: var(--jac-space-1); font-size: .75rem; font-weight: var(--jac-weight-regular); color: var(--jac-ink-soft); } @media (max-width: 768px) { .jac-aktion { padding: var(--jac-space-4); } .jac-aktion-preisbox { flex-direction: column; align-items: flex-start; gap: var(--jac-space-3); } .jac-aktion-cta .jac-btn { width: 100%; } } /* ── Konfigurator: Linien und Farben ─────────────────────────────── */ .jac-konf-step { margin-bottom: var(--jac-space-8); } .jac-konf-legend { margin: 0 0 var(--jac-space-4); font-family: var(--jac-font-display); font-size: .8rem; font-weight: var(--jac-weight-bold); letter-spacing: var(--jac-tracking-wide); text-transform: uppercase; color: var(--jac-accent); } .jac-konf-linien { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--jac-space-3); } .jac-konf-linie { display: flex; flex-direction: column; gap: var(--jac-space-1); padding: var(--jac-space-4); text-align: left; background: var(--jac-surface); border: 2px solid var(--jac-border); border-radius: var(--jac-radius-md); cursor: pointer; transition: var(--jac-transition); } .jac-konf-linie:hover { border-color: var(--jac-ink-soft); } .jac-konf-linie.is-aktiv { border-color: var(--jac-primary); background: var(--jac-primary-tint); } .jac-konf-linie:focus-visible { outline: 2px solid var(--jac-primary); outline-offset: 2px; } .jac-konf-linie-name { font-family: var(--jac-font-display); font-size: .95rem; font-weight: var(--jac-weight-bold); color: var(--jac-ink); } .jac-konf-linie-fakten { font-size: .78rem; color: var(--jac-ink-soft); } .jac-konf-linie-preis { margin-top: var(--jac-space-2); font-family: var(--jac-font-display); font-size: 1.05rem; font-weight: var(--jac-weight-bold); color: var(--jac-ink); } .jac-konf-linie-preis s { margin-left: var(--jac-space-2); font-size: .8rem; font-weight: var(--jac-weight-regular); color: var(--jac-ink-soft); } .jac-konf-farben { display: flex; flex-wrap: wrap; gap: var(--jac-space-3); } .jac-konf-farbe { padding: 3px; background: none; border: 2px solid transparent; border-radius: 50%; cursor: pointer; line-height: 0; transition: var(--jac-transition); } .jac-konf-farbe:hover { border-color: var(--jac-border); } .jac-konf-farbe.is-aktiv { border-color: var(--jac-primary); } .jac-konf-farbe:focus-visible { outline: 2px solid var(--jac-primary); outline-offset: 2px; } .jac-konf-punkt { display: block; width: 34px; height: 34px; border-radius: 50%; /* feine Kontur, damit auch Weiss auf Weiss erkennbar bleibt */ box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .18); } .jac-scope .jac-konf-farbname { margin: var(--jac-space-4) 0 0; font-size: .85rem; color: var(--jac-ink); } .jac-konf-farbname strong { font-family: var(--jac-font-display); font-weight: var(--jac-weight-bold); } @media (max-width: 768px) { .jac-konf-linien { grid-template-columns: 1fr; } .jac-konf-punkt { width: 38px; height: 38px; } /* groessere Tippflaeche */ .jac-konf-farben { gap: var(--jac-space-2); } } /* ── Highlights-Liste ueber den Ausstattungsgruppen ──────────────── */ .jac-highlights { margin-bottom: var(--jac-space-12); } .jac-highlights-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 0 var(--jac-space-8); margin-bottom: 0; } /* ── Konfigurator: Finanzierung ─────────────────────────────────── */ .jac-konf-badge { display: inline-block; margin-left: var(--jac-space-2); padding: 2px 8px; border-radius: var(--jac-radius-pill); background: var(--jac-red); color: var(--jac-on-primary); font-size: .7rem; font-weight: 700; letter-spacing: .04em; text-transform: none; } .jac-konf-farbhinweis { margin-top: var(--jac-space-2); font-size: .8rem; color: var(--jac-ink-soft); } .jac-calc-fin { margin-top: var(--jac-space-6); padding-top: var(--jac-space-6); border-top: 1px solid var(--jac-border); } .jac-calc-headline-sub { font-size: .95rem; font-weight: 400; color: var(--jac-ink-soft); } /* Repraesentativbeispiel nach § 6a PAngV. Bewusst nuechtern und vollstaendig sichtbar - es ist eine Pflichtangabe, kein Werbeelement. */ .jac-finbeispiel { margin-top: var(--jac-space-6); padding: var(--jac-space-6); border: 1px solid var(--jac-border); border-radius: var(--jac-radius-md); background: var(--jac-surface); } .jac-finbeispiel-title { margin: 0 0 var(--jac-space-1); font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--jac-ink); } .jac-finbeispiel-lead { margin: 0 0 var(--jac-space-4); font-size: .85rem; color: var(--jac-ink-soft); } .jac-finbeispiel-list { margin: 0; } .jac-finbeispiel-list > div { display: flex; justify-content: space-between; gap: var(--jac-space-4); padding: 6px 0; border-bottom: 1px solid var(--jac-border); font-size: .85rem; } .jac-finbeispiel-list > div:last-child { border-bottom: 0; } .jac-finbeispiel-list dt { color: var(--jac-ink-soft); } .jac-finbeispiel-list dd { margin: 0; text-align: right; font-weight: 600; color: var(--jac-ink); } .jac-finbeispiel-note { margin: var(--jac-space-4) 0 0; font-size: .8rem; line-height: 1.5; color: var(--jac-ink-soft); } /* Bei nur einer Ausstattungslinie entfaellt die Auswahl. Ohne diese Regel gewinnt "display: grid" der Klasse gegen das hidden-Attribut, und es stand eine Karte ohne Alternative auf der Seite. */ .jac-konf-linien[hidden] { display: none; }