/* ==========================================================================
Caravan Center Diez — Typografie-System (Clamp / fluid)
Für WordPress + Enfold → Enfold ▸ Allgemeine Styling-Optionen ▸
Quick CSS ODER child-theme/style.css
Getestet für Viewports 320px – 1920px. Keine Media Queries nötig.
========================================================================== */
/* --------------------------------------------------------------------------
1) FONTS LADEN
Empfehlung: Fonts self-hosten (DSGVO + LCP). Für den Schnellstart via CDN
folgende Zeile in die (Enfold ▸ Header ▸ Extra Elements) einfügen:
-------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------
2) TOKENS
-------------------------------------------------------------------------- */
:root{
/* --- Font Families --- */
--ccd-font-heading: "spacegrotesk", system-ui, -apple-system, sans-serif;
--ccd-font-body: "manrope", system-ui, -apple-system, sans-serif;
--ccd-font-mono: "spacemono", ui-monospace, "Courier New", monospace;
/* --- Fluid Type Scale ---------------------------------------------------
Aufbau: clamp(MIN, PREFERRED, MAX)
PREFERRED = Basis-rem + vw-Anteil → skaliert linear mit dem Viewport
---------------------------------------------------------------------- */
--ccd-fs-display: clamp(2.25rem, 1.30rem + 4.20vw, 4.00rem); /* 36 → 64px Hero H1 */
--ccd-fs-h1: clamp(1.95rem, 1.30rem + 2.90vw, 3.25rem); /* 31 → 52px */
--ccd-fs-h2: clamp(1.65rem, 1.20rem + 2.00vw, 2.50rem); /* 26 → 40px */
--ccd-fs-h3: clamp(1.35rem, 1.10rem + 1.10vw, 1.85rem); /* 22 → 30px */
--ccd-fs-h4: clamp(1.15rem, 1.02rem + 0.60vw, 1.45rem); /* 18 → 23px */
--ccd-fs-h5: clamp(1.05rem, 0.98rem + 0.32vw, 1.20rem); /* 17 → 19px */
--ccd-fs-h6: clamp(0.95rem, 0.92rem + 0.18vw, 1.05rem); /* 15 → 17px */
--ccd-fs-lead: clamp(1.08rem, 1.00rem + 0.42vw, 1.30rem); /* 17 → 21px Subline */
--ccd-fs-body: clamp(1.00rem, 0.96rem + 0.18vw, 1.08rem); /* 16 → 17px Fließtext */
--ccd-fs-small: clamp(0.875rem, 0.85rem + 0.12vw, 0.94rem);/* 14 → 15px */
--ccd-fs-tiny: clamp(0.78rem, 0.76rem + 0.08vw, 0.82rem); /* 12.5 → 13px */
--ccd-fs-label: clamp(0.70rem, 0.68rem + 0.10vw, 0.78rem); /* 11 → 12.5px Eyebrow/Mono */
/* --- Line Heights --- */
--ccd-lh-tight: 1.06; /* Display / H1 */
--ccd-lh-heading: 1.18; /* H2–H4 */
--ccd-lh-snug: 1.40; /* Lead, kurze Blöcke */
--ccd-lh-body: 1.65; /* Fließtext */
/* --- Letter Spacing --- */
--ccd-ls-display: -0.022em;
--ccd-ls-heading: -0.012em;
--ccd-ls-body: 0;
--ccd-ls-label: 0.14em; /* Eyebrows in Versalien */
/* --- Weights --- */
--ccd-fw-regular: 400;
--ccd-fw-medium: 500;
--ccd-fw-semi: 600;
--ccd-fw-bold: 700;
--ccd-fw-black: 800;
/* --- Farben (aus dem Layout, für Typo-Kontext) --- */
--ccd-c-ink: #18142C; /* Headings/Text dunkel */
--ccd-c-body: #3A3652; /* Sekundärtext */
--ccd-c-muted: #6B6880;
--ccd-c-muted-soft: #8A8799;
--ccd-c-accent: #F26A21; /* Orange – Flächen, CTA */
--ccd-c-accent-ink: #C8551A; /* Orange für TEXT/Links auf Hell (WCAG AA) */
--ccd-c-accent-soft: #f6a66e; /* Soft Orange Sub Text Headline*/
--ccd-c-on-dark: #F3F1FA;
--ccd-c-on-dark-2: #B9B4CE;
--ccd-c-withe: #ffffff; /* Weis */
}
/* --------------------------------------------------------------------------
3) BASIS
-------------------------------------------------------------------------- */
html{ -webkit-text-size-adjust:100%; }
body,
#top,
#top .entry-content-wrapper,
#top .av_textblock_section,
#top p{
font-family: var(--ccd-font-body);
font-size: var(--ccd-fs-body);
line-height: var(--ccd-lh-body);
letter-spacing: var(--ccd-ls-body);
color: var(--ccd-c-body);
}
#top p{ margin:0 0 1em; text-wrap: pretty; }
/* --------------------------------------------------------------------------
4) HEADINGS (Enfold-Selektoren mitgeführt, damit Theme-CSS überschrieben wird)
-------------------------------------------------------------------------- */
#top h1, #top h2, #top h3, #top h4, #top h5, #top h6,
#top .av-special-heading-tag,
#top .av_textblock_section h1, #top .av_textblock_section h2,
#top .av_textblock_section h3, #top .av_textblock_section h4{
font-family: var(--ccd-font-heading);
color: var(--ccd-c-ink);
text-wrap: balance;
margin-top: 0;
}
#top h1, #top .av-special-heading-tag h1{
font-size: var(--ccd-fs-h1);
line-height: var(--ccd-lh-tight);
letter-spacing: var(--ccd-ls-display);
font-weight: var(--ccd-fw-bold);
margin-bottom: .5em;
}
#top h2, #top .av-special-heading-tag h2{
font-size: var(--ccd-fs-h2);
line-height: var(--ccd-lh-heading);
letter-spacing: var(--ccd-ls-heading);
font-weight: var(--ccd-fw-bold);
margin-bottom: .55em;
}
#top h3{
font-size: var(--ccd-fs-h3);
line-height: var(--ccd-lh-heading);
letter-spacing: var(--ccd-ls-heading);
font-weight: var(--ccd-fw-semi);
margin-bottom: .5em;
}
#top h4{
font-size: var(--ccd-fs-h4);
line-height: var(--ccd-lh-heading);
font-weight: var(--ccd-fw-semi);
margin-bottom: .5em;
}
#top h5{
font-size: var(--ccd-fs-h5);
line-height: var(--ccd-lh-snug);
font-weight: var(--ccd-fw-semi);
margin-bottom: .45em;
}
#top h6{
font-size: var(--ccd-fs-h6);
line-height: var(--ccd-lh-snug);
font-weight: var(--ccd-fw-semi);
margin-bottom: .45em;
}
/* --------------------------------------------------------------------------
5) UTILITY-KLASSEN
In Enfold pro Element unter "Advanced ▸ Developer Settings ▸
Custom CSS Class" eintragen.
-------------------------------------------------------------------------- */
/* Hero-H1: größer als Standard-H1 */
#top .ccd-display,
#top .ccd-display h1,
#top .ccd-display .av-special-heading-tag{
font-family: var(--ccd-font-heading);
font-size: var(--ccd-fs-display);
line-height: var(--ccd-lh-tight);
letter-spacing: var(--ccd-ls-display);
font-weight: var(--ccd-fw-bold);
}
/* Subline unter der Headline */
#top .ccd-lead,
#top .ccd-lead p{
font-size: var(--ccd-fs-lead);
line-height: var(--ccd-lh-snug);
color: var(--ccd-c-muted);
}
/* Eyebrow / Kicker über der Headline (Mono, Versalien) */
#top .ccd-eyebrow,
#top .ccd-eyebrow p{
font-family: var(--ccd-font-mono);
font-size: var(--ccd-fs-label);
line-height: 1.3;
letter-spacing: var(--ccd-ls-label);
text-transform: uppercase;
color: var(--ccd-c-accent-ink);
margin-bottom: .6em;
}
/* Technische Angaben / Specs / Chips */
#top .ccd-mono,
#top .ccd-mono p{
font-family: var(--ccd-font-mono);
font-size: var(--ccd-fs-tiny);
letter-spacing: .01em;
}
/* Kleintext, Bildunterschriften, Meta */
#top .ccd-small,
#top .ccd-small p{
font-size: var(--ccd-fs-small);
line-height: 1.5;
color: var(--ccd-c-muted-soft);
}
/* Buttons / CTA-Typo (Enfold-Buttons mitgefasst) */
#top .ccd-btn,
#top .avia-button,
#top .av-special-heading + .avia-button-wrap .avia-button{
font-family: var(--ccd-font-heading);
font-size: var(--ccd-fs-body);
font-weight: var(--ccd-fw-bold);
letter-spacing: 0;
line-height: 1.2;
}
/* Preise / Kennzahlen */
#top .ccd-price{
font-family: var(--ccd-font-heading);
font-size: var(--ccd-fs-h4);
font-weight: var(--ccd-fw-bold);
color: var(--ccd-c-ink);
letter-spacing: -.01em;
}
/* Typo auf dunklen Sektionen (#18142C) */
#top .ccd-on-dark,
#top .ccd-on-dark h1, #top .ccd-on-dark h2,
#top .ccd-on-dark h3, #top .ccd-on-dark h4,
#top .ccd-on-dark .av-special-heading-tag{ color: var(--ccd-c-on-dark); }
#top .ccd-on-dark p,
#top .ccd-on-dark .ccd-lead{ color: var(--ccd-c-on-dark-2); }
#top .ccd-on-dark .ccd-eyebrow{ color: #F6A66E; }
/* Links im Content */
/*
#top .entry-content-wrapper a:not(.avia-button):not(.ccd-btn){
color: var(--ccd-c-accent-ink);
text-decoration: none;
}
#top .entry-content-wrapper a:not(.avia-button):not(.ccd-btn):hover{
color: var(--ccd-c-ink);
text-decoration: underline;
}
*/
/* Links im Content */
#top .entry-content-wrapper a:not(.avia-button):not(.ccd-btn):not(#footer-page #ccd-footer a) {
color: var(--ccd-c-accent-ink);
text-decoration: none !important;
}
#top .entry-content-wrapper a:not(.avia-button):not(.ccd-btn):not(#footer-page #ccd-footer a):hover {
color: var(--ccd-c-ink);
text-decoration: underline;
}
/* Listen im Content */
#top .entry-content-wrapper ul,
#top .entry-content-wrapper ol{
font-size: var(--ccd-fs-body);
line-height: var(--ccd-lh-body);
}
/* --------------------------------------------------------------------------
6) LESBARKEIT & MESSLÄNGE
-------------------------------------------------------------------------- */
#top .ccd-measure{ max-width: 68ch; } /* Fließtext */
#top .ccd-measure-tight{ max-width: 52ch; } /* Sublines */
#top .ccd-measure-head{ max-width: 22ch; } /* große Headlines */
/* --------------------------------------------------------------------------
7) BARRIEREFREIHEIT (WCAG 2.2 AA)
-------------------------------------------------------------------------- */
#top a:focus-visible,
#top button:focus-visible,
#top input:focus-visible,
#top select:focus-visible,
#top textarea:focus-visible,
#top .avia-button:focus-visible{
outline: 3px solid var(--ccd-c-accent);
outline-offset: 2px;
border-radius: 4px;
}
/* Orange NICHT als Fließtextfarbe auf Weiß verwenden –
dafür ist --ccd-c-accent-ink (#C8551A) vorgesehen. */
@media (prefers-reduced-motion: reduce){
#top *{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
}
/* --------------------------------------------------------------------------
8) PRINT
-------------------------------------------------------------------------- */
@media print{
body, #top p{ font-size: 11pt; line-height: 1.45; color:#000; }
#top h1{ font-size: 22pt; }
#top h2{ font-size: 17pt; }
#top h3{ font-size: 14pt; }
#top h1, #top h2, #top h3, #top h4{ break-after: avoid; }
}