/* ========================================================================== Caravan Center Diez — Enfold Typo-Override Ergänzung zu ccd-typografie.css. NACH dieser Datei laden/einfügen. Ziel: Enfold-Element-Styles (Special Heading, Textblock, Buttons, Tabs/Toggles, Slider, Blog, Widgets) auf das Clamp-System zwingen. Einbau: A) Quick CSS (Enfold ▸ Allgemeine Styling-Optionen ▸ Quick CSS) → reicht gegen Theme-CSS + Element-CSS im B) Child-Theme style.css mit hoher Priorität → sauberer, siehe Snippet am Dateiende WICHTIG — Reihenfolge der Maßnahmen: 1. In den Elementen die Font-Size-Felder auf "Default" stellen (Special Heading ▸ Styling ▸ Font Sizes). Dann entfällt der Inline-Style. 2. Erst wenn 1. nicht möglich ist (Bestandsseiten), greift dieses CSS. ========================================================================== */ /* -------------------------------------------------------------------------- 1) SPECIAL HEADING (av-special-heading) Enfold-Markup:

…

Der Inline-Style am Tag ist der eigentliche Gegner → !important nötig. -------------------------------------------------------------------------- */ #top .av-special-heading .av-special-heading-tag, #top .av-special-heading h1.av-special-heading-tag, #top .av-special-heading h2.av-special-heading-tag, #top .av-special-heading h3.av-special-heading-tag, #top .av-special-heading h4.av-special-heading-tag, #top .av-special-heading h5.av-special-heading-tag, #top .av-special-heading h6.av-special-heading-tag{ font-family: var(--ccd-font-heading) !important; letter-spacing: var(--ccd-ls-heading) !important; text-wrap: balance; } /* Größe je Tag — überschreibt auch Enfolds responsive Font-Size-Klassen (av-desktop-font-size-title / av-medium-font-size-title / …) */ #top .av-special-heading h1.av-special-heading-tag{ font-size: var(--ccd-fs-h1) !important; line-height: var(--ccd-lh-tight) !important; letter-spacing: var(--ccd-ls-display) !important; font-weight: var(--ccd-fw-bold) !important; } #top .av-special-heading h2.av-special-heading-tag{ font-size: var(--ccd-fs-h2) !important; line-height: var(--ccd-lh-heading) !important; font-weight: var(--ccd-fw-bold) !important; } #top .av-special-heading h3.av-special-heading-tag{ font-size: var(--ccd-fs-h3) !important; line-height: var(--ccd-lh-heading) !important; font-weight: var(--ccd-fw-semi) !important; } #top .av-special-heading h4.av-special-heading-tag{ font-size: var(--ccd-fs-h4) !important; line-height: var(--ccd-lh-heading) !important; font-weight: var(--ccd-fw-semi) !important; } #top .av-special-heading h5.av-special-heading-tag{ font-size: var(--ccd-fs-h5) !important; line-height: var(--ccd-lh-snug) !important; font-weight: var(--ccd-fw-semi) !important; } #top .av-special-heading h6.av-special-heading-tag{ font-size: var(--ccd-fs-h6) !important; line-height: var(--ccd-lh-snug) !important; font-weight: var(--ccd-fw-semi) !important; } /* Hero-Variante: Custom CSS Class "ccd-display" am Special Heading setzen */ #top .av-special-heading.ccd-display h1.av-special-heading-tag, #top .av-special-heading.ccd-display h2.av-special-heading-tag{ font-size: var(--ccd-fs-display) !important; line-height: var(--ccd-lh-tight) !important; letter-spacing: var(--ccd-ls-display) !important; } /* Subheading unter dem Special Heading */ #top .av-special-heading .av-subheading { font-family: var(--ccd-font-body) !important; font-size: var(--ccd-fs-lead) !important; line-height: var(--ccd-lh-snug) !important; color: var(--ccd-c-muted); } #top .av-special-heading .av-subheading p{ font-family: var(--ccd-font-mono) !important; font-size: var(--ccd-fs-small) !important; line-height: var(--ccd-lh-snug) !important; color: var(--ccd-c-accent-soft) !important; } /* Trennlinie der "Modern"-Variante entfernen */ #top .ccd-keyfeature .special-heading-border { display: none; } /* Überschrift: Nummer und Text nebeneinander */ #top .ccd-keyfeature .av-special-heading-tag { display: flex; align-items: baseline; gap: .5em; margin: 0; font-size: 28px; line-height: 1.2; font-weight: 700; } /* Nummer */ #top .ccd-keyfeature .ccd-keyfeature-nr { flex: 0 0 auto; color: #f26a21; /* Farbe anpassen */ font-weight: 700; font-size:2.9rem; font-variant-numeric: tabular-nums; } /* Untertitel unterhalb */ #top .ccd-keyfeature .av-subheading { margin-top: 6px; font-size: 12px !important; /* Enfold setzt inline font-size */ letter-spacing: .12em; text-transform: uppercase; font-weight: 400; } #top .ccd-keyfeature .av-subheading p { margin: 0px; } #top .ccd-keyfeature .av-subheading_below p {color:#8a8799 !important;} /* Trennlinie unter Headings dezenter */ #top .av-special-heading .special-heading-border .special-heading-inner-border{ border-color: var(--ccd-c-accent); } /* -------------------------------------------------------------------------- 2) THEME-DEFAULTS MIT HOHER SPEZIFITÄT Enfold nutzt u. a. #top #wrap_all .all_colors h1…h6 — hier gleichziehen. -------------------------------------------------------------------------- */ #top #wrap_all .all_colors h1, #top #wrap_all .all_colors h2, #top #wrap_all .all_colors h3, #top #wrap_all .all_colors h4, #top #wrap_all .all_colors h5, #top #wrap_all .all_colors h6{ font-family: var(--ccd-font-heading); color: var(--ccd-c-ink); } #top #wrap_all .all_colors h1{ font-size: var(--ccd-fs-h1); line-height: var(--ccd-lh-tight); } #top #wrap_all .all_colors h2{ font-size: var(--ccd-fs-h2); line-height: var(--ccd-lh-heading); } #top #wrap_all .all_colors h3{ font-size: var(--ccd-fs-h3); line-height: var(--ccd-lh-heading); } #top #wrap_all .all_colors h4{ font-size: var(--ccd-fs-h4); line-height: var(--ccd-lh-heading); } #top #wrap_all .all_colors h5{ font-size: var(--ccd-fs-h5); line-height: var(--ccd-lh-snug); } #top #wrap_all .all_colors h6{ font-size: var(--ccd-fs-h6); line-height: var(--ccd-lh-snug); } /* Body/Fließtext gegen Theme-Defaults */ #top #wrap_all .all_colors p, #top #wrap_all .flex_column p, #top .av_textblock_section .avia_textblock, #top .av_textblock_section .avia_textblock p{ font-family: var(--ccd-font-body); font-size: var(--ccd-fs-body); line-height: var(--ccd-lh-body); /*color: var(--ccd-c-body);*/ } /* -------------------------------------------------------------------------- 3) DUNKLE SEKTIONEN Enfold vergibt Farbschema-Klassen (.av_default_container_wrap / .main_color / .alternate_color / .footer_color). Empfehlung: eigene Klasse "ccd-dark" am Color-Section-Element setzen. -------------------------------------------------------------------------- */ #top .ccd-dark, #top .ccd-dark.main_color, #top .ccd-dark.alternate_color{ background-color: #18142C !important; } #top .ccd-dark .av-special-heading-tag, #top .ccd-dark h1, #top .ccd-dark h2, #top .ccd-dark h3, #top .ccd-dark h4, #top .ccd-dark h5, #top .ccd-dark h6, #top #wrap_all .ccd-dark .all_colors h1, #top #wrap_all .ccd-dark .all_colors h2, #top #wrap_all .ccd-dark .all_colors h3, #top #wrap_all .ccd-dark .all_colors h4{ color: var(--ccd-c-on-dark) !important; } #top .ccd-dark p, #top .ccd-dark .avia_textblock, #top .ccd-dark .av-subheading, #top #wrap_all .ccd-dark .all_colors p{ color: var(--ccd-c-on-dark-2) !important; } #top .ccd-dark .ccd-eyebrow, #top .ccd-dark .ccd-eyebrow p{ color: #F6A66E !important; } #top .ccd-dark a:not(.avia-button){ color: #F6A66E; } #top .ccd-dark a:not(.avia-button):hover{ color: #fff; } /* -------------------------------------------------------------------------- 4) BUTTONS (avia-button, av-button-*) Enfold setzt Größen über .avia-size-small/medium/large/x-large. -------------------------------------------------------------------------- */ #top .avia-button, #top .avia-button.avia-size-small, #top .avia-button.avia-size-medium, #top .avia-button.avia-size-large, #top .avia-button.avia-size-x-large, #top .av-special-heading + div .avia-button{ font-family: var(--ccd-font-heading) !important; font-weight: var(--ccd-fw-bold) !important; font-size: var(--ccd-fs-body) !important; line-height: 1.2 !important; letter-spacing: 0 !important; border-radius: 11px; } /* Primär-CTA: Custom CSS Class "ccd-cta-primary" */ #top .avia-button.ccd-cta-primary, #top .avia-button.ccd-cta-primary:hover{ background-color: var(--ccd-c-accent) !important; border-color: var(--ccd-c-accent) !important; color: #fff !important; } /* -------------------------------------------------------------------------- 5) WEITERE ELEMENTE -------------------------------------------------------------------------- */ /* Icon Boxes / Icon Lists */ #top .iconbox .iconbox_content_title, #top .avia-icon-list .iconlist_title{ font-family: var(--ccd-font-heading) !important; font-size: var(--ccd-fs-h4) !important; font-weight: var(--ccd-fw-semi) !important; line-height: var(--ccd-lh-heading) !important; color: var(--ccd-c-ink); } #top .iconbox .iconbox_content .iconbox_content_container, #top .avia-icon-list .iconlist_content p{ font-family: var(--ccd-font-body) !important; font-size: var(--ccd-fs-body) !important; line-height: var(--ccd-lh-body) !important; } /* Tabs & Toggles (für FAQ-Sektionen — GEO-relevant) */ #top .av_toggle_section .toggler, #top .js_active .tabcontainer .tab{ font-family: var(--ccd-font-heading) !important; font-size: var(--ccd-fs-h5) !important; font-weight: var(--ccd-fw-semi) !important; line-height: var(--ccd-lh-snug) !important; color: var(--ccd-c-ink); } #top .av_toggle_section .toggle_content, #top .av_toggle_section .toggle_content p, #top .tabcontainer .tab_content{ font-family: var(--ccd-font-body) !important; font-size: var(--ccd-fs-body) !important; line-height: var(--ccd-lh-body) !important; } /* Slider / Layerslider-Captions */ #top .avia-caption-title, #top .av-slideshow-caption .avia-caption-title{ font-family: var(--ccd-font-heading) !important; font-size: var(--ccd-fs-display) !important; line-height: var(--ccd-lh-tight) !important; letter-spacing: var(--ccd-ls-display) !important; font-weight: var(--ccd-fw-bold) !important; } #top .avia-caption-content, #top .avia-caption-content p{ font-family: var(--ccd-font-body) !important; font-size: var(--ccd-fs-lead) !important; line-height: var(--ccd-lh-snug) !important; } /* Blog / Ratgeber */ #top .post-title, #top .post-entry .post-title, #top h1.post-title, #top h2.post-title{ font-family: var(--ccd-font-heading) !important; font-size: var(--ccd-fs-h2) !important; line-height: var(--ccd-lh-heading) !important; letter-spacing: var(--ccd-ls-heading) !important; font-weight: var(--ccd-fw-bold) !important; } #top .post_delimiter + .post-meta-infos, #top .post-meta-infos, #top .blog-categories, #top .minor-meta{ font-family: var(--ccd-font-mono) !important; font-size: var(--ccd-fs-label) !important; letter-spacing: .06em !important; text-transform: uppercase; color: var(--ccd-c-muted-soft) !important; } /* Hauptmenü */ #top #header .av-main-nav > li > a, #top #header .av-main-nav > li > a .avia-menu-text{ font-family: var(--ccd-font-body) !important; font-size: var(--ccd-fs-body) !important; font-weight: var(--ccd-fw-bold) !important; letter-spacing: 0 !important; color: var(--ccd-c-body); } /* Widgets & Footer */ #top .widgettitle, #top #footer .widgettitle{ font-family: var(--ccd-font-heading) !important; font-size: var(--ccd-fs-h6) !important; font-weight: var(--ccd-fw-bold) !important; letter-spacing: .01em !important; } #top #footer, #top #footer p, #top #socket, #top #socket p{ font-family: var(--ccd-font-body) !important; font-size: var(--ccd-fs-small) !important; line-height: 1.6 !important; } /* Formulare (Kontakt / Werkstatttermin / Mietanfrage) */ #top .avia_ajax_form input[type="text"], #top .avia_ajax_form input[type="email"], #top .avia_ajax_form input[type="tel"], #top .avia_ajax_form select, #top .avia_ajax_form textarea, #top .avia_ajax_form .input_checkbox_label, #top .avia_ajax_form label{ font-family: var(--ccd-font-body) !important; font-size: var(--ccd-fs-body) !important; line-height: 1.5 !important; } #top .avia_ajax_form .button{ font-family: var(--ccd-font-heading) !important; font-weight: var(--ccd-fw-bold) !important; font-size: var(--ccd-fs-body) !important; } /* Mind. 16px auf Mobile — verhindert iOS-Auto-Zoom beim Fokus */ @media (max-width: 767px){ #top .avia_ajax_form input, #top .avia_ajax_form select, #top .avia_ajax_form textarea{ font-size: 16px !important; } } /* -------------------------------------------------------------------------- 6) ENFOLD RESPONSIVE FONT-SIZE-KLASSEN NEUTRALISIEREN Enfold 5.x schreibt je Breakpoint Klassen wie .av-desktop-font-size-title / .av-medium-font-size-title / .av-small-font-size / .av-mini-font-size-title Diese fixieren px-Werte und brechen das Clamp-System. -------------------------------------------------------------------------- */ #top [class*="av-desktop-font-size"], #top [class*="av-medium-font-size"], #top [class*="av-small-font-size"], #top [class*="av-mini-font-size"]{ font-size: inherit !important; } /* Ausnahme: Special Heading behält seine Tag-Größe aus Block 1 */ #top .av-special-heading [class*="font-size"], #top .av-special-heading-tag[class*="font-size"]{ font-size: inherit !important; } /* Erzwungene Zeilenhöhen aus dem Element-Editor lösen */ #top .av-special-heading [class*="av-desktop-line-height"], #top [class*="av-desktop-line-height"]{ line-height: inherit !important; } /* ========================================================================== OPTION B — Sauberer Weg über Child-Theme (ohne !important-Flut) In child-theme/functions.php einfügen; lädt das CSS NACH allem Enfold-CSS: add_action( 'wp_enqueue_scripts', function () { wp_enqueue_style( 'ccd-typografie', get_stylesheet_directory_uri() . '/css/ccd-typografie.css', array( 'avia-style' ), '1.0' ); wp_enqueue_style( 'ccd-enfold-override', get_stylesheet_directory_uri() . '/css/ccd-enfold-override.css', array( 'ccd-typografie' ), '1.0' ); }, 9999 ); Inline-Styles am Element bleiben davon unberührt — deshalb bleibt Schritt 1 (Font-Size-Felder auf "Default") Pflicht. ========================================================================== */