/* ============================================================ HappyFam · hf-system.css · v2.77 · Stand 28.10.2026 · EIKE.DIGITAL v2.77: Block 42 · Produktseite mobil: keine Überbreite mehr (Thumb-Leiste schob die Spalte breiter als den Bildschirm, Flex-Kinder ohne min-width:0) · Sterne ohne Lücke links (Woo-Clearfix ::before war in der Flex-Zeile ein leeres Element + 12 px Abstand). v2.76: Block 39 · /danke/: Logo im Kopf ragte 10 px aus dem Rahmen (CartFlows-Rahmen 130×40, Bild bei 130 px Breite 50 px hoch) → Höhe 100 %, Breite automatisch · rechte Spalte als Seitenpanel (Linie links, ohne Rahmen/Radius) statt Karte: lief über die volle Höhe, runde Ecken stießen an Kopf und Seitenende · Seitenhintergrund Creme statt CartFlows-Grau (#f5f5f5 blitzte unter den Spalten durch). v2.75: Block 41 · /kasse/: Adresskarten (Liefer-/Rechnungsadresse) als weiße Karte, Name in Display, „Bearbeiten“ als Emerald-Link · Abholstationen-Liste mit heller Linie, Radius und weichem Schatten statt dunklem Rahmen · Klarna-Logo hinter dem Namen. v2.74: Block 39 · /danke/: alle Regeln mit #wcf-instant-thankyou, weil CartFlows (5 Klassen) Polster der Karten und den Button „Weiter einkaufen“ überschrieb · ein Stern-Schrägstrich im Kommentar zu den Umbruch-Utilities (seit v1.16) beendete den Kommentar zu früh und machte die Regel .hf-txtpretty ungültig, korrigiert · Block 41 · /kasse/: Abstand zwischen Name und Logo auch bei Apple Pay, Google Pay, Karten. v2.73: Block 41 · /kasse/ (Woo-Block-Kasse, Seite 1658) wie die Funnel-Kassen: Versand- und Zahlungsarten als weiße Karte mit Trennlinien (keine Emerald-Umrandung der gewählten Option), Radio mit Punkt in Vermillion, Namen in Display 700, Logos direkt hinter dem Namen, Beschreibung als Creme-Feld. Versandart vor der Abholstation, Abholstation als eigene Karte, Auswahlfeld wie die übrigen Felder. Checkbox-Haken mittig. v2.72: Block 39 · /danke/: Summenzeilen mit Abstand und Wert rechtsbündig (Versand-Text klebte am Label, „Kundenwunsch“ unter der Erstattung versetzt), Downloads ohne graue Innenfläche (CartFlows frontend.css), leere Download-Box aus (z. B. erstattete Bestellung ohne Download-Rechte). v2.71: Block 31 · Karte „Deine Bestellung“ ohne Polster: var(--hf-s-8) gibt es nicht (Raster beginnt bei 12) → ganze padding-/margin-Angabe ungültig. Jetzt 8px. v2.70: Block 31 · Funnel-Kasse (System-Layout) wie /kasse/: Bumps → Zahlungsart → Rechtstexte → Gutschein → „Deine Bestellung“ als Karte → Button. Ersetzt die Umsortierung aus v2.36 (Übersicht stand vor der Zahlung, zwischen Summe und Button lagen Gutschein, Zahlarten, Rechtstext). #order_review mit display:contents, damit die Überschrift (außerhalb von #order_review) neben die Tabelle sortiert werden kann. Mobil blendet CartFlows die Übersicht über dem Button aus (nur eingeklappt oben) → wieder sichtbar. Block 25 · /kasse/ mobil: Kopfzeile „Bestellübersicht“ wieder mit 16/24 px Polster (Germanized setzt is-mobile/-medium/-small padding 0, 0,5,0). v2.69: Block 40 · CartFlows-Kassen: Versand-Umschalter in den Summen ohne Button-Fläche (Elementor-Widget färbte jeden Button in #order_review Coral) · alte Funnels: „× 1“ und Lieferzeit auf einer Linie mit Abstand (Germanized-Absatz hatte 16 px margin-top, klebte an der Menge). v2.68: Block 39 · /danke/ (CartFlows Instant Thank You, globale Kasse): Seite in Creme, Karten im System, Danke-Zeile als Display, Bestellübersicht rechts als weiße Karte, Download-Links als Pillen, „Weiter einkaufen“ als hf-btn--primary. Farben/Schrift der Instant-Kasse bleiben CartFlows-Einstellung (Store Checkout → Design), hier nur, was dort nicht einstellbar ist. v2.67: Block 38 · /warenkorb/ leer: Cart-Block-Leerzustand im System (Icon 64 px in Emerald, H2 Display, Button als hf-btn--primary). v2.66: Block 37 · Zahlungsarten-Seite (Germanized-Liste) als Kartenliste: Name + Logo in einer Zeile, Beschreibung darunter, leere Boxen aus. v2.65: Block 19 · Produktkarte: Bild mit object-fit contain statt cover (3er-Pakete wurden seitlich beschnitten; Fläche bleibt 1:1). v2.64: Block 36 · Sprach-Klassen hf-de-only / hf-en-only (Container nur in einer Sprache zeigen, z. B. Newsletter-Sektion nur DE). v2.63: Block 35 · Kasse/Warenkorb: doppelte Lieferzeit mit Roh-Label „gzd-delivery_time:“ unter dem Produktnamen ausgeblendet (Germanized + CartFlows). v2.62: KI-Bilderliste (/ai-information/) ohne Listen-Einzug links. v2.61: Modern Cart, leerer Warenkorb: Empfehlungskarte mit Bild 4:3 ohne Leerraum, Abstände Bild/Titel/Text/Preis/Button/Punkte im 8er-Raster, Button ohne Unterstreichung. v2.60: Modern Cart Slider (leerer Warenkorb + Empfehlungen): Punkte-Navigation unter dem Slider statt über dem Button, nur einmal, kleine Punkte statt Kit-Buttons · Pfeile weiß mit Emerald. v2.59: Block 32 · Alte Funnels (body.hf-legacy-step): Buttons im Look des alten Shops (Gold #D4B25C, weiß, Montserrat 700), Hover bleibt Gold statt Kit-Hover. v2.58: Primär-Button auf Coral: Kontrastring Emerald statt Ink (passt zum Ghost-Button, Kontrast bleibt). v2.57: Modern Cart: Abstand unter den Empfehlungs-Buttons (30 px) raus. v2.56: Modern Cart: Abdunkelung als eigene Ebene mit Einblenden (lief vorher mit der Slide-Animation von oben) · Empfehlungs-Buttons ohne Abschneiden. v2.55: Modern Cart: abgedunkelter Hintergrund + Schatten beim geöffneten Warenkorb · „Zur Kasse“ gegen cart.css (1,3,1) nachgeschärft · Empfehlungs-Buttons einzeilig. v2.54: Primär-Button-Hover auf Emerald/Ink: Creme statt Emerald (war unsichtbar) · Kasse: Abstand über „Jetzt kaufen“ (Germanized 36 px + Woo 36 px) auf 16 px · Modern Cart: Empfehlungen (Cross-Sells) als Karten, Buttons als Pillen, „Zur Kasse“ im System-Look. v2.53: Sprach-Sichtbarkeit: .hf-de-only (nur Deutsch) und .hf-en-only (nur Englisch) für Container/Widgets, gesteuert über html[lang]. v2.52: Clearfix-Regel gegen woocommerce.css (0,3,3) nachgeschärft. v2.51: Kaufzeile ohne Woo-Clearfix (::before/::after waren Flex-Items, der Gap erzeugte Abstand links/rechts) · Preis-Hinweise kompakter: „inkl. MwSt. · zzgl. Versand“ in einer Zeile, Lieferzeit darunter, 2 px Zeilenabstand. v2.50: Block 28 KI-Kennzeichnung als Symbol im Bild unten rechts (hf-core 1.29.9), voller Text als Tooltip bei Hover/Fokus/Antippen. v2.49: Mengenfeld: −/+ als runde Flächen mit Innenabstand (Hover war eckig angeschnitten). v2.48: Mengenfeld im Bump nicht mehr ausgeblendet (steuert CartFlows), nur gestaltet. Preis kommt über {{product_price}} im Beschreibungstext. v2.47: Bump-Beschreibung: Fett-Regel p:has(del) raus (Eltern-Cards-Text ist ein einziger Absatz, wurde komplett fett), Preis über die CartFlows-Ausgabe (.wcf-regular-price/.wcf-discount-price/.wcf-normal-price), Blink-Pfeil nicht mehr überschrieben. v2.46: Nachtrag v2.45 (Block fehlte in der Datei) + !important gegen den CartFlows-Skin (font-weight:500 !important bei hervorgehobenen Produkten). v2.45: Checkout „Deine Wahl“: Produktname fett (CartFlows-Stil schlug Block 31), Varianten-Attribut („Kurs: Wut & Ärger Onlinekurs“) ausgeblendet, Untertext klein und gedämpft. v2.44: Danke-Seite: Clearfix-Pseudo der Übersicht aus dem Raster (erste Zelle war leer), Summenzeilen-Beschriftung normal statt fett. v2.43: Block 32 Danke-Seite der Kurs-Funnels: Bestellübersicht als Kennzahlen-Karte, Downloads und Bestelldetails als weiße Karten, Download-Buttons als Ghost-Pillen, Woo-Hinweis „Dankeschön …“ aus. v2.42: Bump-Bilder größer: Desktop 200 px Spalte, mobil bis 260 px über dem Text. v2.41: Stadt füllt die Zeile neben der Postleitzahl (beide wcf-column-33, rechts blieb ein Drittel leer). v2.40: Checkout-Felder: CartFlows-Raster (Wrapper margin 0 -7px, Feld-Padding 7px) durch Flex mit gap ersetzt, Breiten aus wcf-column-50/33 bzw. first/last. v2.39: Checkout mobil: Bump-Bild klein und links (war volle Breite), Produktname in der Übersicht nimmt die freie Breite (CartFlows gab ihm eine feste Breite, „× 1“ stand mittig). v2.38: CartFlows-Steps sind body.woocommerce-checkout: Rahmen der /kasse/ (max-width + Padding am main) gilt dort nicht mehr · Spalten-Padding von CartFlows mobil raus · „Deine Wahl“ bricht nicht mehr Wort für Wort · Lieferzeit unter dem Produktnamen. v2.37: Checkout-Bestellübersicht: Kopfzeile aus, Produktzeile als Bild · Name · Menge (CartFlows macht td.product-name zum Flex, Linie war nur halb und gestrichelt), MwSt.-Zeile leise. v2.36: Checkout: Zahlarten-Liste weiß statt grau, Gutschein-Button mit zwei IDs (schlug die Widget-Stile nicht), Reihenfolge in #order_review: Bumps, Bestellübersicht, Gutschein, Zahlart, Kaufen. v2.35: Zitat-Karte auf Creme weiß (hob sich nicht ab) · Abstand zwischen zentriertem Text und folgendem Raster/Track. v2.34: Block 31 CartFlows-Checkout im HappyFam-Look (Felder, Produktwahl, Zahlarten, Kaufbutton, Gutschein, Order Bumps), nur in .hf-sec. v2.33: Block 30 an .hf-sec gebunden statt an body:not(.hf-legacy-step): greift auf jeder Seite im System-Layout, alte Funnels (ohne hf-sec) bleiben unberührt. v2.32: Block 30 CartFlows-Button „Nächster Schritt“ im HappyFam-Look (Kurs-Landings, nur Steps mit [neu] im Titel). v2.31: Produkt-Box im Fließtext: Bild 4:3 mit cover, schneidet den weißen Rand der quadratischen Packshots oben/unten ab. v2.30: Fix v2.29: aspect-ratio auto + sizes="auto" (WP 6.7, contain:size) ergab 3000×1500-Platzhalter → feste 3:2-Fläche. v2.29: Produkt-Box im Fließtext: Bild vertikal mittig und ohne quadratischen Rahmen (Querformat-Packshots). v2.28: Block 29 Lesetext: Button-Block mit Klasse hf-btn am Wrapper neutralisiert (doppelte Pille), [hf_lead] im Fließtext volle Spaltenbreite, Feld und Button in einer Zeile. v2.27: Block 28 KI-Kennzeichnung (.hf-ai, hf-core 1.29.0): Unterschrift klein und grau unter dem Bild, auf Emerald/Ink hell · Raster [hf_ai_images]. v2.26: Bewertungs-Raster mit minmax(0,1fr): Ein Text ohne Leerzeichen („Praktisch,kleinschrittig,…“) zog eine Spalte breit, sobald „Weitere Bewertungen“ ihn einblendete. Lange Wörter brechen jetzt um. v2.25: [hf_product] als Spalte im Split (Produktlinien-Seiten S3): Box gestapelt, Bild oben im Querformat, kein Außenabstand. Nebeneinander war die Titelspalte zu schmal. ------------------------------------------------------------ v2.24: [hf_lead] in der Freebie-Karte an das globale Freebie-Formular angeglichen: Feld mit 1-px-Rahmen, Button ohne Ink-Ring (der Ring aus v2.23 fällt weg). v2.23: [hf_lead] in der Freebie-Karte (.hf-card-xl) ohne eigene Karte: kein Weiß, kein Rahmen, kein Schatten, Feld und Button nebeneinander, sobald Platz ist (wie das globale Freebie-Formular). Auf Coral bekommt der Button den Ink-Ring wie .hf-btn--primary. [hf_lead] in der Media-Spalte eines Splits: spaltenbreit, 24 px unter dem Bild. v2.22: [hf_lead] auf Landingpages: im Copy-Stack linksbündig und spaltenbreit (Shortcode-Widget streckt sich, kein 32er-Rand oben/unten mehr), in .hf-center-Karten mittig. Langer Button- Text („Ja, schick mir das Workbook für 0 €!“) bricht um statt auf 390 px aus der Karte zu laufen. v2.21: Hover der orangen Buttons wechselt auf Emerald (wie der Ghost-Button). brightness(.92) aus v2.20 färbte auch den weißen Text grau, das Orange wirkte schmutzig. v2.20: Hover der orangen Buttons sichtbar: etwas dunkler (brightness .92 statt 1.05, Palette bleibt), Schatten kräftiger, Anheben bleibt. Gilt für .hf-btn--primary, Kaufen-Button und Kaufleiste. v2.19: Variable Produkte: weniger Luft zwischen Auswahl und Kaufbutton. woocommerce.css gab der Tabelle 1em Abstand (0,4,2 schlug .hf-buy table.variations), und „Zurücksetzen“ hielt unsichtbar (visibility:hidden) seine 34 px Platz. v2.18: „Weiterlesen“ als Block (all:unset der Basisregel machte den Button inline, das Screenshot-Bild rutschte daneben). v2.17: Bugs aus dem Call 09.10.: Kaufen-Button bei Hover und deaktiviert nicht mehr lila (woocommerce.css .button.alt) · Bewertungskarte immer einspaltig („Weiterlesen“ klebte neben dem Screenshot) · Core-Lightbox zeigt das ganze Bild · „ab“ vor Preisen variabler Produkte. v2.16: Trust-Zeile auf der Produktseite auch aus [hf_trust] (hf-core 1.22.0, Shortcode-Widget im Copy-Stack): gleiche Ausrichtung und Labelgröße wie der bisherige Container. v2.15: Weiß für alte Funnels mit !important (Elementor-Seiten-/Kit-Hintergrund) . v2.14: Alte Funnels (CartFlows-Steps aus dem alten Shop, Body-Klasse hf-legacy-step aus hf-core 1.21.0) mit weißem Hintergrund wie bisher · neue Varianten bleiben creme. v2.13: Lightbox-Knopf auch ohne Hover weiß (Core: :not(:hover):not(:active):not(.has-background) = 0,4,1 setzte das Grau). v2.12: Lightbox-Knopf (WordPress „Bei Klick vergrößern“) im System: runder weißer Knopf mit Lupe statt grauem Kasten — Hello/Kit gaben dem 20-px-Knopf Button-Polster, das Icon war weiß auf hellgrau unsichtbar. Erscheint bei Hover und Tastaturfokus, Klick aufs Bild bleibt. v2.11: Kasse + Warenkorb fluchten mit dem Header (1120 px Inhalt): main#content mit box-sizing:border-box — Hello rechnete das Seitenpolster oben drauf (≈1184 px). v2.10: Kasse ab Desktop (≥1025) zweispaltig: Formular links, Abschluss rechts sticky (Bestellübersicht, Gesamtsumme, „Jetzt kaufen“), darunter einspaltig wie bisher · Rücknahme aus v2.09: Innenabstand der Artikel wieder 24 px, keine Leerzeilen mehr zwischen Zwischensumme und Lieferung (leere Woo-Wrapper bekamen Polster) · Block 26 Warenkorb (/warenkorb/): Tabelle, Menge, Summenkarte sticky, Button im System, Cross-Sells als Karten, Floating-Cart aus. v2.09: Kasse — Titel „Bestellübersicht" in Display-Schrift (Woo 0,3,0 → 0,4,1), Innenabstände der Übersichtskarte einheitlich 24 px. v2.08: Block 25 Kasse (WooCommerce-Checkout-Block + Germanized) — einspaltig 720 px (Reihenfolge Formular → Rechtstexte → Bestellübersicht → Button), Felder, Checkboxen, Hinweise, Übersicht als Karte, Kaufbutton im System. v2.07: Produktkarte — Kurzbeschreibung (Widget-Klasse hf-pcard__text) auf 3 Zeilen, klein und gedämpft; leere Absätze aus dem Heading-Widget unsichtbar. v2.06: Produkt-Hero oben bündig mit optischem Versatz der Textspalte (Desktop) · Bewertungsbilder unter dem Text, Lightbox (hf-frontend-reviews.js v2). v2.05: Bewertungen — „Weitere Bewertungen anzeigen“, lange Texte auf 7 Zeilen mit „Weiterlesen“ (hf-frontend-reviews.js v1). v2.04: Bewertungsformular — „Absenden“ im System-Look (woocommerce.css: .woocommerce #respond input#submit = 2,1,1 färbte ihn grau) → (2,2,1). v2.03: Block 16.1 Galerie-Stil „Karussell" (is-style-hf-carousel, hf-core 1.17.3) — wischbarer Bildstreifen mit Scroll-Snap, Mobile 1,2 Bilder, ab Tablet 2,5; Bilder ungeschnitten (contain) auf weißer Karte; Bildunterschrift unter statt über dem Bild. v2.02: Kaufleiste auch ab Tablet (Produktname links, Preis + Button rechts), Modern Carts Floating-Button rückt auf allen Breiten hoch. v2.01: Haarlinie über den Bewertungen endgültig raus (Elementor: .woocommerce div.product.elementor .woocommerce-tabs .panel = 0,5,1 → 0,6,0) · .hf-split--product (Hero der Produktseite: oben bündig statt vertikal mittig, Galerie ab Desktop sticky) · Thumb-Leiste ohne sichtbaren Scrollbalken. v2.00: Produktseite, Live-Runde 3 — Bewertungs-Grid: Woos Clearfix (ol::before/::after, display:table) belegte die erste Grid-Zelle · Haarlinie über „X Bewertungen" (Elementor- Panel-Rahmen des Data-Tabs-Widgets) raus · Karten-Hover: Titel bleibt Ink (Kit-a:hover färbte über inherit grün) · Galerie Mobile: Hauptbild max. 72vw hoch, zentriert, Thumbs 56 px. v1.99: Block 24 Produktseite — Abschnitts-Navigation (.hf-secnav-wrap / .hf-secnav, Pills im Chip-Look, aktiv Emerald, sticky unter dem Header, auf dem Handy wischbar) und Mobile-Kaufleiste (.hf-buybar, nur ≤767, schiebt Modern Carts Floating-Button hoch). hf-core 1.17.0, JS-Modul hf-frontend-secnav.js · Bewertungen: v1.95-Umbau mit display:contents zurückgenommen (#reviews war ohne Box kein Sprungziel), Hinweis § 5b kommt jetzt aus hf-core direkt vor dem Formular. v1.98: Bewertungskarte gegen Live-Markup — WCML-Flagge raus, WCML-Wrapper div[lang] (Text + Screenshot) und Germanized-Status „Verifizierter Kauf" einsortiert · woocommerce.css-Regeln mit #reviews #comments (2 IDs: Rand, 50px Einzug, p-Margins, Meta .75em) überschrieben. v1.97: Produktseite gegen Live-Screenshot 07.10. — Galerie-Thumbs als einzeilige Scroll-Leiste (woocommerce.css setzte 25 %-Raster und Deckkraft .5 mit 0,4,3) · Bewertungszeile: Sterne Vermillion, kein Woo-Abstand · Mengenfeld fest 76 × 52, Screenreader-Label sicher versteckt · .hf-h1-product (Produktnamen sind lang: max. 2.6rem statt 3.2rem, balance). v1.96: Block 19 gegen das Live-Markup (Single-Product-Template, 07.10.): woocommerce.css bringt .woocommerce div.product p.price (0,3,2: Olive, 1.25em, del .5) und form.cart-Margins/-Floats — Preis (Produktseite, Karte, Variante) und Kaufzeile auf (0,4,x) gebumpt · einfache Produkte: Menge + Button in einer Zeile (Elementor rendert dort keinen Holder) · WCML-Link „Nur Bewertungen in Deutsch anzeigen" aus · .hf-safety (Produktsicherheit, hf-core 1.16.1). v1.95: Rezensionen × hf-core-Bewertungen (Block 19/23 zusammen): Woo gibt in .comment-text Sterne → p.meta → p.hf-review-src → .description → Screenshot aus. Neu sortiert: Sterne · Text · Screenshot · Name/Siegel · Herkunft. Hinweis § 5b (hängt hinter dem Formular) rückt zwischen Liste und Formular · Varianten-Label (th.label) linksbündig — Browser zentriert th · Kaufbutton „disabled" (variable Produkte vor der Auswahl) wieder blass: das all:unset der Basisregel schlug ihn. v1.94: Block 19 Angebote (hf-core 1.16.0) — .hf-sale-badge (Galerie + Loop-Item, Vermillion-Pille, ohne Versalien wegen „bis −20 %"), .hf-pcard__badge (Shortcode-Widget [hf_sale_badge] oben links auf dem Kartenbild), .hf-price-low (30-Tage-Tiefstpreis unter dem Preis, Legal-Skala .875, eigene Zeile) · FIX Block 3: v1.70 hatte den .hf-star-Kommentar mitten in den Selektor „.hf-bg-emerald .hf-eyebrow" gesetzt → Stern nur auf Emerald Vermillion, Eyebrow auf Emerald fiel auf Emerald zurück (Block 6 gewann). Beides repariert. v1.93: Produkt-Box — Bild und Text oben bündig (war vertikal mittig, Querformat-Bilder schwebten), Bild im Quadrat oben statt mittig. v1.92: Zitat-Linie von Ober- bis Unterlänge (v1.91 schnitt an der Grundlinie ab). v1.91: Zitat-Linie bündig mit dem Text (text-box trim, Fallback halber Zeilenabstand). v1.90: Standard-Zitat leiser (Bricolage 500, max. 18 px, Zeilenhöhe 1.55, Linie 2 px). v1.89: Standard-Zitat im Beitrag/Rechtstext (.hf-post blockquote): Emerald-Linie, Display-Schrift. v1.88: .hf-review-img (Screenshot-Vorschau unter der Bewertung, hf-core 1.12.0). v1.87: Block 23 Bewertungen (hf-core 1.10.0): .hf-review-src (Herkunft + Link unter der Bewertung), .hf-review-notice (§ 5b UWG), Woo-Label „Verifizierter Kauf". v1.86: .hf-revoke hängt links raus — Schrift fluchtet mit den Footer-Links. v1.85: .hf-revoke im Heading-Widget: Schriftgröße gegen Elementors inherit-Regel (0,4,1). v1.84: .hf-revoke Schrift wie Footer-Links (DM Sans 1rem/400), Rand bleibt dezent. v1.83: .hf-site-logo optisch linksbündig (--hf-logo-shift, relativ zur Höhe; Header -6 %, Footer -10 %), Höhen als --hf-logo-h. v1.82: .hf-site-logo — SVG linksbündig im Bildrahmen (object-position), Link ohne Zeilenhöhe. v1.81: .hf-revoke leiser: .875rem/500, 1px-Rand, Creme 85 % — Größe der Rechtslinks. v1.80: .hf-revoke aus der Fließtext-Link-Regel (v1.59/1.73) ausgenommen — Unterstrich weg, Hover-Text war Creme auf Creme. v1.79: .hf-site-logo (Logo-Widget: Höhe aus dem System, Header 40/56, Footer .hf-site-logo--footer 96/120) · .hf-revoke (Widerrufsbutton: Kontur-Pille, deutlich sichtbar, aber kein Primär-CTA; hell und dunkel). v1.78: .hf-ccard mit Meta-Zeile: Meta + Txtlink docken gemeinsam unten an. v1.77: .hf-meta im .hf-center-Stack zentriert. v1.76: Block 21 Produkt-Box [hf_product] im Beitrag (hf-core 1.8.0). v1.75: Inhaltsverzeichnis (Rank Math) wieder Ink ohne Unterstrich, Emerald + Linie erst bei Hover (v1.60-Link-Regel hatte übernommen). v1.74: Beitrag — Gutenberg-Buttons im System-Look (core/button war WP-Schwarz) · Deko-Bild (Block-Stil „hf-deco" / Klasse .hf-deco: zentriert, klein, weißer Bildgrund per multiply weg, enger Anschluss an die folgende H2) · Block 20 Lead-Formular [hf_lead] (Mini-Karte, hf-core 1.7.0). v1.73: Fließtext-Links auf Emerald/Ink: Pillen und Txtlinks ausgenommen (Button-Unterstreichung) · .hf-lede--wide (72ch für Sektionsköpfe mit langer H2). v1.72: .e-con.hf-grid-2/-3-Kopplung (Regel 15) — Container bleibt Flex, Grid kommt aus der Klasse; Elementor-Grid-Setting (e-grid) nicht nötig. v1.71: pcard im Loop — Body wächst (gegen .e-con.e-child flex-grow:0), Preis + Txtlink docken unten an (auch ohne Preis). v1.70: .hf-star (Stern in Vermillion, Trust-Zeile) · Txtlink im pcard-Body auf Inhaltsbreite (Systemregel statt Widget-Width-Setting). v1.69: Block 19 „Shop" (WooCommerce) — .hf-gallery (Product-Images- Widget, Sale-Flash im Badge-Look), .hf-rating (Sterne Vermillion, Link 1rem), .hf-price (Preis Display + Germanized-Hinweise als Legal), .hf-buy (Add-to-Cart: Varianten-Select, Menge, Kit-Button-Reset → Primär-Button), .hf-reviews (Rezensionen im qcard-Look, Formular), .hf-pcard__price (Preiszeile im Loop-Item), .hf-faq-sec:has(--none) blendet die FAQ-Sektion aus, wenn [hf_faq cat="auto"] leer ist · .hf-split--media-first (Bild vor Copy auf Mobile, Block 5). v1.68: .hf-post h4/h5 (Datenschutz-Hierarchie). v1.67: .hf-legal-page — Hyphenate für H1/H2, H1 auf Mobile eine Stufe kleiner. v1.66: hf-copy ohne Widgets (Kit-Margins raus) · .hf-read auch als div, Artikel darin nicht doppelt zentriert (Rechtliches-Template). v1.65: .hf-wrap (Boxed-Wrapper für PHP-Templates). v1.64: hf-cover--plain (Freisteller ohne Rahmen) · hf-cover--1x1/4x3/3x4/3x2. v1.63: hf-center-Kontext: Häkchen-Liste als zentrierter Block linksbündig, CTA-Zeile zentriert (Danke-Seite). v1.62: Freebie: Badge→H2 +8, Legal-Abstand 24. v1.61: Badge/Tag im Copy-Stack width:auto. v1.60: Fließtext-Links hell (FAQ, Editor, Beitrag) unterstrichen. v1.59: Fließtext-Links auf Emerald/Ink erben Farbe + Unterstrich. v1.58: qcard-Quelle margin-top:auto. v1.57: Loop-Grid-Gaps 24 statt Elementor-30; gemountet 0. v1.56: Bleed für .hf-track--js auf ≤1024 (Container + Loop). v1.55: bcard-Kategorie wieder Emerald (Elementor-Span) · related-Meta Row-Gap 4 · Loop --related als Spur auf ≤1024 (Startseite Blog). v1.54: Block 9.1 Folgen-Zeilen auf Ink (.hf-ep-list/--fade, .hf-ep-row) für die Startseite; .hf-bg-ink .hf-txtlink Creme. v1.53: .hf-ccard--tag-over (Tag über Bild, am Container) · Bild-Abstand in der ccard mit (0,3,0). v1.52: .hf-ccard Elementor-Kopplung (Tag im Fluss, Bild optional). v1.51: .hf-pcard weiß + Elementor-Kopplung (Container-Link, __body, Bild-Radius, Heading-p-Zeilenhöhe). v1.50: Chip-Hover nur mit Link (a.hf-chip / .hf-chip:has(a)). v1.49: .e-con.hf-trust-row-Kopplung + Widget-Reset (Startseite Trust #1). v1.48: .hf-h1-sm (lange H1) · .hf-sec-foot (Schlusszeile unter Grid). v1.47: .hf-list-check auf Emerald · .hf-statement mit Abstand, wenn nicht erstes Kind · cite-Abstand wie __src. v1.46: Blob-Clip wieder nur horizontal (v1.43 revertiert). v1.45: Blob-Struktur festgelegt: Sektion Full Width → HTML-Blob → Container Boxed (kein e-con-inner-Eingriff). v1.44: Blob-Widget display:contents — Blob hängt an der Sektion, Boxed bleibt; Clip-Regel ohne Kind-Kombinator. v1.43: Blob-Sektionen clippen beide Achsen (kein Überhang mehr). v1.42: .e-con.hf-cta-row-Kopplung + Widget-Reset (Kurse S2, Button sprang nach rechts). v1.41: Text-Editor-p im Copy-Stack ohne Kit-Margins; Heading-p line-height 1.6 (Kurse S6). v1.40: .hf-qcard als Elementor-Struktur — Heading-Kopplung für .hf-stars und .hf-qcard__cite, Widget-Margin-Reset (Kurse S5) · .hf-blob--tr auf ≤767 in die Ecke geschoben (Sektionskopf frei). v1.39: Bereinigung Block 9 — qcard/Chips/ecard standen doppelt (zweiter Block war der Stand vor v1.26, Span-Nummer statt Counter); Duplikat entfernt, jede Komponente einmal · .e-con.hf-chips-Kopplung + Widget-Reset für Chips-Zeilen (Podcast, Über mich). v1.38: text-wrap:pretty als Default für p/li · .hf-split auf (0,2,0) via .e-con — Elementor setzt flex- direction über .e-con.e-flex, der Split verlor je nach Container- Einstellung. Presse-Karten-Feinschliff (Link 1rem, Zitat 600). v1.37: Block 18 „Über mich" — .hf-list-check (Häkchen-Liste im Text-Editor-Widget), .hf-qcard--press (Presse-Zitat mit Quelle), .hf-statement (großes Zitat auf Emerald) v1.36: Beitrag — H1 auf 28–40px (war H2-Skala bis 46px, drei Zeilen bei 720) · .hf-post-img (Beitragsbild vor dem Inhalt, 16:9) · H2 im Text 80 statt 64 oben v1.35: Beitrag Live-Fixes — Lesebreite als Token --hf-read (720), Klasse .hf-read am Container ums Post-Content-Widget (Widget selbst hat Elementors max-width:100%; Optimized Markup ohne inneren Container abgedeckt) · H2/H3 im Beitrag mit eigener Zeilenhöhe (Kit 1.06 zu eng) · Kopf/Autorin-Box zentriert v1.34: Block 17 „Beitrags-Template" — .hf-post-head (H1 in H2-Größe), .hf-meta (Meta-Zeile außerhalb von Karten, gleiche Härtung wie .hf-bcard__meta), .hf-author (Autorin-Box), .hf-loop--related (Archiv-Loop-Item 3-spaltig ohne --wide-Effekte) v1.33: Hero-Feinschliff — .hf-split--copy-wide (1.5:1 ab Desktop) · .hf-lede mit fester Zeilenhöhe 1.6 (inkl. Heading-Title) · 12px extra nach H1/H2 im Copy-Stack (Underline-Ausgleich) · .hf-chip:hover auf der Klasse statt auf a v1.32: Blog-Archiv Live-Fixes — Elementor Taxonomy-Filter im Chip- Look (.hf-chips--filter, „Alle" vorn, aria-pressed = aktiv) · .hf-bcard__meta: Widgets in einer Zeile mit gleicher Höhe (Shortcode- Widget war 100 % breit, Heading-Spans line-height 1) · Auszug-Clamp und Zeilenhöhe sitzen jetzt am inneren

, nicht am Wrapper · .hf-cover--round (Porträt im Blog-Hero) · Filter-Hover über Widget- Custom-Properties v1.31: Block 16 „Beitragsinhalt" — .hf-post (Lese-Typo für Gutenberg- Inhalt) · Block-Stile aus hf-core: is-style-hf-check (Häkchen-Liste), is-style-hf-faq (Details-Akkordeon), is-style-hf-pull (Zitat-Karte) · Rank-Math-TOC-Block gestylt (nummeriert, Karte) · Core-Akkordeon (WP 6.9) im FAQ-Look, Kit-Button-Reset am Toggle. Kein Gutenberg- Plugin nötig. v1.30: aktiver Kategorie-Chip im Archiv-Template über body.category- × .hf-chip--cat- — Elementor kann --active nicht dynamisch setzen. Slugs: elternschaft-entwickeln, eltern-staerken, kinder-verstehen, kinder-staerken, eltern-kind-beziehung. v1.29: Blog-Archiv — Block 15: .hf-loop (Elementor Loop Grid) mit Pagination im Chip-Look · .hf-bcard als Loop-Item-Container (Meta- Row, Body wächst, Txtlink dockt an — gleiche Härtung wie .hf-ecard) · Meta: Kategorie · Datum · Lesezeit (Trenner „·") · .hf-chip-Basis trägt Rand/Link-Reset/Hover (vorher nur --icon), .hf-chip--active v1.28: Karten-H3 (pcard/ccard/bcard/ecard) fest auf 700 — Kit-H3 ist 800 für freistehende Zwischentitel, in Karten bei ~17px zu schwer · Font-Smoothing (antialiased / grayscale) auf body — lag nur in der Referenz-Demo-Ebene; macOS rendert Bricolage/DM Sans sonst subpixel-fett. Kein Effekt auf Windows/Android. v1.27: Folgen-Karte — Body wächst wieder (.e-con.e-child flex-grow:0 schlug flex:1), Txtlink dockt unten an · h3 text-wrap:balance · Meta-Trenner „·" zwischen Datum und Dauer · Meta auf Eyebrow-Skala (.78rem) v1.26: Folgen-Karte — Nummer aus CSS-Counter (kein Span mehr, Track zählt die Karten automatisch) · .hf-ecard__cover funktioniert direkt am Image-Widget · .hf-ecard__meta als Elementor-Container in Row (Default war Column) v1.25: Stretched Link für Heading-Widget-Pillen — .hf-btn und .hf-chip am Wrapper, nur um den Text: das bekommt ein Pseudo, das die ganze Pille klickbar macht (Tap-Ziel, BFSG). Button-Widget für Chips ungeeignet (Kit-Styles auf .elementor-button). v1.24: .hf-cover — Hero-/Produktbild als Objekt (Radius L, Schatten, füllt die Split-Spalte). Lag bisher nur in der Referenz-Demo-Ebene. v1.23: Sektions-Abstand steuerbar — .hf-pt-0/-slim/-sm und .hf-pb-0/-slim/-sm auf der pad-y-Skala. Regel: gleicher Grund → untere Sektion hf-pt-0 (ein pad-y dazwischen), Farbwechsel → beide voll · .hf-legal läuft natürlich, .hf-legal--narrow = 52ch v1.22: .hf-freebie-grid ENTFERNT — Freebie-Spalten laufen über Elementor-Container (Entscheid 03.09.), Mobile-Stack + Gap in den Responsive-Settings · Legal außerhalb des Grids: .hf-card-xl > .hf-legal bekommt 32 oben (Systemregel statt Widget-Margin) · .hf-legal greift auch auf den Absatz im Heading-Widget (52ch schlug gegen .hf-copy p 58ch fehl) · line-height 1.5 fest, kein .hf-lh-* mehr nötig · keine Widget-Margins am Legal-Text v1.21: FAQ — Desktop-Größen per clamp (Frage 1→1.25rem, Antwort 1→1.0625rem = 17px ab Tablet, Zeile 20px), Caret (--hf-svg-chevron) statt +/− mit 180°-Drehung bei [open] · exklusives Öffnen: Shortcode setzt name="hf-faq-N" (nativ), JS-Modul animiert das Schließen des Geschwisters. Footer-Akkordeon behält +/− (Navigations-Chrome). v1.20: Hausregel Lesbarkeit (BFSG) — Lesetext nie unter 1rem: FAQ-Antwort, Karten-Absätze (pcard/ccard/ecard/bcard-excerpt), Footer-Links, Form-Input, Karten-Txtlinks, Chips, Desktop-Nav auf 1rem · .hf-legal .76→.875 (Rechtstext ist Lesetext) · Labels (Eyebrow, Meta, Badge, Tag) bleiben klein v1.19: FAQ-Feinschliff nach Live-Sicht — Antwort blendet beim Öffnen ein (JS-Modul in hf-frontend.js animiert die Höhe) · .hf-faq margin-top (32) zurück (war beim Block-14-Umbau rausgefallen) · Antwort-Absätze ohne Kit-/Browser-Margins, Abstand nur aus p + p · Antwort-Breite 70ch · Zeilenhöhe 1.55 · Frage-Zeile 16px statt 18px v1.18: Kit-Kollisionen — .hf-h-sm wirkt jetzt auch auf den .elementor-heading-title darunter (saß nur am Wrapper) · .hf-faq__q h3 auf (0,2,1) gebumpt · ENQUEUE-FIX nötig: hf-system muss NACH dem Site-Kit-Stylesheet laden (Handle elementor-post- {kit_id}), sonst gewinnt post-{kit}.css jeden (0,1,1)-Gleichstand — betrifft alle „.hf-xcard h3"-Regeln. Siehe Ladereihenfolge unten. v1.17: Podcast-Bausteine + FAQ-Umzug — .hf-chip--icon (Chip mit Icon-Maske, Icon pro Plattform über --hf-chip-icon am Modifier, Default Play-Glyphe) · .hf-ecard (Folgen-Karte, typografisches Cover mit Farb-Rotation Emerald/Coral/Creme via :nth-child, Geometrie = .hf-bcard) · Block 14 rendert jetzt das Shortcode- Markup aus hf-core.php ([hf_faq] → details.hf-faq__item), das Nested-Accordion-Mapping ist raus · .hf-ecard__cover mit Bild (Nummer wird Badge via :has) · --hf-chip-icon-color-Hook (Marken-Icons in Ink, Guideline) · .hf-btn white-space:nowrap (Freebie-Form-Button brach ≥768 um) · .hf-legal a erbt Farbe · .hf-center/.hf-sec-head (Sektionskopf) · [id]{scroll-margin-top} für Anker unter dem Sticky-Header v1.16: Housekeeping vor dem Unterseiten-Build — keine neuen Regeln, keine Frontend-Änderung. Ungeführter Vorspann (html/ body-Basis, Hand-Circle-Stapelung, text-wrap-Utilities, Bleed- Override) in die Blöcke einsortiert · Anschnitt-Bleed ≤1024 aus v1.7 ZURÜCKGENOMMEN (galt seit 22.07. nur noch per !important- Override, jetzt als Regel: Karussell endet am Gutter; Grund nachtragen) · neues Token --hf-creme-line für die Footer- Trennlinien (vorher 2× hart) · doppeltes --hf-h1 entfernt (der zuletzt gültige Wert bleibt) · Block 1.1 „Basis" neu v1.15: Mobile-Atmung — pad-y-Floors 58→64 / 46→52, Split-Stack 32→40, CTA-Row-Abstand 12→16, s-48 neu in der Skala · Hand-Circle nur noch auf hellem Grund (Vermillion), auf Emerald/Ink rendert die Klasse automatisch die Underline (Lesbarkeits-Fix, kein Widget-Edit nötig) · Underline auf Emerald in Chartreuse · Header-CTA ≤767 kompakt (im Widget „Hide on Mobile" lösen) · .hf-cta-alt: Sekundärlink Langform gestapelt / Kurzform inline ab 1025 · Blob-X-Clip als :has-Systemregel (Container-Custom-CSS dafür wieder entfernen) v1.14: Slides height:auto — gleiche Kartenhöhen im Karussell (Stretch auf die höchste Karte, txtlink bleibt unten gepinnt) v1.13: Karussell-Geometrie (Anschnitt-Bleed + Dot-Padding) in den .swiper-Bump — Vendor-CSS lädt zur Laufzeit nach uns und hatte beides überschrieben (margin auto auf .swiper) v1.12: Footer-Akkordeons nur noch ≤767 mit Creme-Trennlinien und Tap-Padding; Tablet: Brand volle Zeile, drei Menüs nebeneinander (first-child-Span, keine Widget-Settings nötig) v1.11: Footer-Spalten als Mobile-Akkordeons (.hf-fcol/__head/__list) — zu als Default, No-JS offen, Desktop statisch, +/− aus CSS v1.10: Txtlinks in Karten (pcard/ccard/bcard) ohne Underline — Pfeil trägt die Affordance; Standalone behält die Linie v1.9: Blog-Variante — .hf-bcard--wide (2-spaltig Desktop, 16:9, größerer Titel) + Grundregeln .hf-bcard__media / __excerpt v1.8: Slide-Härtung Setup A — Elementors Container-Flex-Kaskade quetschte die Slides trotz Swiper-Inline-Breite (flex-shrink); neutralisiert via .swiper-wrapper/.swiper-slide-Bump v1.7: Karussell-Feinschliff — Slides breiter (1.18/2.15, Fallback 84 %/45 % deckungsgleich), klickbare Dots im System-Look inkl. Dunkelgrund-Variante, rechter Anschnitt-Bleed ≤ 1024 v1.6: Track-Fallback präzisiert (Plain-Container vs. Loop-Widget) + .e-con-Härtung für den Grid-Fallback v1.5: .hf-wordmark pensioniert — Original-Schriftzug (®) führt. Neu: .hf-logo (+--lg) mit Auto-Invert auf Emerald/Ink & im Panel v1.4: SVG-Dekor komplett nach CSS verlagert (mask + Token / currentColor) — keine Inline-SVGs mehr in Widgets, Ein-Klassen- API für Underline/Circle/Arrow, IG-Icon & Play via CSS v1.3: + Typo-Utilities .hf-lh-* (100/106/120/140/165) und .hf-fw-* (400–800) — Skala-Werte, kit-fest via :is()-Spezifität v1.2: FAQ-Breite aus dem CSS entfernt (steuert der Elementor- Container) · Mockup-Referenz-Block FAQ bereinigt (lag im Live-DOM auf demselben Wrapper → Doppel-Border-Fix) · Selektoren gegen reales Widget-DOM bestätigt v1.1: + Header/Nav (Theme-Builder-Template) · + FAQ-Mapping auf Elementor Nested Accordion (Selektoren gegen Repo verifiziert) · Reveal an .hf-js gekoppelt (kein No-JS-Blackout) ------------------------------------------------------------ Struktur- und Kontext-Klassen für den Elementor-Build. Quelle: happyfam-startseite-design-v02.html (v02.1) Creative Direction „Klar & Warm, mit Haltung" · Palette-Lock 19.06.2026 Ladereihenfolge: NACH elementor-frontend UND nach dem Site-Kit enqueuen — deps ['elementor-frontend','elementor-post-'.kit_id], kit_id aus get_option('elementor_active_kit') (siehe Klassenblatt). Lesbarkeit (v1.20): Lesetext ≥ 1rem, Rechtstext ≥ .875rem, nur Labels/Meta darunter (Eyebrow .78, Meta .72, Badge .7, Tag .68). Konventionen: Skelett-Felder im Elementor-UI bleiben leer · kein Widget-Custom-CSS · Global Fonts ohne Farbe · Gaps nur aus der Space-Skala · SVG-Dekor nur aus CSS · Elementor-Kopplung nur wo kommentiert · kein !important (Spezifität über Bumps) · NICHTS vor diesem Header — jede Regel gehört in einen Block und in den Changelog. Media-Query-Kanten (mobile-first, deckungsgleich mit Elementor-Defaults): Basis = Mobile · min-width 768px = Tablet+ · min-width 1025px = Desktop ============================================================ */ /* ============ 1 · Tokens ============ */ :root{ /* Farben — Duplikat der Site-Kit Global Colors (akzeptiert, Palette gelockt) */ --hf-creme:#FDF9F3; --hf-emerald:#056146; --hf-vermillion:#E17238; --hf-chartreuse:#C6D819; --hf-coral:#FAB2AA; --hf-ink:#0C1F18; --hf-white:#FFFFFF; /* Abgeleitete Töne (AA-geprüft, siehe v02.1-Messwerte) */ --hf-ink-muted:rgba(12,31,24,.72); /* einziger Muted-Ton auf hellen Gründen */ --hf-line:rgba(12,31,24,.12); /* Trennlinie auf hellen Gründen */ --hf-creme-line:rgba(253,249,243,.18); /* v1.16: Trennlinie auf Emerald/Ink (Footer) */ --hf-creme-85:rgba(253,249,243,.88); /* Fließtext auf Emerald */ --hf-creme-60:rgba(253,249,243,.62); /* Fließtext auf Ink */ /* Typografie — Familien-Duplikat des Site Kits */ --hf-font-display:'Bricolage Grotesque',sans-serif; --hf-font-body:'DM Sans',system-ui,sans-serif; /* Heading-Skala als Referenz (führend gepflegt im Site Kit, Custom Unit) */ --hf-h1:clamp(2.8rem,8.5vw,4rem); --hf-h2:clamp(1.9rem,6vw,2.9rem); --hf-h2-sm:clamp(1.6rem,5vw,2.3rem); --hf-h1-sm:clamp(2.2rem,6.5vw,3.2rem); /* v1.48: lange H1 (3 Zeilen) */ --hf-h3:clamp(1.15rem,3.5vw,1.35rem); /* Radius & Schatten */ --hf-r-s:10px; --hf-r-m:16px; --hf-r-l:26px; --hf-shadow:0 12px 32px rgba(12,31,24,.09); --hf-shadow-soft:0 6px 18px rgba(12,31,24,.07); /* Space-Skala — die einzigen erlaubten Gap-/Stack-Werte */ --hf-s-12:12px; --hf-s-16:16px; --hf-s-24:24px; --hf-s-32:32px; --hf-s-40:40px; --hf-s-48:48px; --hf-s-64:64px; /* SVG-Shapes als mask-Quellen — Farbe kommt aus background (Token bzw. currentColor), dadurch bleiben alle Striche in der Token- Kette. Kein Inline-SVG in Widgets nötig (Konvention 6). */ --hf-svg-underline:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 16' preserveAspectRatio='none'%3E%3Cpath d='M5 11C60 6.5 158 6 215 9.5' fill='none' stroke='%23000' stroke-width='7' stroke-linecap='round'/%3E%3C/svg%3E"); --hf-svg-circle:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 90' preserveAspectRatio='none'%3E%3Cpath d='M18 48C14 18 200 6 226 34C244 58 90 92 34 76C12 69 14 58 22 52' fill='none' stroke='%23000' stroke-width='6' stroke-linecap='round'/%3E%3C/svg%3E"); --hf-svg-arrow-hand:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 74 56'%3E%3Cpath d='M70 8C48 6 18 14 10 42M4 32L10 44L22 40' fill='none' stroke='%23000' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); --hf-svg-arrow:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 12h15m-6-6 6 6-6 6' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); --hf-svg-ig:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='3' y='3' width='18' height='18' rx='5' fill='none' stroke='%23000' stroke-width='2'/%3E%3Ccircle cx='12' cy='12' r='4' fill='none' stroke='%23000' stroke-width='2'/%3E%3Ccircle cx='17.2' cy='6.8' r='1.3'/%3E%3C/svg%3E"); /* v1.21: Chevron (nach unten) — FAQ-Caret */ --hf-svg-chevron:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 9l7 7 7-7' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); /* Rahmen */ --hf-wrap:1120px; /* = Site Kit Content Width */ --hf-read:720px; /* v1.35: Lesebreite Beitrag (Kopf, Text, Autorin-Box) — ~80 Zeichen bei 17px */ --hf-pad-x:clamp(22px,4vw,32px); /* Gutter, liegt innen */ --hf-pad-y:clamp(64px,10vw,104px); /* v1.15: Mobile-Floor 58→64 */ --hf-pad-y-sm:clamp(52px,8vw,80px); /* v1.15: Mobile-Floor 46→52 */ --hf-pad-y-slim:clamp(28px,5vw,44px); } /* ============ 1.1 · Basis (v1.16, aus dem Vorspann) ============ rem-Anker fest auf 16px — die clamp()-Skalen oben rechnen darauf. overflow-x auf body ist der letzte Fangzaun gegen horizontales Scrollen (Blobs sind seit v1.15 per :has geclippt, Karussells enden seit v1.16 am Gutter — die Regel bleibt als Sicherung). */ html{font-size:16px} body{overflow-x:hidden;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale} /* v1.28 */ /* v1.38: Witwen-Schutz sitewide — kein Einzelwort in der letzten Zeile. Headlines bleiben bei balance (hf-txtbalance). Progressive Enhancement. */ p,li,dd,figcaption{text-wrap:pretty} /* ============ 2 · Sektionsrahmen ============ */ /* v1.65: Boxed-Wrapper für Theme-Templates (Rechtliches) und Referenz-HTML — Elementor-Boxed-Container bleibt der Normalfall, .hf-wrap ist das PHP-Äquivalent. */ .hf-wrap{max-width:var(--hf-wrap);margin-inline:auto;padding-inline:var(--hf-pad-x);box-sizing:content-box} .hf-sec{ position:relative; padding:var(--hf-pad-y) var(--hf-pad-x); } .hf-sec--sm{padding-block:var(--hf-pad-y-sm)} .hf-sec--slim{padding-block:var(--hf-pad-y-slim)} /* v1.23 · Seiten-Utilities (nach den Größen, damit sie gewinnen). Gleicher Grund oben/unten → untere Sektion hf-pt-0, sonst stapeln sich zwei pad-y. Farbwechsel → beide Sektionen voll. */ .hf-sec.hf-pt-0{padding-top:0} .hf-sec.hf-pt-slim{padding-top:var(--hf-pad-y-slim)} .hf-sec.hf-pt-sm{padding-top:var(--hf-pad-y-sm)} .hf-sec.hf-pb-0{padding-bottom:0} .hf-sec.hf-pb-slim{padding-bottom:var(--hf-pad-y-slim)} .hf-sec.hf-pb-sm{padding-bottom:var(--hf-pad-y-sm)} /* Inhalt über Deko-Ebene (Blobs) */ .hf-sec > *{position:relative;z-index:1} /* ============ 3 · Hintergrund-Kontexte ============ Ein Attribut bündelt: Fläche, Textfarben, Headings, Eyebrow, Platzhalter-Variante. Nutzbar auf Sektionen UND Karten. Creme = Default (Body-Hintergrund aus Site Kit), keine Klasse nötig. */ .hf-bg-white{background:var(--hf-white)} .hf-bg-emerald{background:var(--hf-emerald);color:var(--hf-creme-85)} .hf-bg-emerald :is(h1,h2,h3){color:var(--hf-white)} .hf-bg-emerald .hf-eyebrow{color:var(--hf-creme-85)} /* v1.94: Selektor repariert (v1.70 hatte den Kommentar dazwischengesetzt) */ /* v1.70: einzelner Stern im Fließtext/Trust-Zeile: ★ */ .hf-star{color:var(--hf-vermillion)} .hf-bg-emerald .hf-lede{color:var(--hf-creme-85)} /* v1.73: Links in Pillen/Txtlinks ausgenommen (Heading-Widget-Muster v1.25, ohne Klasse) */ .hf-bg-emerald :is(p,li,.elementor-heading-title,.elementor-widget-text-editor) a:not([class]):not(:is(.hf-btn,.hf-chip,.hf-txtlink,.hf-revoke) a), .hf-bg-ink :is(p,li,.elementor-heading-title,.elementor-widget-text-editor) a:not([class]):not(:is(.hf-btn,.hf-chip,.hf-txtlink,.hf-revoke) a){color:inherit;text-decoration:underline;text-underline-offset:3px} .hf-bg-emerald :is(p,li,.elementor-widget-text-editor) a:not([class]):hover, .hf-bg-ink :is(p,li,.elementor-widget-text-editor) a:not([class]):hover{color:var(--hf-white)} .hf-bg-ink{background:var(--hf-ink);color:var(--hf-creme-60)} .hf-bg-ink :is(h1,h2,h3){color:var(--hf-white)} .hf-bg-ink .hf-eyebrow{color:var(--hf-coral)} .hf-bg-ink .hf-lede{color:var(--hf-creme-60)} .hf-bg-coral{background:var(--hf-coral);color:var(--hf-ink)} .hf-bg-coral .hf-eyebrow{color:var(--hf-ink)} .hf-bg-coral .hf-lede{color:var(--hf-ink)} /* Kontrastgrenzen auf Coral (v02.1: Vermillion vs Coral = 1,8:1) */ .hf-bg-coral .hf-btn--primary, .hf-bg-coral .elementor-button{ /* Elementor-Kopplung, bewusst · v2.58: Ring Emerald statt Ink, passend zum Ghost-Button daneben */ box-shadow:0 0 0 2px var(--hf-emerald),0 10px 22px rgba(12,31,24,.2); } .hf-bg-coral .hf-legal{color:rgba(12,31,24,.8)} /* ============ 4 · Deko: Chartreuse-Blobs ============ Systemregel im Code: Blobs rendern NUR auf Emerald. */ .hf-blob{ display:none; position:absolute;z-index:0; background:var(--hf-chartreuse); border-radius:52% 48% 56% 44%/54% 46% 54% 46%; opacity:.9;pointer-events:none; } .hf-bg-emerald .hf-blob{display:block} .hf-blob--tr{width:220px;height:190px;right:-70px;top:-60px} .hf-blob--bl{width:180px;height:160px;left:-60px;bottom:-50px} .hf-blob--sm-tr{width:150px;height:130px;right:-50px;top:30px} /* v1.40: auf Mobile in die Ecke — zentrierte Sektionsköpfe auf Emerald (Kurse S4, Über mich Statement) liefen sonst ins Chartreuse. */ @media(max-width:767px){.hf-blob--tr{top:-120px;right:-100px}} /* Blob-Überhang erzeugte X-Scroll: horizontal clippen, vertikal offen (Kanten-Überlapp Creme→Emerald bleibt). Systemregel statt Container-Custom-CSS (Konvention 2) — greift nur auf Sektionen, die tatsächlich einen Blob tragen. */ .hf-sec:has(.hf-blob){overflow-x:clip;overflow-y:visible} /* v1.46: vertikaler Überhang zurück (v1.43 revertiert) · ohne ">" — in Elementor liegt der Blob im Widget/Container */ /* v1.44/45: Blob im HTML-Widget (Elementor): Wrapper und Widget-Container aus dem Fluss (display:contents). Struktur: Sektion Full Width → HTML-Blob → Container Boxed — der Blob hängt am Full-Bleed-Rand. */ .hf-sec .elementor-widget:has(.hf-blob), .hf-sec .elementor-widget:has(.hf-blob) > .elementor-widget-container{display:contents} /* ============ 5 · Layout-Pattern ============ */ /* Split: DOM immer Copy → Media. --media-left dreht ab Tablet. */ /* v1.38: (0,2,0) via .e-con-Kopplung — Elementor setzt flex-direction über .e-con.e-flex (0,2,0), ein reines .hf-split verlor je nach Container-Setting */ .hf-split, .e-con.hf-split{display:flex;flex-direction:column;gap:var(--hf-s-40)} /* v1.15: Mobile-Stack 32→40 */ .hf-split__copy, .hf-split__media, .e-con.hf-split__copy, .e-con.hf-split__media{min-width:0;width:auto} @media(min-width:768px){ .hf-split,.e-con.hf-split{flex-direction:row;align-items:center;gap:var(--hf-s-40)} .hf-split--media-left,.e-con.hf-split--media-left{flex-direction:row-reverse} .hf-split__copy,.hf-split__media, .e-con.hf-split__copy,.e-con.hf-split__media{flex:1 1 0} } /* v1.69 · Media zuerst auf Mobile (Produktseite: Bild vor Titel/Preis), ab Tablet links — impliziert --media-left, nicht kombinieren. */ .hf-split--media-first,.e-con.hf-split--media-first{flex-direction:column-reverse} @media(min-width:768px){.hf-split--media-first,.e-con.hf-split--media-first{flex-direction:row-reverse}} @media(min-width:1025px){ .hf-split,.e-con.hf-split{gap:var(--hf-s-64)} /* v1.33 · Copy breiter als Media (z. B. rundes Porträt rechts) */ .hf-split--copy-wide > .hf-split__copy,.e-con.hf-split--copy-wide > .e-con.hf-split__copy{flex:1.5 1 0} .hf-split--copy-wide > .hf-split__media,.e-con.hf-split--copy-wide > .e-con.hf-split__media{flex:1 1 0} } /* Copy-Stack: Abstände kommen aus dem Stack, nicht aus den Elementen */ .hf-copy{display:flex;flex-direction:column;align-items:flex-start;gap:var(--hf-s-16)} .hf-copy > :is(h1,h2,h3,h4,p,ul,ol){margin-block:0} /* v1.66: Kit-Margins raus, wenn hf-copy ohne Elementor-Widgets läuft (PHP-Templates) — Abstand kommt aus dem Gap */ .hf-copy p{max-width:58ch} /* v1.41: Absätze im Copy-Stack — Kit-p-Margins raus, Abstand kommt aus dem Stack-Gap (Text-Editor) bzw. Heading-p ohne Elementor-line-height:1. */ .hf-copy .elementor-widget-text-editor p{margin:0} .hf-copy .elementor-widget-text-editor p + p{margin-top:var(--hf-s-12)} .hf-copy p.elementor-heading-title{line-height:1.6;margin:0} .hf-copy > .elementor-widget:is(.hf-badge,.hf-tag){width:auto;max-width:none} /* v1.61: Pillen im Copy-Stack ohne Width-Setting */ .hf-copy > .hf-badge, .hf-copy > .elementor-widget.hf-badge{margin-bottom:8px} /* v1.62: Badge → H2: 16 + 8 */ /* v1.17: Sektionskopf zentriert (Folgen, Zitate) + Abstand zum Inhalt darunter */ .hf-center{text-align:center;align-items:center;margin-inline:auto} .hf-center p{margin-inline:auto} .hf-sec-head{margin-bottom:var(--hf-s-40)} .hf-sec-foot{margin-top:var(--hf-s-40)} /* v1.48: Schlusszeile unter einem Grid (Beratung S4) — Gegenstück zu hf-sec-head */ /* v1.17: Anker landen unter dem Sticky-Header, nicht dahinter */ [id]{scroll-margin-top:84px} .hf-copy .hf-cta-row{margin-top:var(--hf-s-16)} /* v1.15: 12→16 (Lede→CTA gesamt 32) */ /* v1.33 · nach einer H1/H2 MIT Hand-Underline/Circle 12px extra — der Strich hängt unter die Grundlinie und frisst optisch vom Gap. Ohne Hand-Element bleibt das normale Gap. Elementor: Wrapper enthält das h. */ .hf-copy > :is(h1,h2):has(.hf-hand-underline,.hf-hand-circle) + *, .hf-copy > :has(> :is(h1,h2) .hf-hand-underline, > :is(h1,h2) .hf-hand-circle) + *{margin-top:var(--hf-s-12)} .hf-cta-row{display:flex;flex-wrap:wrap;align-items:center;gap:var(--hf-s-24)} /* v1.42: CTA-Zeile als Elementor-Container — (0,2,0) gegen Container- Settings (Direction/Justify), Widget-Reset wie bei .hf-chips. */ .e-con.hf-cta-row{display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:flex-start;gap:var(--hf-s-24);padding:0} .hf-cta-row > .elementor-widget{width:auto;max-width:none;margin:0} .hf-center .hf-cta-row, .hf-center .e-con.hf-cta-row{justify-content:center} /* v1.63: CTA-Zeile im zentrierten Stack (Danke-Seite) */ /* Track: Karussell-Fallback (Scroll-Snap) → ab Desktop Grid. Gilt für PLAIN-Container mit Karten als direkten Kindern. Loop-Widgets (eigenes Markup) bedient ausschließlich hf-swiper.js — deren No-JS-Fallback sind die Widget-Spalten (Mobile = 1, gestapelt). ≤1024 übernimmt das Swiper-Snippet (setzt .hf-track--js). */ /* Elementor-Härtung (Konvention 5): Grid gewinnt auch als .e-con */ .e-con.hf-track{display:grid} .hf-track{ display:grid;grid-auto-flow:column;grid-auto-columns:84%; gap:var(--hf-s-16); overflow-x:auto;scroll-snap-type:x mandatory; padding-block:6px 14px; scrollbar-width:none; } .hf-track::-webkit-scrollbar{display:none} .hf-track > *{scroll-snap-align:start} @media(min-width:768px){ .hf-track{grid-auto-columns:45%} } @media(min-width:1025px){ .hf-track{ grid-auto-flow:row;grid-template-columns:repeat(3,1fr); overflow:visible;gap:var(--hf-s-24); } } /* Mounted-Zustand: Dots im System-Look. Das Karussell endet am Gutter (v1.16 — der rechte Anschnitt-Bleed aus v1.7 ist zurückgenommen; wer ihn zurückholt, setzt hier wieder margin-inline-end:calc(-1 * var(--hf-pad-x)) für ≤1024). */ .hf-track--js{ display:block;scroll-snap-type:none; --swiper-pagination-color:var(--hf-emerald); --swiper-pagination-bullet-inactive-color:var(--hf-ink); --swiper-pagination-bullet-inactive-opacity:.22; --swiper-pagination-bullet-size:8px; --swiper-pagination-bullet-horizontal-gap:5px; } /* Mounted-Geometrie mit .swiper-Bump: swiper-bundle.css wird zur Laufzeit NACH hf-system geladen und setzt u. a. margin auto auf .swiper — (0,2,0) gewinnt reihenfolge-unabhängig (Konvention 5). margin-inline-end:0 explizit, damit Vendor-margin auto nicht greift. */ .hf-track--js.swiper{padding-bottom:34px;margin-inline-end:0} /* Raum für die Dots */ .hf-track--js .swiper-pagination{bottom:0} .hf-bg-emerald .hf-track--js, .hf-bg-ink .hf-track--js{ --swiper-pagination-color:var(--hf-creme); --swiper-pagination-bullet-inactive-color:var(--hf-creme); --swiper-pagination-bullet-inactive-opacity:.35; } /* Elementor-Container als Slides (Setup A): Elementors Flex-Kaskade auf .e-con.e-child (0,2,0) schlägt swiper-bundle.css (.swiper-slide, 0,1,0) — die Slides shrinken trotz Swipers Inline-Breite zusammen. Härtung über JS-garantierte Klassen, kein !important (Konvention 5). */ .hf-track--js.swiper > .swiper-wrapper{display:flex} .hf-track--js.swiper > .swiper-wrapper > .swiper-slide{ flex:0 0 auto;max-width:none;min-width:0; height:auto; /* Swipers 100 % raus → Flex-Stretch zieht alle Slides auf die höchste Karte */ } /* Grids */ .hf-grid-2, .e-con.hf-grid-2{display:grid;grid-template-columns:1fr;gap:var(--hf-s-16);padding:0} /* 2-spaltig ab Tablet (Kurse) */ @media(min-width:768px){ .hf-grid-2,.e-con.hf-grid-2{grid-template-columns:1fr 1fr;gap:var(--hf-s-24)} } .hf-grid-3, .e-con.hf-grid-3{display:grid;grid-template-columns:1fr;gap:var(--hf-s-16);padding:0} /* 3-spaltig erst ab Desktop (Zitate) */ @media(min-width:1025px){ .hf-grid-3,.e-con.hf-grid-3{grid-template-columns:repeat(3,1fr);gap:var(--hf-s-24)} } /* v1.72: (0,2,0) via .e-con — schlägt .e-con.e-flex (display) und .e-con.e-grid (grid-template-columns aus dem Setting). Kinder-Container: Breite aus der Zelle. */ .e-con.hf-grid-2 > .e-con, .e-con.hf-grid-3 > .e-con{width:auto;min-width:0} .hf-grid-2 > .elementor-widget, .hf-grid-3 > .elementor-widget{width:auto;max-width:none;margin:0} /* Trust-Leiste (Sektion 2) */ .hf-trust-row{ display:flex;flex-wrap:wrap;align-items:center;justify-content:center; gap:var(--hf-s-24) var(--hf-s-32);text-align:center; } /* v1.49: Elementor-Kopplung (0,2,0) + Widget-Reset — Badges als HTML-Widget, Text als Heading-Widget; keine Width-Settings mehr nötig. */ .e-con.hf-trust-row{display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:center;gap:var(--hf-s-24) var(--hf-s-32);text-align:center;padding:0} .hf-trust-row > .elementor-widget{width:auto;max-width:none;margin:0} .hf-trust-row p, .hf-trust-row .elementor-heading-title{display:block;font-weight:600;max-width:34ch;line-height:1.45;margin:0} /* display:block — Heading-Tag span ist inline, sonst greift max-width nicht */ @media(min-width:768px){.hf-trust-row p,.hf-trust-row .elementor-heading-title{text-align:left}} /* Footer-Raster (Sektion 14) */ .hf-footer{padding:var(--hf-pad-y-sm) var(--hf-pad-x) 0} .hf-footer__top{display:grid;gap:var(--hf-s-32);padding-bottom:var(--hf-s-40)} @media(min-width:768px) and (max-width:1024px){ .hf-footer__top{grid-template-columns:repeat(3,1fr)} .hf-footer__top > :first-child{grid-column:1/-1} /* Brand volle Zeile, Menüs darunter nebeneinander */ } @media(min-width:1025px){.hf-footer__top{grid-template-columns:1.4fr 1fr 1fr 1fr;gap:var(--hf-s-32)}} .hf-footer h4{ font-family:var(--hf-font-display);font-weight:700; color:var(--hf-white);font-size:.95rem;margin-bottom:var(--hf-s-12); } .hf-footer li{margin-bottom:9px;list-style:none} .hf-footer li a{font-size:1rem;color:var(--hf-creme-85);text-decoration:none} .hf-footer li a:hover{color:var(--hf-white);text-decoration:underline;text-underline-offset:4px} .hf-footer__claim{margin-top:var(--hf-s-16);max-width:26ch} .hf-footer__bottom{ border-top:1px solid var(--hf-creme-line); padding:22px 0 30px; display:flex;flex-wrap:wrap;gap:var(--hf-s-12);justify-content:space-between; font-size:.82rem;color:var(--hf-creme-60); } .hf-ig-link{ display:inline-flex;align-items:center;gap:10px;margin-top:var(--hf-s-16); font-weight:700;color:var(--hf-white);text-decoration:none; } .hf-ig-link::before{ content:"";width:20px;height:20px;flex:0 0 auto; background:currentColor; -webkit-mask:var(--hf-svg-ig) center/contain no-repeat; mask:var(--hf-svg-ig) center/contain no-repeat; } .hf-ig-link:hover{color:var(--hf-coral)} /* Footer-Spalten als Akkordeons NUR ≤767 (Elementor-Mobile) — Tablet/Desktop statisch. No-JS bleibt alles offen (.hf-js-Gate). +/− und Trennlinien kommen aus CSS (Konvention 6); Linie = --hf-creme-line, dieselbe wie .hf-footer__bottom. */ @media(max-width:767px){ .hf-js .hf-footer__top{gap:0} .hf-js .hf-footer__top > :first-child{padding-bottom:24px} /* Brand atmet vor der ersten Linie */ .hf-js .hf-fcol{border-top:1px solid var(--hf-creme-line)} .hf-js .hf-fcol__head{display:flex;align-items:center;justify-content:space-between;cursor:pointer;padding-block:16px} .hf-js .hf-fcol__head h4{margin-bottom:0} .hf-js .hf-fcol__head::after{content:"+";font-weight:700;font-size:1.25em;line-height:1;opacity:.7} .hf-js .hf-fcol.is-open .hf-fcol__head::after{content:"−"} .hf-js .hf-fcol__head:focus-visible{outline:2px solid currentColor;outline-offset:4px;border-radius:4px} .hf-js .hf-fcol:not(.is-open) .hf-fcol__list{display:none} .hf-js .hf-fcol.is-open .hf-fcol__list{padding-bottom:16px} } /* ============ 6 · Typo-Hilfsklassen ============ */ .hf-eyebrow{ display:inline-block; font-family:var(--hf-font-body);font-weight:700;font-size:.78rem; letter-spacing:.14em;text-transform:uppercase; color:var(--hf-emerald); } .hf-lede, .hf-lede .elementor-heading-title{color:var(--hf-ink-muted);line-height:1.6} /* v1.33: Zeilenhöhe fest, hf-lh-165 an Ledes entfällt */ /* Dynamische Ledes (Archiv-Beschreibung, Auszug) liefern

— Heading-Widget dann auf Tag div stellen (p-in-p ist ungültig); innere Absätze ohne Margin */ .hf-lede p{margin:0;max-width:58ch} /* v1.73: breiter Lede für Sektionsköpfe mit langer H2 (72ch statt 58ch) */ .hf-lede.hf-lede--wide p, .hf-lede.hf-lede--wide .elementor-heading-title{max-width:72ch} .hf-lede p + p{margin-top:var(--hf-s-12)} .hf-lede p:empty{display:none} .hf-h1-sm,.hf-h1-sm .elementor-heading-title{font-size:var(--hf-h1-sm) !important} /* v1.48: H1 mit drei Zeilen (Beratung-Hero) — Kit-h1 kommt mit (0,1,1), daher !important wie hf-h-sm */ .hf-h-sm,.hf-h-sm .elementor-heading-title{font-size:var(--hf-h2-sm) !important} /* einzige erlaubte Ausnahme: kleine H2 (Sektion 4, Freebie, FAQ) — v1.18: greift auch am Heading-Widget */ /* Typo-Utilities — Feinjustage NUR über diese Skala, nie über Widget-Typografie-Felder (Konvention 4). Wirken auf das Element selbst und auf Headings/Text darunter. .elementor-heading-title im :is() ist bewusste Elementor-Kopplung (Konvention 5) — hebt die Spezifität auf (0,2,0) und schlägt die Kit-Typografie damit unabhängig von der Ladereihenfolge. b/strong bleiben bewusst draußen: Bold im Fließtext überlebt ein .hf-fw-400 am Container. */ .hf-lh-100,.hf-lh-100 :is(h1,h2,h3,h4,h5,h6,p,li,blockquote,.elementor-heading-title){line-height:1} .hf-lh-106,.hf-lh-106 :is(h1,h2,h3,h4,h5,h6,p,li,blockquote,.elementor-heading-title){line-height:1.06} .hf-lh-120,.hf-lh-120 :is(h1,h2,h3,h4,h5,h6,p,li,blockquote,.elementor-heading-title){line-height:1.2} .hf-lh-140,.hf-lh-140 :is(h1,h2,h3,h4,h5,h6,p,li,blockquote,.elementor-heading-title){line-height:1.4} .hf-lh-165,.hf-lh-165 :is(h1,h2,h3,h4,h5,h6,p,li,blockquote,.elementor-heading-title){line-height:1.65} .hf-fw-400,.hf-fw-400 :is(h1,h2,h3,h4,h5,h6,p,li,blockquote,.elementor-heading-title){font-weight:400} .hf-fw-500,.hf-fw-500 :is(h1,h2,h3,h4,h5,h6,p,li,blockquote,.elementor-heading-title){font-weight:500} .hf-fw-600,.hf-fw-600 :is(h1,h2,h3,h4,h5,h6,p,li,blockquote,.elementor-heading-title){font-weight:600} .hf-fw-700,.hf-fw-700 :is(h1,h2,h3,h4,h5,h6,p,li,blockquote,.elementor-heading-title){font-weight:700} /* 800 nur auf Display-Elementen einsetzen — DM Sans hat keinen 800er-Schnitt (Faux-Bold-Risiko) */ .hf-fw-800,.hf-fw-800 :is(h1,h2,h3,h4,h5,h6,p,li,blockquote,.elementor-heading-title){font-weight:800} /* Umbruch-Utilities (v1.16, aus dem Vorspann) — gleiche Container- Logik wie .hf-lh-* und .hf-fw-*. balance für Headlines/kurze Ledes (≤ 4 Zeilen), pretty für Fließtext (nur Witwen-Schutz). */ .hf-txtpretty :is(h1,h2,h3,h4,h5,h6,p,li,blockquote,.elementor-heading-title){text-wrap:pretty} .hf-txtbalance :is(h1,h2,h3,h4,h5,h6,p,li,blockquote,.elementor-heading-title){text-wrap:balance} /* ============ 7 · Buttons & Links ============ Basis führt das Site Kit (Bricolage 700 · 19px · Radius 999 · Padding 15/27 · Vermillion/Weiß). Diese Klassen = Referenz, Ghost-Variante und Hover-Verhalten. */ .hf-btn{ display:inline-flex;align-items:center;gap:10px; font-family:var(--hf-font-display);font-weight:700;font-size:1.1875rem; /* 19px = Large-Text-Kante */ line-height:1;padding:15px 27px;border-radius:999px; white-space:nowrap; /* v1.17: Button bricht in Form-Zeilen nicht mehr um (Freebie ≥768) */ text-decoration:none;cursor:pointer;border:0; transition:transform .18s ease,filter .18s ease,box-shadow .18s ease; } .hf-btn:hover{transform:translateY(-2px)} .hf-btn:active{transform:translateY(0)} /* v1.25 · Heading-Widget-Muster: Klasse am Wrapper, innen nur um den Text. Die ganze Pille wird klickbar, Textfarbe erbt. Gilt für .hf-btn und .hf-chip (Elementor-Kopplung, bewusst). */ .hf-btn,.hf-chip{position:relative} .hf-btn .elementor-heading-title, .hf-chip .elementor-heading-title{font:inherit;color:inherit;line-height:inherit;margin:0} .hf-btn .elementor-heading-title > a, .hf-chip .elementor-heading-title > a{color:inherit;text-decoration:none} .hf-btn .elementor-heading-title > a::after, .hf-chip .elementor-heading-title > a::after{content:"";position:absolute;inset:0;border-radius:inherit} .hf-btn--primary{ background:var(--hf-vermillion);color:var(--hf-white); box-shadow:0 8px 20px rgba(225,114,56,.32); } .hf-btn--primary:hover{filter:brightness(1.05)} .hf-btn--ghost{ background:transparent; border:2px solid var(--hf-emerald);color:var(--hf-emerald); } .hf-btn--ghost:hover{background:var(--hf-emerald);color:var(--hf-creme)} .hf-txtlink{ font-weight:700;display:inline-flex;align-items:center;gap:8px; color:inherit;text-decoration:none; border-bottom:2px solid currentColor;padding-bottom:2px; } /* In Karten trägt der Pfeil allein — die Linie bleibt Standalone-Links vorbehalten (Nicht-Farb-Affordance im Fließtext-Umfeld, WCAG 1.4.1). */ .hf-pcard .hf-txtlink, .hf-ccard .hf-txtlink, .hf-bcard .hf-txtlink{border-bottom:0;padding-bottom:0} .hf-txtlink::after{ content:"";width:1em;height:1em;flex:0 0 auto; background:currentColor; -webkit-mask:var(--hf-svg-arrow) center/contain no-repeat; mask:var(--hf-svg-arrow) center/contain no-repeat; transition:transform .18s ease; } .hf-txtlink:hover::after{transform:translateX(4px)} .hf-txtlink--soft{ font-weight:600;color:var(--hf-ink-muted); border-bottom:0;text-decoration:underline;text-underline-offset:4px; } .hf-txtlink--soft::after{content:none} /* Sekundärlink mit zwei Längen (Entscheid 22.07.): gestapelt führt die Langform, inline neben dem Button ab Desktop die Kurzform. Ein Widget, beide Texte an einer Stelle gepflegt — keine Responsive-Visibility-Duplikate. Markup: oder direkt zu Kursen & Beratung Kurse & Beratung */ .hf-cta-alt__short{display:none} @media(min-width:1025px){ .hf-cta-alt__long{display:none} .hf-cta-alt__short{display:inline} } /* ============ 8 · Marken-Elemente ============ */ /* Logo: Original-Schriftzug HappyFam® — eingetragene Marke, identisch mit den Card-Verpackungen. Disziplin: Original farbig NUR auf Creme/Weiß. Auf Emerald/Ink und im Nav-Panel automatisch einfarbig Weiß (Filter-Fallback, bis eine Vektor-Weiß-Version vorliegt — danach per /src tauschen, Regel bleibt identisch). Die Farbregel „weiß-auf-Emerald, Fam in Vermillion" gilt weiter für typografische Setzungen des Namens, nicht mehr als Nav-Marke. */ .hf-logo{display:block;height:40px;width:auto} .hf-logo--lg{height:52px} .hf-bg-emerald .hf-logo, .hf-bg-ink .hf-logo, .hf-nav-panel .hf-logo{filter:brightness(0) invert(1)} /* v1.79 · Logo als Elementor Site-Logo-/Image-Widget (neue SVGs, 18.09.). Klasse ans Widget, Breite im Widget auf Standard — Höhe kommt von hier. Auf Emerald/Ink die beige SVG einsetzen (kein Filter mehr nötig). SVG-Artboard eng auf die Form zuschneiden, sonst braucht es Widget-Margins. */ /* v1.83: optischer Linksbündig-Versatz — das Dach steht über, Wand/Schrift sollen auf der Textkante sitzen. Versatz relativ zur Logo-Höhe, skaliert mit. Feinjustage nur über --hf-logo-shift (Anteil der Höhe, negativ = nach links). */ .hf-site-logo{--hf-logo-h:40px;--hf-logo-shift:-0.06} @media(min-width:1025px){.hf-site-logo{--hf-logo-h:56px}} .hf-site-logo--footer{--hf-logo-h:96px;--hf-logo-shift:-0.1} @media(min-width:1025px){.hf-site-logo--footer{--hf-logo-h:120px}} .elementor-widget.hf-site-logo{width:auto;max-width:none;margin:0} .hf-site-logo img{display:block;width:auto;height:var(--hf-logo-h);max-width:none;object-fit:contain;object-position:left center; /* v1.82: SVG im Rahmen linksbündig */ margin-inline-start:calc(var(--hf-logo-h) * var(--hf-logo-shift))} .hf-site-logo a{display:inline-block;line-height:0} /* Hand-Touch: geometrisch, max. 1 Element pro Komposition. Reines CSS (mask + Token) — Ein-Klassen-API, kein Inline-SVG: Underline/Circle: das Wort in wickeln, Arrow: leeres

. Übersteht Text-Edits im Widget und braucht kein unfiltered_html. Farbregel v1.15: helle Gründe Vermillion, Emerald Chartreuse. Formregel v1.15: Circle nur auf hellem Grund (Einzelwort mit Luft) — auf Emerald/Ink schneidet der Kreis durch Ober-/Unter- längen, dort rendert .hf-hand-circle deshalb automatisch die Underline. Bestehende Spans bleiben unangetastet. Stapelung v1.16: Circle liegt HINTER dem Wort (z-index:-1 im Stacking-Context der Sektion, den .hf-sec > * aufspannt) — der Strich darf die Buchstaben nicht überzeichnen. */ .hf-hand-underline, .hf-hand-circle{position:relative;display:inline-block;white-space:nowrap} .hf-hand-underline::after{ content:"";position:absolute;left:-2%;bottom:-.14em;width:104%;height:.22em; background:var(--hf-vermillion); -webkit-mask:var(--hf-svg-underline) center/100% 100% no-repeat; mask:var(--hf-svg-underline) center/100% 100% no-repeat; pointer-events:none; } .hf-hand-circle::after{ content:"";position:absolute;left:-7%;top:-16%;width:114%;height:132%; z-index:-1; background:var(--hf-vermillion); -webkit-mask:var(--hf-svg-circle) center/100% 100% no-repeat; mask:var(--hf-svg-circle) center/100% 100% no-repeat; pointer-events:none; } /* Dunkelgrund-Fallback: Circle-Span rendert Underline-Geometrie */ .hf-bg-emerald .hf-hand-circle::after, .hf-bg-ink .hf-hand-circle::after{ left:-2%;top:auto;bottom:-.14em;width:104%;height:.22em; -webkit-mask:var(--hf-svg-underline) center/100% 100% no-repeat; mask:var(--hf-svg-underline) center/100% 100% no-repeat; } .hf-bg-emerald :is(.hf-hand-underline,.hf-hand-circle)::after{background:var(--hf-chartreuse)} .hf-hand-arrow{ display:block;width:74px;height:56px; background:var(--hf-ink); -webkit-mask:var(--hf-svg-arrow-hand) center/contain no-repeat; mask:var(--hf-svg-arrow-hand) center/contain no-repeat; } /* v1.24 · Cover-/Objektbild im Split (Podcast-Cover, Produktfoto). Klasse ans Image-Widget; Radius + Schatten machen aus dem Bild ein Objekt auf dem Grund. Elementors max-width:100% am Wrapper bleibt, die 440 sitzen am . */ .hf-cover img, img.hf-cover{display:block;width:100%;height:auto;border-radius:var(--hf-r-l);box-shadow:var(--hf-shadow)} /* Breite = Spalte (kein max-width — der Split regelt die Größe). Elternkette ohne overflow:hidden lassen, sonst wird der Schatten geclippt. */ /* v1.32 · Porträt-Variante (Blog-Hero): Kreis, kleiner, rechts in der Spalte */ /* v1.64: Freisteller/Mockups mit Transparenz — kein Kartenrahmen, Schatten am Objekt */ .hf-cover--plain img, img.hf-cover--plain{border-radius:0;box-shadow:none;filter:drop-shadow(0 18px 30px rgba(12,31,24,.18))} /* v1.64: Seitenverhältnis-Utilities für Split-Bilder (Zuschnitt per object-fit, Fokus Mitte) */ .hf-cover--1x1 img,.hf-cover--4x3 img,.hf-cover--3x4 img,.hf-cover--3x2 img{width:100%;height:auto;object-fit:cover} .hf-cover--1x1 img{aspect-ratio:1/1} .hf-cover--4x3 img{aspect-ratio:4/3} .hf-cover--3x4 img{aspect-ratio:3/4} .hf-cover--3x2 img{aspect-ratio:3/2} .hf-cover--round img, img.hf-cover--round{aspect-ratio:1;object-fit:cover;border-radius:50%;max-width:360px;margin-inline:auto 0;box-shadow:var(--hf-shadow-soft)} @media(max-width:767px){.hf-cover--round img,img.hf-cover--round{max-width:260px;margin-inline:auto}} /* Hero-Statement-Karte (Entscheid beim Foto-Einbau: bleibt oder fliegt) */ .hf-mini-card{ position:absolute;right:-6px;bottom:0;z-index:2; background:var(--hf-white);border-radius:14px; padding:16px 18px 14px;max-width:210px; box-shadow:var(--hf-shadow);transform:rotate(-4deg); } .hf-mini-card::before{ content:"";position:absolute;top:0;left:0;right:0;height:7px; background:var(--hf-emerald);border-radius:14px 14px 0 0; } .hf-mini-card small{ display:block;font-size:.62rem;font-weight:700;letter-spacing:.12em; text-transform:uppercase;color:var(--hf-ink-muted);margin:4px 0 6px; } .hf-mini-card strong{ font-family:var(--hf-font-display);font-weight:700; font-size:1rem;line-height:1.25;color:var(--hf-ink); } @media(min-width:1025px){.hf-mini-card{right:-18px;bottom:8px}} .hf-hero-media{position:relative;padding-bottom:26px} /* ============ 9 · Karten-Komponenten ============ */ /* XL-Karte (Freebie-Container) */ .hf-card-xl{ border-radius:var(--hf-r-l); padding:clamp(34px,6vw,60px); overflow:hidden;position:relative; } /* Freebie-Spalten: KEINE Systemklasse mehr (Entscheid 03.09.) — Breiten, Gap und Mobile-Stack liegen in den Elementor-Container-Settings der beiden Cols. Dokumentierte Ausnahme zu Konvention 1. */ .hf-freebie-form{display:flex;flex-direction:column;gap:var(--hf-s-12);margin-top:var(--hf-s-24);max-width:460px} .hf-copy > .elementor-widget.hf-freebie-form{width:100%} /* v1.62: hf-copy schrumpft Kinder auf Inhaltsbreite — Form braucht volle Breite bis max 460 */ @media(min-width:768px){.hf-freebie-form{flex-direction:row}} .hf-freebie-form input{ flex:1;font:inherit;font-size:1rem; padding:15px 20px;border-radius:999px; border:1.5px solid rgba(12,31,24,.7); background:var(--hf-white);color:var(--hf-ink); } .hf-freebie-form input::placeholder{color:rgba(12,31,24,.5)} .hf-badge{ display:inline-block;background:var(--hf-ink);color:var(--hf-creme); font-size:.7rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase; padding:6px 14px;border-radius:999px; } .hf-legal, .hf-legal p, .hf-legal .elementor-heading-title{font-size:.875rem;line-height:1.5;color:var(--hf-ink-muted);margin:0} /* v1.23: Breite nur mit Modifier — am inneren Element, weil Elementors .e-con>.elementor-widget{max-width:100%} (0,2,0) die Wrapper-Regel schlägt. */ .hf-legal--narrow p, .hf-legal--narrow .elementor-heading-title{max-width:52ch} .hf-copy .hf-legal{margin-top:var(--hf-s-12)} /* im Copy-Stack: + Gap 16 = 28 */ .hf-card-xl > .hf-legal{margin-top:var(--hf-s-24)} /* v1.62: 32→24 — unter dem Grid, Karte schließt sonst unten zu schwer */ .hf-legal a{color:inherit;text-decoration:underline;text-underline-offset:3px} /* v1.17: Datenschutz-Link erbte Browser-Blau */ /* Produkt-Karte (Sektion 5) */ .hf-pcard{ background:var(--hf-white);border:1px solid var(--hf-line); /* v1.51: Weiß wie ccard/bcard — Produktfotos haben weißen Grund, auf Creme stand ein Rechteck */ border-radius:var(--hf-r-m);padding:var(--hf-s-16); transition:transform .18s ease,box-shadow .18s ease; color:var(--hf-ink);text-decoration:none; /* Karte ist als -Container verlinkt */ } .hf-pcard:hover{transform:translateY(-4px);box-shadow:var(--hf-shadow-soft)} .hf-pcard h3{font-size:1.05rem;font-weight:700;margin-bottom:4px} .hf-pcard p{font-size:1rem;color:var(--hf-ink-muted)} .hf-pcard .hf-thumb{margin-bottom:var(--hf-s-16)} /* v1.51: Elementor-Struktur — Container .hf-pcard (Link am Container, Padding 0) Image-Widget → Bild randlos · Container .hf-pcard__body (Padding 16) → Heading h3 + Heading p */ .hf-pcard, .e-con.hf-pcard{display:flex;flex-direction:column;gap:0;padding:0;overflow:hidden} /* Bild bis an den Rand, Radius clippt */ .hf-pcard img{display:block;width:100%;height:auto} .hf-pcard > .elementor-widget, .hf-pcard__body > .elementor-widget{margin:0} .hf-pcard__body, .e-con.hf-pcard__body{display:flex;flex-direction:column;gap:4px;padding:var(--hf-s-16)} .hf-pcard p.elementor-heading-title{line-height:1.5;margin:0} .hf-pcard h3.elementor-heading-title{margin:0} /* Kurs-Karte (Sektion 7) */ .hf-ccard{ background:var(--hf-white);border:1px solid var(--hf-line); border-radius:var(--hf-r-m);padding:var(--hf-s-24); display:flex;flex-direction:column;gap:var(--hf-s-12); transition:transform .18s ease,box-shadow .18s ease; } .hf-ccard:hover{transform:translateY(-4px);box-shadow:var(--hf-shadow)} .hf-ccard .hf-tag{ align-self:flex-start;background:var(--hf-emerald);color:var(--hf-creme); font-size:.68rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase; padding:5px 12px;border-radius:999px; } .hf-ccard h3{font-weight:700} .hf-ccard p, .hf-ccard p.elementor-heading-title{color:var(--hf-ink-muted);font-size:1rem;line-height:1.55;margin:0} .hf-ccard .hf-txtlink{margin-top:auto;color:var(--hf-emerald)} /* v1.38: wie bcard/ecard */ /* v1.52: Elementor-Kopplung — Container .hf-ccard (Link am Container möglich) Heading .hf-tag → Image (optional, im Fluss) → Heading h3 → Heading p/Text-Editor → Heading .hf-txtlink */ .e-con.hf-ccard{display:flex;flex-direction:column;gap:var(--hf-s-12);padding:var(--hf-s-24);color:var(--hf-ink);text-decoration:none} .hf-ccard > .elementor-widget{margin:0;width:auto;max-width:100%} /* Heading-Widget: Pille auf den Title, Wrapper neutral (sonst doppelte Höhe) */ .hf-ccard .elementor-widget.hf-tag{background:none;padding:0;border-radius:0;align-self:flex-start} .hf-ccard .hf-tag .elementor-heading-title{display:inline-block;background:var(--hf-emerald);color:var(--hf-creme);font-family:var(--hf-font-body);font-size:.68rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;line-height:1.3;padding:5px 12px;border-radius:999px;margin:0} .hf-ccard img{display:block;width:100%;height:auto;border-radius:var(--hf-r-s)} .hf-ccard > .elementor-widget.elementor-widget-image{margin-bottom:var(--hf-s-12)} /* (0,3,0) gegen den Widget-Reset — Bild → H3: Gap 12 + 12 = 24 */ /* v1.53: Tag über dem Bild — Modifier am Karten-Container, kein Widget-Setting. Container .hf-ccard.hf-ccard--tag-over → Tag absolut oben links, Bild rückt an den Kartenrand. */ .hf-ccard > .elementor-widget.hf-txtlink{margin-top:auto} /* (0,3,0): Link dockt unten an, auch im Elementor-Widget */ /* v1.78: Karte mit Meta-Zeile (Beratung: Dauer · Preis) — Meta + Link docken gemeinsam unten an, Meta-Zeilen stehen im Grid auf einer Höhe. Ohne Meta bleibt es beim Link allein. */ .hf-ccard > .hf-meta, .hf-ccard > .e-con.hf-meta{margin-top:auto;padding-top:var(--hf-s-12)} .hf-ccard > .hf-meta ~ .hf-txtlink, .hf-ccard > .hf-meta ~ .elementor-widget.hf-txtlink{margin-top:0} /* (0,4,0) gegen die Auto-Regel oben */ a.hf-ccard:hover h3, a.hf-ccard:hover p{color:inherit} /* Container-Link: Kit-a:hover färbt sonst die H3 */ a.hf-ccard:hover{color:var(--hf-ink)} .hf-ccard--tag-over{position:relative} .hf-ccard--tag-over > .hf-tag, .hf-ccard--tag-over > .elementor-widget.hf-tag{position:absolute;top:var(--hf-s-16);left:var(--hf-s-16);z-index:1;margin:0} .hf-ccard h3.elementor-heading-title{margin:0} .hf-ccard .elementor-widget-text-editor p{margin:0} /* Blog-Karte (Sektion 10) */ .hf-bcard{ background:var(--hf-white);border:1px solid var(--hf-line); border-radius:var(--hf-r-m);overflow:hidden; display:flex;flex-direction:column; transition:transform .18s ease,box-shadow .18s ease; } .hf-bcard:hover{transform:translateY(-4px);box-shadow:var(--hf-shadow)} .hf-bcard__body{padding:20px;padding-bottom:var(--hf-s-24);display:flex;flex-direction:column;gap:10px;flex:1} .hf-bcard__meta{display:flex;flex-wrap:wrap;gap:var(--hf-s-12);align-items:center;font-size:.78rem;font-weight:700;letter-spacing:.06em} .hf-bcard__cat{color:var(--hf-emerald);letter-spacing:.08em;text-transform:uppercase} .hf-bcard__meta span:not(.hf-bcard__cat):not(.hf-bcard__cat *){color:var(--hf-ink-muted)} /* v1.55: Heading-Span im Kategorie-Widget ausgenommen — Kategorie blieb sonst muted */ .hf-bcard__cat .elementor-heading-title, .hf-bcard__cat .elementor-heading-title a{color:var(--hf-emerald)} .hf-bcard h3{font-size:1.08rem;font-weight:700} .hf-bcard .hf-txtlink{margin-top:auto;font-size:1rem;align-self:flex-start;color:var(--hf-emerald)} /* Bild im Loop-Item: Klasse ans Bild-Widget (oder direkt ans ) */ .hf-bcard__media{display:block;width:100%;aspect-ratio:3/2;object-fit:cover;overflow:hidden} .hf-bcard__media img{display:block;width:100%;height:100%;object-fit:cover} .hf-bcard__excerpt{ color:var(--hf-ink-muted);font-size:1rem;line-height:1.55; display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden; } /* Variante „wide": 2-spaltiges Desktop-Layout (Archivseite Elternwissen). Wirkt erst ab 1025 — darunter regieren Karussell/Stapel unverändert. */ @media(min-width:1025px){ .hf-bcard--wide .hf-bcard__media{aspect-ratio:16/9} .hf-bcard--wide .hf-bcard__body{padding:22px 24px 26px;gap:12px} .hf-bcard--wide h3{font-size:clamp(1.15rem,1.6vw,1.5rem)} } /* Zitat-Karte (Sektion 11) */ .hf-qcard{ position:relative;background:var(--hf-creme);color:var(--hf-ink); border-radius:var(--hf-r-m);padding:var(--hf-s-24); display:flex;flex-direction:column;gap:var(--hf-s-12); } .hf-qcard .hf-stars{color:var(--hf-vermillion);font-size:1rem;letter-spacing:2px} .hf-qcard blockquote{ font-family:var(--hf-font-display);font-weight:600; font-size:1.05rem;line-height:1.4;margin:0; } .hf-qcard cite{font-style:normal;font-size:.85rem;color:var(--hf-ink-muted)} /* v1.40: Zitat-Karte mit Sternen als Elementor-Struktur (Kurse, Startseite). Alle Heading-Widgets, Tag div, Klasse am Widget: Container .hf-qcard (im .hf-track) Heading .hf-stars → ★★★★★ Heading .hf-qcard__q → Zitat (Regel bei --press, gilt für beide) Heading .hf-qcard__cite → Name · Kurs */ .hf-qcard .hf-stars .elementor-heading-title{font-family:var(--hf-font-body);font-size:1rem;font-weight:400;line-height:1;letter-spacing:2px;color:var(--hf-vermillion);margin:0} .hf-qcard .hf-qcard__cite .elementor-heading-title{font-family:var(--hf-font-body);font-style:normal;font-size:.85rem;font-weight:400;line-height:1.4;color:var(--hf-ink-muted);margin:0} .hf-qcard > .elementor-widget{margin:0} .hf-qcard cite, .hf-qcard > .elementor-widget.hf-qcard__cite{margin-top:auto} /* v1.58: Quelle dockt unten an — Karten im Grid gleich hoch */ /* Chips (Sektion 3) */ .hf-chips{display:flex;flex-wrap:wrap;gap:var(--hf-s-12)} .hf-chip{ display:inline-flex;align-items:center;gap:10px; background:var(--hf-creme);color:var(--hf-emerald); font-family:var(--hf-font-display);font-weight:700;font-size:1rem; padding:9px 18px;border-radius:999px; border:1px solid var(--hf-line);text-decoration:none; /* v1.29: Basis trägt Rand + Link-Reset (vorher nur --icon) */ transition:transform .18s ease,box-shadow .18s ease,background .18s ease,color .18s ease; } /* Hover auf der Klasse, nicht auf a — im Heading-Widget liegt der Link innen */ /* v1.50: Hover nur für Chips, die ein Link sind oder einen enthalten — Label-Chips (Startseite Eltern Cards) bleiben ruhig. */ a.hf-chip:not(.hf-chip--active):hover, .hf-chip:has(a):not(.hf-chip--active):hover{background:var(--hf-emerald);color:var(--hf-creme);transform:translateY(-2px);box-shadow:var(--hf-shadow-soft)} .hf-bg-white .hf-chip{border-color:transparent} /* v1.29 · aktive Kategorie (Archiv-Chips): Emerald, kein Hover-Sprung */ .hf-chip--active, a.hf-chip--active:hover, body.category-elternschaft-entwickeln .hf-chip--cat-elternschaft-entwickeln, body.category-eltern-staerken .hf-chip--cat-eltern-staerken, body.category-kinder-verstehen .hf-chip--cat-kinder-verstehen, body.category-kinder-staerken .hf-chip--cat-kinder-staerken, body.category-eltern-kind-beziehung .hf-chip--cat-eltern-kind-beziehung{background:var(--hf-emerald);color:var(--hf-creme);border-color:var(--hf-emerald);transform:none;box-shadow:none} /* Neue Kategorie → eine Zeile hier ergänzen (v1.30). */ /* v1.17 · Chip mit Icon (Podcast-Plattformen). Als einsetzen. Icon = Maske aus --hf-chip-icon, Default Play-Glyphe. Marken-Icons NICHT hier zeichnen: offizielle SVGs aus dem jeweiligen Press-Kit pro Modifier setzen, z. B. .hf-chip--spotify{--hf-chip-icon:url("data:image/svg+xml,…")} Einfarbig über currentColor — Marken-Farbicons würden die Palette sprengen. Auf Creme-Grund (Default-Sektion) hat der Chip einen Line-Rand, damit er sich vom Hintergrund löst. */ .hf-chip--icon{ --hf-chip-icon:url("../icons/podcast.svg"); /* Default: generisches Podcast-Zeichen */ } .hf-chip--icon::before{ content:"";width:22px;height:22px;flex:0 0 auto; /* ≥21px: Spotify-Mindestgröße fürs Icon */ background:var(--hf-chip-icon-color,currentColor); -webkit-mask:var(--hf-chip-icon) center/contain no-repeat; mask:var(--hf-chip-icon) center/contain no-repeat; } .hf-chip--icon:hover{--hf-chip-icon-color:var(--hf-creme)} /* Marken-Modifier: Spotify/Apple erlauben ihre Marke nur in Originalfarbe, Schwarz oder Weiß → Icon in Ink, nie Emerald. SVG-Pfad aus dem jeweiligen Press-Kit als --hf-chip-icon eintragen. */ /* Marken-Icons als Dateien unter assets/icons/ (Icon-Zeichen ohne Wortmarke). Pfad relativ zu assets/css/. Apple + Podimo nutzen das Default-Zeichen podcast.svg. Farbe Ink (Guideline: Schwarz/Weiß erlaubt). */ .hf-chip--spotify{--hf-chip-icon:url("../icons/spotify.svg")} .hf-chip--deezer{--hf-chip-icon:url("../icons/deezer.svg")} .hf-chip--audible{--hf-chip-icon:url("../icons/audible.svg")} .hf-chip--spotify,.hf-chip--apple,.hf-chip--audible,.hf-chip--deezer,.hf-chip--podimo{--hf-chip-icon-color:var(--hf-ink)} .hf-chip--spotify:hover,.hf-chip--apple:hover,.hf-chip--audible:hover,.hf-chip--deezer:hover,.hf-chip--podimo:hover{--hf-chip-icon-color:var(--hf-creme)} .hf-chips--center{justify-content:center} /* v1.39: Chips als Elementor-Container — (0,2,0) gegen .e-con.e-flex (Direction/Gap), Heading-Widgets ohne Breite/Margin (analog .hf-meta). Kein Width/Direction mehr in Widget-Settings nötig. */ .e-con.hf-chips{display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;gap:var(--hf-s-12);padding:0} .e-con.hf-chips--center{justify-content:center} .hf-chips > .elementor-widget{width:auto;max-width:none;margin:0} /* v1.17 · Folgen-Karte (Podcast). Geschwister von .hf-bcard: gleiche Radien, gleicher Hover, Txtlink ohne Linie. v1.26: Nummer kommt aus einem CSS-Counter — der Track zählt seine .hf-ecard-Kinder, das Cover zeigt „01", „02" … von selbst. Kein Span, kein Nachpflegen. Mit Bild: Nummer als Badge oben links. Ohne Bild: große Nummer auf Farbrotation (Emerald → Coral → Creme). Elementor-Struktur: Container .hf-ecard Image-Widget .hf-ecard__cover (Illustration 3:2) Container .hf-ecard__body Container .hf-ecard__meta (2× Heading span: Datum · Dauer) Heading h3 · Heading p · Heading div.hf-txtlink mit */ .hf-track{counter-reset:hf-ep} .hf-ecard{ counter-increment:hf-ep; background:var(--hf-white);border:1px solid var(--hf-line); border-radius:var(--hf-r-m);overflow:hidden; display:flex;flex-direction:column; transition:transform .18s ease,box-shadow .18s ease; } .hf-ecard:hover{transform:translateY(-4px);box-shadow:var(--hf-shadow)} .hf-ecard__cover{ position:relative;aspect-ratio:3/2;display:grid;place-items:center; background:var(--hf-emerald);color:var(--hf-creme);overflow:hidden; margin:0; /* Elementor-Widget-Margin raus */ } .hf-ecard__cover img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} /* Nummer: ohne Bild groß und mittig … */ .hf-ecard__cover::after{ content:counter(hf-ep,decimal-leading-zero); font-family:var(--hf-font-display);font-weight:800; font-size:clamp(4rem,14vw,5.5rem);line-height:1;letter-spacing:-.03em; } /* … mit Bild als Badge oben links */ .hf-ecard__cover:has(img)::after{ position:absolute;top:12px;left:12px; font-size:.95rem;font-weight:700;letter-spacing:.06em; padding:6px 11px;border-radius:999px; background:var(--hf-creme);color:var(--hf-ink);box-shadow:var(--hf-shadow-soft); } /* Farbrotation (greift sichtbar nur ohne Bild) */ .hf-ecard:nth-child(3n+2) .hf-ecard__cover{background:var(--hf-coral);color:var(--hf-ink)} .hf-ecard:nth-child(3n+3) .hf-ecard__cover{background:var(--hf-creme);color:var(--hf-emerald);box-shadow:inset 0 -1px 0 var(--hf-line)} .hf-ecard > .hf-ecard__body{padding:20px;padding-bottom:var(--hf-s-24);display:flex;flex-direction:column;gap:10px;flex:1 1 auto} /* (0,2,0) gegen .e-con.e-child flex-grow:0 */ /* Meta als Elementor-Container: Row erzwingen (e-con-Default ist Column) */ .hf-ecard__meta, .e-con.hf-ecard__meta{display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;gap:var(--hf-s-12);font-size:.78rem;font-weight:700;color:var(--hf-ink-muted);letter-spacing:.06em} /* = Eyebrow-Skala (Label) */ .hf-ecard__meta .elementor-heading-title{font:inherit;color:inherit;margin:0} /* Trenner zwischen den Meta-Werten */ .hf-ecard__meta > * + *::before{content:"·";margin-right:var(--hf-s-12);opacity:.6} .hf-ecard h3{font-size:1.08rem;font-weight:700;text-wrap:balance} .hf-ecard p{color:var(--hf-ink-muted);font-size:1rem;line-height:1.55} .hf-ecard .hf-txtlink, .hf-ecard__body > .hf-txtlink{margin-top:auto;font-size:1rem;align-self:flex-start;color:var(--hf-emerald);border-bottom:0;padding-bottom:0} /* ============ 9.1 · Folgen-Zeilen auf Ink (v1.54, Startseite Podcast) ============ Elementor-Struktur: Container .hf-ep-list (.hf-ep-list--fade zeigt 2,5 Zeilen) Container .hf-ep-row (Link am Container) HTML-Widget Container .hf-ep-row__body Heading span .hf-ep-row__title → Folgentitel Container .hf-ep-row__meta → Heading spans: Datum · Dauer Danach Heading .hf-txtlink „Alle Folgen" (im Copy-Stack, nicht in der Liste). */ .hf-ep-list, .e-con.hf-ep-list{display:flex;flex-direction:column;gap:10px;align-self:stretch;position:relative;padding:0} .hf-ep-row, .e-con.hf-ep-row{display:flex;flex-direction:row;align-items:center;gap:var(--hf-s-16);padding:12px 16px 12px 12px; background:rgba(253,249,243,.06);border:1px solid rgba(253,249,243,.12);border-radius:var(--hf-r-m); color:var(--hf-creme);text-decoration:none;transition:background .18s ease,transform .18s ease} .hf-ep-row:hover{background:rgba(253,249,243,.1);border-color:rgba(253,249,243,.28)} /* kein translate — die Fade-Liste clippt sonst rechts */ .hf-ep-row > .elementor-widget, .hf-ep-row__body > .elementor-widget{margin:0;width:auto;max-width:100%} .hf-ep-row .elementor-widget-html:has(.hf-ep-row__play){flex:0 0 auto;line-height:0} .hf-ep-row__play{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--hf-vermillion);flex:0 0 auto} .hf-ep-row__play::after{content:"";width:0;height:0;border-style:solid;border-width:8px 0 8px 13px;border-color:transparent transparent transparent var(--hf-white);margin-left:3px} .hf-ep-row__body, .e-con.hf-ep-row__body{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1 1 auto;padding:0} .hf-ep-row__body > *{margin:0} /* Elementor-Kindabstände raus (Widget + Meta-Container) */ .hf-ep-row__title, .hf-ep-row__title .elementor-heading-title{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden; font-family:var(--hf-font-display);font-weight:700;font-size:1rem;line-height:1.25;color:var(--hf-white);margin:0} .hf-ep-row__meta, .e-con.hf-ep-row__meta{display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;gap:0;padding:0;font-size:.74rem;font-weight:700;letter-spacing:.06em;line-height:1.3;color:var(--hf-creme-60)} .hf-ep-row__meta .elementor-heading-title{font:inherit;line-height:1.3;color:inherit;margin:0} .hf-ep-row__meta > .elementor-widget{width:auto;margin:0;line-height:1.3} .hf-ep-row__meta > * + *::before{content:"·";margin:0 8px;opacity:.6} .hf-ep-list--fade{max-height:calc(2 * 72px + 20px + 36px);overflow:hidden; -webkit-mask-image:linear-gradient(to bottom,#000 70%,transparent 100%);mask-image:linear-gradient(to bottom,#000 70%,transparent 100%)} .hf-bg-ink .hf-txtlink{color:var(--hf-creme)} /* ============ 10 · FAQ ============ Markup kommt aus hf-core.php ([hf_faq cat="…"]), Styling in Block 14. Breite bewusst NICHT im CSS begrenzt: steuert der Elementor- Container (dokumentierte Ausnahme zu Konvention 1). */ /* ============ 11 · Design-Phase (fliegt mit echten Inhalten) ============ */ /* Foto-Platzhalter */ .hf-ph{ position:relative;border-radius:var(--hf-r-l); min-height:300px;display:grid;place-items:center;overflow:hidden; background:linear-gradient(145deg,#F4EDE1,#EDE2D0); border:1.5px dashed rgba(12,31,24,.25); } .hf-ph--sm{min-height:230px} .hf-ph--tall{min-height:360px} .hf-thumb{ position:relative;height:130px;border-radius:var(--hf-r-s); background:linear-gradient(145deg,#F4EDE1,#EDE2D0); border:1.5px dashed rgba(12,31,24,.2); display:grid;place-items:center; } .hf-ph > span, .hf-thumb > span{ font-size:.78rem;font-weight:600;color:var(--hf-ink-muted); background:rgba(255,255,255,.92);padding:8px 14px;border-radius:999px; box-shadow:var(--hf-shadow-soft);text-align:center;max-width:82%; } .hf-thumb > span{font-size:.66rem;background:transparent;box-shadow:none;padding:0} .hf-bg-emerald .hf-ph{background:rgba(253,249,243,.1);border-color:rgba(253,249,243,.45)} .hf-bg-coral .hf-ph{background:rgba(255,255,255,.42);border-color:rgba(12,31,24,.3)} .hf-bg-ink .hf-ph{background:rgba(253,249,243,.07);border-color:rgba(253,249,243,.35)} .hf-bg-ink .hf-ph > span{color:var(--hf-creme-85);background:rgba(12,31,24,.5)} /* FPO-Chip auf Platzhalter-Inhalten */ .hf-fpo{ position:absolute;top:12px;left:12px;z-index:2; font-size:.62rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase; background:rgba(12,31,24,.55);color:var(--hf-white); padding:4px 9px;border-radius:6px; } /* Trust-Siegel-Platzhalter (real: ProvenExpert-Embed via Borlabs) */ .hf-seal{ width:74px;height:74px;border-radius:14px;flex:0 0 auto; border:1.5px dashed var(--hf-line);background:var(--hf-creme); display:grid;place-items:center;padding:6px;text-align:center; font-size:.6rem;font-weight:700;letter-spacing:.06em; text-transform:uppercase;line-height:1.35;color:var(--hf-ink-muted); } /* Podcast-Platzhalter (real: Cover-Bild + Episoden-Liste) */ .hf-pod-cover{ position:relative;border-radius:var(--hf-r-l);min-height:280px; background:rgba(253,249,243,.07);border:1.5px dashed rgba(253,249,243,.35); display:grid;place-items:center; } .hf-pod-cover span{ font-size:.78rem;font-weight:600;color:var(--hf-creme-85); background:rgba(12,31,24,.5);padding:8px 14px;border-radius:999px; } .hf-eps{display:grid;gap:var(--hf-s-12)} .hf-ep{ display:flex;align-items:center;gap:14px; background:rgba(253,249,243,.06); border:1px solid rgba(253,249,243,.14); border-radius:var(--hf-r-m);padding:14px 16px; } .hf-ep__play{ width:42px;height:42px;border-radius:50%;flex:0 0 auto; background:var(--hf-vermillion);display:grid;place-items:center; } .hf-ep__play::before{ content:"";width:14px;height:14px;margin-left:2px; background:var(--hf-white); clip-path:polygon(0 0,100% 50%,0 100%); } .hf-ep__lines{flex:1;display:grid;gap:7px} .hf-ep__lines i{display:block;height:9px;border-radius:4px;background:rgba(253,249,243,.22)} .hf-ep__lines i:last-child{width:55%} /* Freebie-PDF-Mock (real: Cover-Grafik) */ .hf-freebie-visual{position:relative;min-height:230px;display:grid;place-items:center} .hf-pdf-mock{ position:relative;width:172px;aspect-ratio:3/4; background:var(--hf-white);border-radius:12px; box-shadow:0 18px 40px rgba(12,31,24,.22); transform:rotate(5deg); padding:16px;display:flex;flex-direction:column; } .hf-pdf-mock::before{content:"";height:8px;border-radius:6px;background:var(--hf-emerald);margin-bottom:14px} .hf-pdf-mock strong{ font-family:var(--hf-font-display);font-weight:800; font-size:1.15rem;line-height:1.15;color:var(--hf-ink); } .hf-pdf-mock small{ margin-top:auto;font-size:.66rem;font-weight:700; color:var(--hf-ink-muted);letter-spacing:.08em;text-transform:uppercase; } .hf-freebie-arrow{position:absolute;left:8%;bottom:2%;opacity:.85} @media(max-width:1024px){.hf-freebie-arrow{display:none}} /* ============ 12 · Motion & A11y ============ */ /* Reveal nur mit aktivem JS (hf-js kommt inline aus wp_head) — No-JS zeigt sofort */ .hf-js .hf-rv{opacity:0;transform:translateY(16px);transition:opacity .55s ease,transform .55s ease} .hf-js .hf-rv.is-in{opacity:1;transform:none} :focus-visible{outline:3px solid var(--hf-vermillion);outline-offset:3px;border-radius:4px} @media(prefers-reduced-motion:reduce){ .hf-js .hf-faq__item[open] > .hf-faq__a{animation:none} .hf-faq__q::after{transition:none} .hf-js .hf-rv{opacity:1;transform:none;transition:none} .hf-btn,.hf-pcard,.hf-ccard,.hf-bcard,.hf-txtlink::after{transition:none} } /* ============ 13 · Header & Nav (Theme-Builder-Template) ============ */ .hf-header{ position:sticky;top:0;z-index:50; background:var(--hf-creme);border-bottom:1px solid var(--hf-line); } body.admin-bar .hf-header{top:32px} @media(max-width:782px){body.admin-bar .hf-header{top:46px}} .hf-header__bar{ display:flex;align-items:center;justify-content:space-between; max-width:var(--hf-wrap);margin-inline:auto; padding:14px var(--hf-pad-x); } .hf-nav-desktop{display:none;align-items:center;gap:28px} .hf-nav-desktop a{font-weight:600;font-size:1rem;color:var(--hf-ink-muted);text-decoration:none} .hf-nav-desktop a:hover{color:var(--hf-emerald)} .hf-nav-desktop .hf-btn{padding:11px 22px} .hf-burger{display:grid;gap:5px;padding:10px;background:none;border:0;cursor:pointer} .hf-burger span{width:24px;height:3px;border-radius:3px;background:var(--hf-ink)} @media(min-width:1025px){ .hf-nav-desktop{display:flex} .hf-burger{display:none} } /* Header-CTA bleibt ≤767 sichtbar (Entscheid 22.07.) — im Button- Widget „Hide on Mobile" entfernen, Größe regelt das System. ≤359 (SE-Klasse) zieht das Logo mit, damit die Zeile hält. */ @media(max-width:767px){ .hf-header__bar{gap:var(--hf-s-12)} .hf-header__bar .hf-btn{padding:10px 18px;font-size:1rem} } @media(max-width:359px){.hf-header .hf-logo{height:34px}} .hf-nav-panel{ position:fixed;inset:0;z-index:60; background:var(--hf-emerald); display:flex;flex-direction:column;padding:24px; transform:translateY(-102%);transition:transform .3s ease; } body.admin-bar .hf-nav-panel{top:32px} @media(max-width:782px){body.admin-bar .hf-nav-panel{top:46px}} .hf-nav-panel.is-open{transform:translateY(0)} .hf-nav-panel__top{display:flex;justify-content:space-between;align-items:center} .hf-nav-close{ color:var(--hf-creme);font-size:2rem;line-height:1; padding:6px 12px;background:none;border:0;cursor:pointer; } .hf-nav-panel ul{margin:8vh 0 0;display:grid;gap:8px;list-style:none;padding:0} .hf-nav-panel ul a{ font-family:var(--hf-font-display);font-weight:800; font-size:clamp(1.7rem,7vw,2.4rem); color:var(--hf-creme);text-decoration:none;display:block;padding:8px 4px; } .hf-nav-panel ul a:hover{color:var(--hf-white)} .hf-nav-panel .hf-btn{margin-top:auto;justify-content:center} .hf-lock{overflow:hidden} @media(prefers-reduced-motion:reduce){.hf-nav-panel{transition:none}} /* ============ 14 · FAQ (Shortcode-Markup aus hf-core.php) ============ v1.17: ersetzt das Nested-Accordion-Mapping. Natives details/summary. v1.21: Caret statt +/−, exklusiv über name-Attribut (Shortcode) + JS-Modul (animiert). Erste Frage optional offen über open="first". .hf-faq > details.hf-faq__item > summary.hf-faq__q > h3 > div.hf-faq__a */ .hf-faq{border-top:1px solid var(--hf-line);margin-top:var(--hf-s-32)} /* v1.19: Abstand zur Headline */ .hf-faq__item{border-bottom:1px solid var(--hf-line)} .hf-faq__q{ display:flex;justify-content:space-between;align-items:center;gap:var(--hf-s-16); padding:20px 4px;cursor:pointer;list-style:none; } .hf-faq__q::-webkit-details-marker{display:none} .hf-faq .hf-faq__q h3{ /* v1.18: (0,2,1) gegen Kit-h3 · v1.21: clamp */ font-family:var(--hf-font-display);font-weight:700; font-size:clamp(1rem,.9rem + .5vw,1.25rem);line-height:1.3; color:var(--hf-ink);margin:0; } /* Caret: Chevron-Maske, dreht bei [open] um 180° */ .hf-faq__q::after{ content:"";flex:0 0 auto;width:22px;height:22px; background:var(--hf-emerald); -webkit-mask:var(--hf-svg-chevron) center/contain no-repeat; mask:var(--hf-svg-chevron) center/contain no-repeat; transition:transform .26s cubic-bezier(.4,0,.2,1); } .hf-faq__item[open] > .hf-faq__q::after{transform:rotate(180deg)} .hf-faq__q:focus-visible{outline:3px solid var(--hf-vermillion);outline-offset:-3px;border-radius:4px} .hf-faq__a{padding:0 4px 24px;max-width:70ch} /* v1.19: Lesbreite auch in breiten Containern */ /* Einblenden nur mit JS (Höhe animiert hf-frontend.js) — ohne JS sofort sichtbar */ .hf-js .hf-faq__item[open] > .hf-faq__a{animation:hf-faq-in .26s ease both} @keyframes hf-faq-in{from{opacity:0}to{opacity:1}} .hf-faq .hf-faq__a p{margin:0;color:var(--hf-ink-muted);font-size:clamp(1rem,.9rem + .35vw,1.0625rem);line-height:1.6} /* (0,2,1): Kit-p-Margins raus */ .hf-faq .hf-faq__a p + p{margin-top:var(--hf-s-12)} /* v1.60: Fließtext-Links (FAQ, Text-Editor, Beitragsinhalt) — Emerald + Unterstrich, nicht nur Farbe (WCAG 1.4.1). Klassen-Links (Buttons, Chips, Txtlinks) ausgenommen. */ .hf-faq__a a:not([class]), .hf-copy .elementor-widget-text-editor a:not([class]), .hf-post a:not([class]){color:var(--hf-emerald);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1.5px} .hf-faq__a a:not([class]):hover, .hf-copy .elementor-widget-text-editor a:not([class]):hover, .hf-post a:not([class]):hover{color:var(--hf-ink)} .hf-faq .hf-faq__a :is(ul,ol){margin:var(--hf-s-12) 0 0;padding-left:1.2em;color:var(--hf-ink-muted);font-size:clamp(1rem,.9rem + .35vw,1.0625rem)} /* Dunkelgrund-Variante, falls FAQ mal auf Emerald sitzt */ .hf-bg-emerald .hf-faq, .hf-bg-emerald .hf-faq__item{border-color:var(--hf-creme-line)} .hf-bg-emerald .hf-faq .hf-faq__q h3{ /* v1.18: (0,2,1) gegen Kit-h3 */color:var(--hf-white)} .hf-bg-emerald .hf-faq__q::after{background:var(--hf-chartreuse)} .hf-bg-emerald .hf-faq .hf-faq__a p{color:var(--hf-creme-85)} /* Editor-Hinweis (nur für eingeloggte Redaktion sichtbar, siehe hf-core) */ .hf-faq--empty{font-size:.85rem;color:var(--hf-vermillion)} /* ============ 15 · Blog-Archiv: Loop Grid + Pagination (v1.29) ============ Klasse .hf-loop ans Loop-Grid-Widget (Elternwissen + Kategorie-Archiv). Spalten/Gap kommen aus dem Widget (dokumentierte Ausnahme: Loop Grid ist ein Widget mit eigenem Grid). Das Loop-Item selbst trägt .hf-bcard hf-bcard--wide (Block 9). Pagination = Elementor-Markup nav.elementor-pagination > a/span.page-numbers */ .hf-loop .elementor-pagination{ display:flex;flex-wrap:wrap;justify-content:center;align-items:center; gap:var(--hf-s-12);margin-top:var(--hf-s-40); } .hf-loop .page-numbers{ display:inline-flex;align-items:center;justify-content:center; min-width:44px;height:44px;padding:0 14px;border-radius:999px; font-family:var(--hf-font-display);font-weight:700;font-size:1rem; color:var(--hf-emerald);background:var(--hf-white);border:1px solid var(--hf-line); text-decoration:none;transition:background .18s ease,color .18s ease,transform .18s ease; } .hf-loop a.page-numbers:hover{background:var(--hf-emerald);color:var(--hf-creme);transform:translateY(-2px)} .hf-loop .page-numbers.current{background:var(--hf-emerald);color:var(--hf-creme);border-color:var(--hf-emerald)} .hf-loop .page-numbers.dots{border:0;background:transparent;min-width:auto;padding:0 4px;color:var(--hf-ink-muted)} .hf-loop .page-numbers.prev, .hf-loop .page-numbers.next{padding:0 18px} /* Loop-Item: Elementor rendert das Item als Container — Karten-Regeln greifen über die Klasse am Item-Container. Meta-Container in Row. v1.32: Heading-, Shortcode- und Text-Widgets im Meta alle auf eine Zeile mit gleicher Höhe — Elementor-Widgets sind 100 % breit und .elementor-heading-title hat line-height 1. */ .e-con.hf-bcard__meta{display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;gap:var(--hf-s-12);line-height:1.3} .hf-bcard__meta > .elementor-widget{width:auto;max-width:none;margin:0;display:inline-flex;align-items:center} .hf-bcard__meta .elementor-widget-container, .hf-bcard__meta .elementor-shortcode{display:inline-flex;align-items:center} .hf-bcard__meta .elementor-heading-title{font:inherit;color:inherit;margin:0;line-height:inherit} .hf-bcard__meta .hf-bcard__cat a{color:inherit;text-decoration:none} .hf-bcard__meta .hf-bcard__cat a:hover{text-decoration:underline;text-underline-offset:3px} .hf-bcard__meta > * + *::before{content:"·";margin-right:var(--hf-s-12);opacity:.6} /* Auszug: Elementor rendert den Text im

— Clamp + Zeilenhöhe dort */ .hf-bcard .hf-bcard__excerpt .elementor-heading-title{ font-size:1rem;line-height:1.55;color:var(--hf-ink-muted);margin:0; display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden; } .hf-bcard .hf-bcard__excerpt{display:block;-webkit-line-clamp:unset;overflow:visible} /* Elementor Taxonomy-Filter als Chips (nur auf der Elternwissen-Seite; Kategorie-Template nutzt Link-Chips). Buttons = Kit-Button-Reset. */ .hf-chips--filter .e-filter{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--hf-s-12);overflow:visible} .hf-chips--filter .e-filter-item{ all:unset;box-sizing:border-box;cursor:pointer; display:inline-flex;align-items:center;gap:10px; background:var(--hf-creme);color:var(--hf-emerald); font-family:var(--hf-font-display);font-weight:700;font-size:1rem; padding:9px 18px;border-radius:999px;border:1px solid var(--hf-line); transition:transform .18s ease,box-shadow .18s ease,background .18s ease,color .18s ease; } /* Hover: Widget-CSS setzt eigene :hover-Regeln über Custom Properties und lädt nach uns → (0,4,0) + die Variablen selbst belegen */ .hf-chips--filter .e-filter .e-filter-item:hover{ --e-filter-item-color-hover:var(--hf-creme); --e-filter-item-background-hover:var(--hf-emerald); --e-filter-item-border-color-hover:var(--hf-emerald); background:var(--hf-emerald);color:var(--hf-creme);border-color:var(--hf-emerald); transform:translateY(-2px);box-shadow:var(--hf-shadow-soft); } .hf-chips--filter .e-filter .e-filter-item[aria-pressed="true"]{ --e-filter-item-color-active:var(--hf-creme); --e-filter-item-background-active:var(--hf-emerald); --e-filter-item-border-color-active:var(--hf-emerald); background:var(--hf-emerald);color:var(--hf-creme);border-color:var(--hf-emerald);transform:none;box-shadow:none; } .hf-chips--filter .e-filter-item[data-filter="__all"]{order:-1} .hf-chips--filter .e-filter-item:focus-visible{outline:3px solid var(--hf-vermillion);outline-offset:3px} .hf-bg-white .hf-chips--filter .e-filter-item{border-color:transparent} .hf-bcard > .hf-bcard__body{flex:1 1 auto} /* (0,2,0) gegen .e-con.e-child */ .hf-bcard__body > .hf-txtlink{margin-top:auto} .hf-bcard .hf-bcard__media{margin:0} /* Widget-Margin raus */ /* ============ 16 · Beitragsinhalt (v1.31) ============ .hf-post ans Post-Content-Widget (Single-Template) — trägt die Lese- Typografie des Gutenberg-Inhalts. Block-Stile aus hf-core (is-style- hf-*) und der Rank-Math-TOC-Block werden hier gezeichnet. Im Block- Editor lädt hf-core dieses CSS mit, daher greifen die Stil-Regeln auch ohne .hf-post-Wrapper. */ /* v1.35: Elementor rendert den Inhalt in .elementor-widget-container — Breite und Kind-Regeln müssen dort greifen (Wrapper hat max-width:100% mit 0,2,0). Referenz-HTML nutzt .hf-post direkt; beide Fälle abgedeckt. */ /* Lesebreite: Container .hf-read um das Post-Content-Widget (Elementor gibt dem Widget selbst max-width:100% mit 0,2,0). Blöcke liegen bei Optimized Markup direkt im Widget, sonst in .elementor-widget-container. */ .hf-read, .e-con.hf-read, article.hf-post{max-width:var(--hf-read);margin-inline:auto} .hf-read > article.hf-post{max-width:none;margin-inline:0;margin-top:var(--hf-s-24);width:100%} /* v1.67: Rechtliche Seiten (Template page-rechtliches.php) — lange Titel wie „Allgemeine Geschäftsbedingungen (AGB) und Verbraucherinformationen" brechen mit Silbentrennung statt vierzeilig. Nur hier, nicht systemweit. */ .hf-legal-page :is(h1,h2){hyphens:auto;-webkit-hyphens:auto;overflow-wrap:anywhere;text-wrap:balance} @media(max-width:767px){.hf-legal-page .hf-h1-sm{font-size:clamp(1.8rem,7vw,2.2rem) !important}} /* v1.66: liegt der Artikel schon im .hf-read, nicht noch einmal zentrieren (Versatz zum Kopf) */ /* Basis-Abstand: exakt (0,1,1) — schlägt Kit-p (0,1,1, lädt früher), verliert gegen .hf-post h2/h3 (gleiche Spezifität, stehen weiter unten) */ .hf-post > :is(p,ul,ol,figure,blockquote,div,details,hr,table,pre,h2,h3,h4), .hf-post > :where(.elementor-widget-container) > :is(p,ul,ol,figure,blockquote,div,details,hr,table,pre,h2,h3,h4){margin-block:0 var(--hf-s-24)} /* Zwischentitel: viel Luft davor, wenig danach — die Überschrift gehört zum Text, der ihr folgt (v1.36: oben 80/48, unten 16/12) */ .hf-post h2{font-size:var(--hf-h2-sm);line-height:1.15;margin-top:calc(var(--hf-s-64) + var(--hf-s-16));margin-bottom:var(--hf-s-16);text-wrap:balance} .hf-post h3{font-size:1.35rem;font-weight:700;line-height:1.25;margin-top:var(--hf-s-48);margin-bottom:var(--hf-s-12);text-wrap:balance} .hf-post h4{font-size:1.1rem;font-weight:700;line-height:1.3;margin-top:var(--hf-s-32);margin-bottom:8px} /* v1.68: rechtliche Seiten (Datenschutz) */ .hf-post h5{font-size:1rem;font-weight:700;line-height:1.4;margin-top:var(--hf-s-24);margin-bottom:8px} .hf-post h2 + h3,.hf-post h3 + h4,.hf-post h4 + h5{margin-top:0} .hf-post > :is(h2,h3):first-child, .hf-post > .elementor-widget-container > :is(h2,h3):first-child{margin-top:0} .hf-post p,.hf-post li{font-size:clamp(1rem,.9rem + .35vw,1.0625rem);line-height:1.65} .hf-post p{text-wrap:pretty} .hf-post a{color:var(--hf-emerald);text-decoration:underline;text-underline-offset:4px;font-weight:600} .hf-post strong{font-weight:700;color:var(--hf-ink)} .hf-post :is(ul,ol){padding-left:1.4em} .hf-post li{margin-bottom:8px} .hf-post :is(img,figure){max-width:100%;height:auto;border-radius:var(--hf-r-m)} .hf-post figcaption{font-size:.875rem;color:var(--hf-ink-muted);margin-top:8px} .hf-post hr{border:0;border-top:1px solid var(--hf-line);margin-block:var(--hf-s-40)} /* v1.89 · Standard-Zitat (core/quote ohne Stil) — Linie Emerald, Display-Schrift. „Hervorhebung" (is-style-hf-pull, Coral-Karte) bleibt der laute Stil. */ .hf-post blockquote:not(.is-style-hf-pull){margin:var(--hf-s-32) 0;padding:0 0 0 var(--hf-s-24);border-left:2px solid var(--hf-emerald);background:none} .hf-post blockquote:not(.is-style-hf-pull) p{font-family:var(--hf-font-display);font-weight:500;font-size:clamp(1.0625rem,1rem + .2vw,1.125rem);line-height:1.55;letter-spacing:-.005em;color:var(--hf-ink);margin:0} /* v1.90: leiser — 500 statt 600, max. 18 px, 2px-Linie */ .hf-post blockquote:not(.is-style-hf-pull) p + p{margin-top:var(--hf-s-12)} /* v1.91: Linie endet am Text statt am Zeilenkasten — halben Zeilenabstand oben/unten abziehen (Fallback), wo unterstützt exakt Ober- bis Unterlänge (text-box). */ .hf-post blockquote:not(.is-style-hf-pull) > :first-child{margin-top:calc(.5em - .5lh)} .hf-post blockquote:not(.is-style-hf-pull) > :last-child{margin-bottom:calc(.5em - .5lh)} @supports (text-box:trim-both text text){ .hf-post blockquote:not(.is-style-hf-pull) > :first-child, .hf-post blockquote:not(.is-style-hf-pull) > :last-child{margin-block:0} .hf-post blockquote:not(.is-style-hf-pull){text-box:trim-both text text} /* v1.92: Ober- bis Unterlänge statt Versal bis Grundlinie */ } .hf-post blockquote:not(.is-style-hf-pull) cite{display:block;margin-top:var(--hf-s-12);font-family:var(--hf-font-body);font-style:normal;font-size:.875rem;color:var(--hf-ink-muted)} /* v1.74 · Gutenberg-Buttons im Beitrag (core/button) im System-Look. (0,2,0) schlägt .hf-post a (0,1,1) — Unterstreichung/Emerald fallen weg. */ .hf-post .wp-block-button__link{display:inline-flex;align-items:center;gap:10px;background:var(--hf-vermillion);color:var(--hf-white);font-family:var(--hf-font-display);font-weight:700;font-size:1.1875rem;line-height:1;padding:15px 27px;border-radius:999px;text-decoration:none;box-shadow:0 8px 20px rgba(225,114,56,.32);transition:transform .18s ease,filter .18s ease} .hf-post .wp-block-button__link:hover{color:var(--hf-white);filter:brightness(1.05);transform:translateY(-2px)} .hf-post .is-style-outline .wp-block-button__link{background:transparent;color:var(--hf-emerald);border:2px solid var(--hf-emerald);box-shadow:none} .hf-post .is-style-outline .wp-block-button__link:hover{background:var(--hf-emerald);color:var(--hf-creme)} /* v1.74 · Deko-Bild — Block-Stil core/image „Deko" (is-style-hf-deco, hf-core 1.7.0) oder Klasse .hf-deco am Elementor-Image-Widget. Zentriert, max. 180px, ohne Radius/Schatten. Weißer Bildgrund verschwindet: multiply gegen den Figure-Grund (nicht gegen die Seite — so klappt es auch in isolierten Stacking-Contexts wie .hf-sec > *). Grund folgt der Fläche via --hf-deco-bg. */ .is-style-hf-deco,.hf-deco{--hf-deco-bg:var(--hf-creme);background:var(--hf-deco-bg);text-align:center} .hf-bg-white :is(.is-style-hf-deco,.hf-deco){--hf-deco-bg:var(--hf-white)} .hf-post .is-style-hf-deco img,.hf-deco img{display:inline-block;width:auto;max-width:min(100%,180px);height:auto;border-radius:0;box-shadow:none;mix-blend-mode:multiply} .hf-post > .is-style-hf-deco, .hf-post > .elementor-widget-container > .is-style-hf-deco{margin:var(--hf-s-64) auto var(--hf-s-12)} .hf-post > .is-style-hf-deco + :is(h2,h3), .hf-post > .elementor-widget-container > .is-style-hf-deco + :is(h2,h3){margin-top:0} /* (0,2,1) gegen .hf-post h2 — Bild gehört zur Überschrift */ /* Häkchen-Liste (Block-Stil core/list) */ .is-style-hf-check{list-style:none;padding-left:0} .is-style-hf-check > li{position:relative;padding-left:34px} .is-style-hf-check > li::before{ content:"";position:absolute;left:0;top:.2em;width:22px;height:22px;border-radius:50%; background:var(--hf-emerald); } .is-style-hf-check > li::after{ content:"";position:absolute;left:7px;top:calc(.2em + 5px);width:6px;height:10px; border:2.5px solid var(--hf-creme);border-top:0;border-left:0;transform:rotate(45deg); } /* FAQ-Akkordeon (Block-Stil core/details) — Look von Block 14, ohne Exklusiv-JS */ .is-style-hf-faq{border-top:1px solid var(--hf-line);border-bottom:1px solid var(--hf-line);margin-block:0} .is-style-hf-faq + .is-style-hf-faq{border-top:0} .is-style-hf-faq > summary{ display:flex;justify-content:space-between;align-items:center;gap:var(--hf-s-16); padding:18px 4px;cursor:pointer;list-style:none; font-family:var(--hf-font-display);font-weight:700;font-size:clamp(1rem,.9rem + .5vw,1.2rem);line-height:1.3;color:var(--hf-ink); } .is-style-hf-faq > summary::-webkit-details-marker{display:none} .is-style-hf-faq > summary::after{ content:"";flex:0 0 auto;width:22px;height:22px;background:var(--hf-emerald); -webkit-mask:var(--hf-svg-chevron) center/contain no-repeat;mask:var(--hf-svg-chevron) center/contain no-repeat; transition:transform .26s cubic-bezier(.4,0,.2,1); } .is-style-hf-faq[open] > summary::after{transform:rotate(180deg)} .is-style-hf-faq > :not(summary){padding:0 4px 20px;margin:0;color:var(--hf-ink-muted)} .is-style-hf-faq > :not(summary):last-child{padding-bottom:20px} /* Core-Akkordeon (WP 6.9, core/accordion) — Look von Block 14. Der Toggle ist ein