/* ========================================================================== KNOEPFE UND SCHRIFT · Tickets T26 (Knoepfe), T27 (Schriftskala), T24 (mobil) -------------------------------------------------------------------------- Eine Schriftskala und eine Knopfform fuer die ganze Seite. Hier stehen NUR Masse: Groesse, Hoehe, Radius, Abstand, Gewicht. Farben regelt style.css bzw. der Farbmodus (T71) – diese Datei setzt keine einzige Farbe. Wird nach style.css geladen (themes/hac/functions.php). Aufbau 1. Masse als Variablen (Skala, Knopf) 2. Grundschrift und Ueberschriften 3. Geisterschriften (Cormorant, Muli, Roboto werden nie geladen) 4. Knoepfe: Hauptaktion, Nebenaktion, kleine Knoepfe 5. Fremde Bausteine angleichen (Elementor, Qi, CF7, Kalender, Google) 6. UEBERGANG: eigene Bausteine Diese Regeln gehoeren eigentlich in die Datei des jeweiligen Bausteins. Sie stehen hier, weil T71 (Darkmode) dieselben Dateien gerade umbaut. Nach T71 Etappe 2 in die Bausteindateien ziehen (siehe TICKETS.md T26). Bewusste Ausnahmen von der Skala - Aufmacher-Titel (T54/T66, aufmacher.css) und die grossen Zaehler-Ziffern (Bausteine „Counter“) – Schauzahlen, keine Lesetexte. - Chat-Knopf unten rechts (Chatbot-Plugin) und runde Symbolknoepfe (50 %). - KI-Verweise (ChatGPT, Perplexity …) sind bewusst kleiner, aber unter- einander gleich und mindestens 44 px hoch. ========================================================================== */ /* ── 1. Masse ────────────────────────────────────────────────────────────── Skala in rem (1rem = 16 px). Acht Stufen, mehr gibt es nicht: 12 px --hac-groesse-plakette NUR Plaketten in Grossbuchstaben (PDF, Kategorie) 14 px --hac-groesse-klein Datum, Hinweise, Beschriftungen – Untergrenze fuer Lesetext 16 px --hac-groesse-text Fliesstext, Knoepfe, Links 18 px --hac-groesse-gross Einleitungen, Kartentitel, h4 22 px --hac-groesse-h3 28 px --hac-groesse-h2-mobil (= h1 klein) 36 px --hac-groesse-h2 (= h1 mobil) 48 px --hac-groesse-h1 ------------------------------------------------------------------------- */ :root { --hac-schriftart: "Trebuchet MS", "Segoe UI", Arial, sans-serif; --hac-groesse-plakette: 0.75rem; /* 12 */ --hac-groesse-klein: 0.875rem; /* 14 */ --hac-groesse-text: 1rem; /* 16 */ --hac-groesse-gross: 1.125rem; /* 18 */ --hac-groesse-h3: 1.375rem; /* 22 */ --hac-groesse-h2-mobil: 1.75rem; /* 28 */ --hac-groesse-h2: 2.25rem; /* 36 */ --hac-groesse-h1: 3rem; /* 48 */ --hac-zeile-text: 1.6; --hac-zeile-titel: 1.2; /* Knopf: eine Form fuer alle Aktionen */ --hac-knopf-radius: 8px; /* Marken-Radius (AGENTS.md 7) */ --hac-knopf-hoehe: 48px; --hac-knopf-hoehe-klein: 44px; /* Mindest-Tippziel (T24) */ --hac-knopf-innen: 12px 24px; --hac-knopf-innen-klein: 10px 16px; --hac-knopf-groesse: var(--hac-groesse-text); --hac-knopf-gewicht: 700; } /* ── 2. Grundschrift und Ueberschriften ──────────────────────────────────── grundlage.css (aus Solene) setzt 15 px – jetzt ueberall 16 px. */ body { font-size: var(--hac-groesse-text); line-height: var(--hac-zeile-text); } h1, h2, h3, h4, h5, h6 { line-height: var(--hac-zeile-titel); } h1 { font-size: var(--hac-groesse-h2); } /* mobil 36 */ h2 { font-size: var(--hac-groesse-h2-mobil); } /* mobil 28 */ h3 { font-size: var(--hac-groesse-h3); } h4 { font-size: var(--hac-groesse-gross); } h5 { font-size: var(--hac-groesse-text); } h6 { font-size: var(--hac-groesse-klein); } @media (min-width: 768px) { h1 { font-size: var(--hac-groesse-h1); } h2 { font-size: var(--hac-groesse-h2); } } /* style.css zwingt Elementor-h1 mobil auf 30 px (!important) – jetzt die Stufe. */ @media (max-width: 767px) { h1.elementor-heading-title.elementor-size-default { font-size: var(--hac-groesse-h2) !important; } } /* Theme-Ueberschriften der Bausteine „Section Title“ (eltdf) folgen der Skala. */ .eltdf-section-title-holder .eltdf-st-title { font-size: var(--hac-groesse-h2-mobil); } .eltdf-section-title-holder h1.eltdf-st-title { font-size: var(--hac-groesse-h2); } @media (min-width: 768px) { .eltdf-section-title-holder .eltdf-st-title { font-size: var(--hac-groesse-h2); } .eltdf-section-title-holder h1.eltdf-st-title { font-size: var(--hac-groesse-h1); } } .eltdf-section-title-holder .eltdf-st-subtitle, .qodef-shortcode .qodef-m-subtitle { font-size: var(--hac-groesse-h3); } /* kleine Zeile ueber dem Titel */ .eltdf-section-title-holder p.eltdf-st-subtitle, .eltdf-section-title-holder p.eltdf-st-subtitle span { font-size: var(--hac-groesse-klein); } .eltdf-iwt .eltdf-iwt-title { font-size: var(--hac-groesse-h3); } /* Bildunterschriften 13 → 14 px */ figcaption, .wp-caption-text, .widget-image-caption { font-size: var(--hac-groesse-klein); } /* ── 3. Geisterschriften ─────────────────────────────────────────────────── Diese Schriften werden nie geladen (keine Webfonts, AGENTS.md 7). Bisher fielen sie still auf eine Systemschrift zurueck – jetzt ausdruecklich Trebuchet. */ blockquote, blockquote::before, .eltdf-counter-holder .eltdf-counter, .eltdf-iwt .eltdf-iwt-subtitle, .eltdf-team-holder .eltdf-team-position, .error404 .eltdf-page-not-found .eltdf-404-text, #respond input, #respond textarea { font-family: var(--hac-schriftart); } /* Blog-Uebersicht: blog-liste.css nannte Roboto / Roboto Slab. */ html:root { --hac-sans: var(--hac-schriftart); --hac-serif: var(--hac-schriftart); } /* ── 4. Knoepfe ──────────────────────────────────────────────────────────── Zwei Sorten, eine Form: Hauptaktion gefuellt in Markenfarbe (Gruen, im Elektro-Bereich Blau) Nebenaktion heller Grund oder Umriss Beide: Radius 8 px, mindestens 48 px hoch, 16 px fett, Innenabstand 12/24 px. Kleine Knoepfe (Tabellen, Filter, KI-Verweise): 44 px, 14 px. Die Farben bleiben, wie sie in Elementor bzw. style.css eingestellt sind. */ /* Elementor-Knopf-Widget (93 Knoepfe, je Knopf mit Radius 10 px bzw. 3 px eingestellt). Gewichtung 0,4,1 wie die Farbregel in style.css – schlaegt die Einstellung im Widget (0,4,0). Der Aufmacher (T54) hat eine staerkere Regel mit eigener Gestaltung und bleibt unberuehrt. */ body .elementor .elementor-widget-button .elementor-button-wrapper .elementor-button { display: inline-flex; align-items: center; justify-content: center; min-height: var(--hac-knopf-hoehe); padding: var(--hac-knopf-innen); border-radius: var(--hac-knopf-radius); font-size: var(--hac-knopf-groesse); font-weight: var(--hac-knopf-gewicht); line-height: 1.25; letter-spacing: normal; text-transform: none; box-sizing: border-box; } /* Kontaktformulare (CF7, mu-plugins/hac-formulare): Absenden, „Weiter“, „Zurueck“. formulare.css setzt Abstand und Groesse mit !important (gegen Ultimate Addons) – deshalb hier ebenfalls !important, mit einer Stufe mehr Gewicht. Der Formular-Radius --hcf-radius (Felder und Knoepfe) wird 6 → 8 px. */ body .wpcf7 .wpcf7-form.wpcf7-form { --hcf-radius: var(--hac-knopf-radius); } body .wpcf7 .wpcf7-form.wpcf7-form input[type="submit"], body .wpcf7 .wpcf7-form.wpcf7-form button[type="submit"], body .wpcf7 .wpcf7-form.wpcf7-form .wpcf7-submit, body .wpcf7 .wpcf7-form.wpcf7-form button.uacf7-next, body .wpcf7 .wpcf7-form.wpcf7-form button.uacf7-prev { min-height: var(--hac-knopf-hoehe); padding: var(--hac-knopf-innen) !important; font-size: var(--hac-knopf-groesse) !important; line-height: 1.25; } /* Schrittkreise der Mehrschritt-Strecken: Ziffern 12 → 14 px, Kreis 30 → 36 px. */ body .wpcf7 .wpcf7-form.wpcf7-form .steps-form .steps-row .steps-step .btn-circle { width: 36px; height: 36px; font-size: var(--hac-groesse-klein); line-height: 34px; } /* Hinweise und Beschriftungen in den Formularen: 13 → 14 px. Teils steht „font-size: 13px“ direkt im Formular-Inhalt (style-Attribut) – dagegen hilft nur !important. Groessere Angaben bleiben unberuehrt. */ body .wpcf7 .wpcf7-form.wpcf7-form .htag, body .wpcf7 .wpcf7-form.wpcf7-form .hhinweis, body .wpcf7 .wpcf7-form.wpcf7-form .hprio-lbl small, body .wpcf7 .wpcf7-form.wpcf7-form input[type="file"]::file-selector-button { font-size: var(--hac-groesse-klein); } body .wpcf7 [style*="font-size: 13px"], body .wpcf7 [style*="font-size:13px"], body .wpcf7 [style*="font-size: 12px"], body .wpcf7 [style*="font-size:12px"] { font-size: var(--hac-groesse-klein) !important; } /* ── 5. Fremde Bausteine angleichen ────────────────────────────────────────*/ /* Qi-Addons „Jetzt lesen“ (Blog-Vorschau Startseite): Nebenaktion. Radius 4 → 8 px, Hoehe 58 → 48 px, Gewicht 500 → 700. Farben bleiben (T51). */ body .qodef-addons-blog-list .qodef-qi-button { min-height: var(--hac-knopf-hoehe); padding: var(--hac-knopf-innen); border-radius: var(--hac-knopf-radius); font-size: var(--hac-knopf-groesse); font-weight: var(--hac-knopf-gewicht); line-height: 1.25; box-sizing: border-box; } body .qodef-addons-blog-list .qodef-blog-item .qodef-e-info, body .qodef-addons-blog-list .qodef-blog-item .qodef-e-info .qodef-e-info-item, body .qodef-addons-blog-list .qodef-blog-item .qodef-e-info .qodef-e-info-item a { font-size: var(--hac-groesse-klein); } /* Google-Bewertungen: Datum 13 → 14 px (Plugin setzt 13 px mit !important) */ body .wp-gr .wp-google-time { font-size: var(--hac-groesse-klein) !important; } /* Chat-Einladung neben dem Chat-Knopf (Chatbot-Plugin) 13 → 14 px */ body .rh-chat-launcher .rh-chat-invite span { font-size: var(--hac-groesse-klein); } /* Kalender (TEC) „Kalender abonnieren“: gleiche Form wie alle Knoepfe. */ body .tribe-events-c-subscribe-dropdown__button { min-height: var(--hac-knopf-hoehe); } /* Borlabs-Knoepfe im Video-Platzhalter */ body .brlbs-cmpnt-container.brlbs-cmpnt-content-blocker a.brlbs-cmpnt-cb-btn { min-height: var(--hac-knopf-hoehe); font-size: var(--hac-knopf-groesse); font-weight: var(--hac-knopf-gewicht); } /* ── 6. UEBERGANG: eigene Bausteine ──────────────────────────────────────── Nach T71 Etappe 2 in die jeweilige Datei ziehen und hier loeschen. „body“ davor hebt die Gewichtung, damit die Regeln ohne !important greifen, egal in welcher Reihenfolge die Dateien geladen werden. */ /* Anfrage-Box (themes/hac/includes/anfrage-box) – 17 → 16 px */ body .hac-anfrage-box a.hac-anfrage-box__knopf { min-height: var(--hac-knopf-hoehe); font-size: var(--hac-knopf-groesse); border-radius: var(--hac-knopf-radius); } /* Bewerbung (mu-plugins/hac-bewerbung) – 18 px / 52 px → Standard */ body .hac-bewerbung a.hac-bewerbung__knopf { min-height: var(--hac-knopf-hoehe); padding: var(--hac-knopf-innen); font-size: var(--hac-knopf-groesse); border-radius: var(--hac-knopf-radius); } /* Newsletter (mu-plugins/hac-newsletter): hat die Standardform bereits. */ /* KI-Leiste (mu-plugins/hac-ki-anfrage) – bewusste Ausnahme, kleiner, aber 44 px hoch (vorher 40 bzw. mobil 36 px). */ body .hac-ki-anfrage a.hac-ki-anfrage__knopf { min-height: var(--hac-knopf-hoehe-klein); font-size: var(--hac-groesse-klein); border-radius: var(--hac-knopf-radius); } body .hac-ki-anfrage .hac-ki-anfrage__titel { font-size: var(--hac-groesse-gross); } /* Produkte (themes/hac/assets/css/produkte.css) */ body .hacp .hacp-knopf, body .hacp-aktion .hacp-knopf { min-height: var(--hac-knopf-hoehe-klein); /* 38 → 44 px */ padding: var(--hac-knopf-innen-klein); font-size: var(--hac-groesse-klein); border-radius: var(--hac-knopf-radius); } body .hacp-filter button { /* Filter „Alle …“: 999 → 8 px, 34 → 44 px */ min-height: var(--hac-knopf-hoehe-klein); border-radius: var(--hac-knopf-radius); font-size: var(--hac-groesse-klein); } body .hacp .hacp-titel { font-size: var(--hac-groesse-h3); } body .hacp .hacp-tabelle { font-size: var(--hac-groesse-text); } body .hacp .hacp-tabelle thead th, body .hacp .hacp-tabelle tr.hacp-zwischen th, body .hacp-wert .hacp-menge, body .hacp .hacp-hinweis, body .hacp .hacp-herkunft, body .hacp .hacp-positionen-kopf, body .hacp .hacp-yt-text, body .hacp-hinweis, body .hacp-herkunft, body .hacp-positionen-kopf, body .hacp-yt-text { font-size: var(--hac-groesse-klein); } body .hacp-chip { font-size: var(--hac-groesse-plakette); } @media (max-width: 767px) { body .hacp .hacp-titel { font-size: var(--hac-groesse-gross); } } /* Team (themes/hac/assets/css/team.css): Filter 999 px → 8 px, 34 → 44 px */ body .hact-filter.hact-filter button { min-height: var(--hac-knopf-hoehe-klein); border-radius: var(--hac-knopf-radius); font-size: var(--hac-groesse-klein); } body .hact-bereich, body .hact-zahl { font-size: var(--hac-groesse-plakette); } body .hact-ebene-not { font-size: var(--hac-groesse-klein); } /* Downloads (themes/hac/assets/css/downloads.css): Radius 7 → 8 px */ body .hac-downloads-btn { border-radius: var(--hac-knopf-radius); font-size: var(--hac-groesse-text); } body .hac-downloads-btn__ext { font-size: var(--hac-groesse-plakette); } body .hac-downloads-nav__link, body .hac-downloads-subheading { font-size: var(--hac-groesse-klein); } /* Partnerliste Startseite (mu-plugins/hac-partner-startseite.php): Name 12,75 → 14 px, Kategorie 11,25 → 14 px und nicht mehr fett. */ body .hac-pl__name { font-size: var(--hac-groesse-klein); } body .hac-pl__cat { font-size: var(--hac-groesse-klein); font-weight: 400; } /* Partnerkarten und Partnerseite (kooperationspartner.css) */ body .hac-partner-card__kat { font-size: var(--hac-groesse-klein); font-weight: 400; } body .hac-partner-hero__kategorie { font-size: var(--hac-groesse-klein); } /* Footer (mu-plugins/hac-footer.php): nichts unter 14 px, Links nicht fett */ body .hac-footer .hac-footer__coltitle, body .hac-footer .hac-footer__social-label, body .hac-footer .hac-footer__wordmark-tag, body .hac-footer .hac-footer__copyright, body .hac-footer .hac-footer__legal a { font-size: var(--hac-groesse-klein); } body .hac-footer .hac-footer__links a, body .hac-footer .hac-footer__legal a { font-weight: 400; } body .hac-footer .hac-footer__about, body .hac-footer .hac-footer__links a, body .hac-footer .hac-footer__contact-item, body .hac-footer .hac-footer__contact-item a { font-size: var(--hac-groesse-klein); } body .hac-footer .hac-footer__contact-item a { font-weight: 400; } /* Kopf (themes/hac/assets/css/kopf.css) Hauptmenue am Desktop: Grossbuchstaben mit Sperrung, 11 → 12 px (Stufe „Plakette“, sie gilt fuer alle Beschriftungen in Grossbuchstaben). Servicezeile und Handymenue: 13 → 14 px. */ body .hac-nav--desktop .hac-nav__punkt--ebene-1 > .hac-nav__link { font-size: var(--hac-groesse-plakette); } body .hac-servicezeile, body .hac-servicezeile .widget, body .hac-servicezeile .widget p { font-size: var(--hac-groesse-klein); } body .hac-nav--mobil .hac-nav__punkt--ebene-1 > .hac-nav__link { font-size: var(--hac-groesse-klein); } /* Mega-Menue (mu-plugins/hac-mega-menue, T47): Kurztexte 12,5–13,5 → 14 px, Beschriftungen in Grossbuchstaben 11,5 → 12 px. */ body .hac-mm-ph, body .hac-mm-abschn, body .hac-mm-zeile__zahl { font-size: var(--hac-groesse-plakette); } body .hac-mm-karte small, body .hac-mm-anfragen, body .hac-mm-cta small, body .hac-mm-leiste-text, body .hac-mm-kachel small, body .hac-mm-gruppe__titel, body .hac-mm-lk small, body .hac-mm-fuss, body .hac-mm-mleiste b small, body .hac-mm-ebene__fuss, body .hac-mm-ugruppe, body .hac-mm-gross small { font-size: var(--hac-groesse-klein); } /* „Firmenevent anfragen ›“ passt mit 14 px nicht mehr in eine Zeile der schmalen Karte – ausgeglichen umbrechen, damit der Pfeil nicht allein steht. */ body .hac-mm-anfragen { text-wrap: balance; } /* Kleine Knoepfe in Kopf, Footer und Navigationsleisten: einheitlich 44 px hoch, 14 px, Radius 8 px (vorher 40 px Pille, 999 px, 20 px, 4 px). „Anfrage senden“ im Kopf (hac-header) 41 → 44 px „Route planen“ im Footer (hac-footer.php) Radius 40 → 8 px Partner-Navigation (kooperationspartner.css) Radius 20 → 8 px Download-Navigation (downloads.css) Radius 999 → 8 px, 36 → 44 px Kategorie-Knoepfe im Seitenkopf (seitenkopf) 40 → 44 px */ body .hac-cta, body .hac-footer a.hac-footer__mapbtn, body .hac-partner-nav__link, body .hac-downloads-nav__link, body .hac-seitenkopf .hac-seitenkopf__knoepfe a { min-height: var(--hac-knopf-hoehe-klein); border-radius: var(--hac-knopf-radius); font-size: var(--hac-groesse-klein); box-sizing: border-box; } body .hac-cta, body .hac-partner-nav__link, body .hac-downloads-nav__link { display: inline-flex; align-items: center; justify-content: center; } /* Kontakt-Knoepfe auf der Partnerseite (kooperationspartner.css): Radius 4 → 8 px */ body .hac-partner-kontakt__btn { border-radius: var(--hac-knopf-radius); } /* Seitenzahlen der Blog-Uebersicht (blog-liste.css): eckig → 8 px, 44 px */ body .hac-pagination .page-numbers { min-width: var(--hac-knopf-hoehe-klein); min-height: var(--hac-knopf-hoehe-klein); border-radius: var(--hac-knopf-radius); } /* „Zum Inhalt springen“ (grundlage.css, nur bei Tastaturfokus sichtbar) */ body .hac-sprung { font-size: var(--hac-groesse-text); } /* Kopf: „Aktuelles“-Zeile (hac-header) 13,5 → 14 px */ body .hac-nur-hof a, body .hac-nur-elektro a { font-size: var(--hac-groesse-klein); } /* Formulare (mu-plugins/hac-formulare): Beschriftungen und Hinweise 13 → 14 px */ body .eltdf-item-space > label, body .eltdf-item-space > p, body .uacf7-step .htag { font-size: var(--hac-groesse-klein); } /* Bausteine aus dem Theme (Zaehler, Video-Knopf) */ body .eltdf-counter-holder .eltdf-counter-title { font-size: var(--hac-groesse-klein); } body .eltdf-vb-label, body .eltdf-vb-label span { font-size: var(--hac-groesse-plakette); } /* „PLAY VIDEO“ in Grossbuchstaben */ /* Blog-Uebersicht (blog-liste.css) – Karten */ body .hac-blog-wrap .hac-card__cat, body .hac-grid .hac-card__cat { font-size: var(--hac-groesse-plakette); } body .hac-blog-wrap .hac-card__date, body .hac-grid .hac-card__date, body .hac-blog-wrap .hac-read-more, body .hac-grid .hac-read-more, body .hac-pagination .page-numbers { font-size: var(--hac-groesse-klein); } body .hac-blog-wrap .hac-card__title, body .hac-grid .hac-card__title { font-size: var(--hac-groesse-gross); } body .hac-blog-wrap .hac-card__excerpt, body .hac-grid .hac-card__excerpt { font-size: var(--hac-groesse-text); } /* Weiterfuehrende Beitraege unter Blogartikeln (style.css, T22) */ body .hac-weitere-beitraege__titel { font-size: var(--hac-groesse-h3); } body .hac-weitere-beitraege__datum, body .hac-beitrag-kategorien { font-size: var(--hac-groesse-klein); } body .hac-beitrag-kategorien__titel { font-size: var(--hac-groesse-plakette); } body .hac-brotkrume { font-size: var(--hac-groesse-klein); } /* HTML-Widgets im Seiteninhalt (Startseite, Elektro Laimer, Leistungsseiten). Ihre Groessen stehen in einem