/* Theme Name: Hello Elementor Child – Barbara Kortmann Theme URI: https://barbarakortmann.de Description: Child-Theme für Hello Elementor. Enthält ausschließlich das Design-CSS des Design-Sheets (August 2026). Schriften kommen von OMGF, Button-Maße von Elementors Theme Style. Author: Lars Reisberg Template: hello-elementor Version: 1.3.1 Text Domain: hello-elementor-bk */ /* ===================================================================== 1 · WAS SICH IN 1.3.1 GEÄNDERT HAT --------------------------------------------------------------------- NEU · .bk-akzent-dunkel – kursiver Headline-Teil in #42413F statt Beige, für Headlines auf dem Aquarell (Kontrast 6,5:1 statt 1,8:1). · .bk-klein – kleine Zusatzzeile unter einem Kartentitel. · .bk-btn-petrol – dritte Button-Variante, gefüllt Petrol. · br.bk-br-md – harter Umbruch, der auf Mobil verschwindet. GEÄNDERT · .bk-akzent-sm greift jetzt auch auf , vorher nur auf . Deshalb wirkte die Klasse nicht. · .bk-nav a hat keine font-size mehr. Die Größe gehört ins UAE-Widget (18 px Desktop/Tablet, 17 px Mobil); zwei Werte, die gegeneinander laufen, und der aus dem Stylesheet verliert immer. ENTFERNT (waren im Markup nirgends benutzt, Stand 2026-08-23) · .bk-card .bk-row .bk-quote .bk-link .bk-eyebrow .bk-radius .bk-bg-creme .bk-bg-white .bk-petrol .bk-beige Karten, Listenzeilen und Zitate sind nativ in Elementor gebaut – dort kann Barbara sie später anfassen, im Stylesheet nicht. Wer sie zurückholen will: in 1.3.0 nachschlagen. ===================================================================== */ /* ===================================================================== 2 · FARB- UND MASS-VARIABLEN (Design-Sheet, Stand August 2026) ===================================================================== */ :root { --bk-petrol: #235C5E; /* Überschriften, aktive Navigation */ --bk-beige: #AB9277; /* kursive Headline-Teile, Buttons, Rahmen */ --bk-dunkel: #42413F; /* Akzent auf Bildhintergrund, Pull-Quote */ --bk-text: #4C5157; /* Fließtext */ --bk-boxtext: #5C6462; /* Text in Boxen und Diagnosen */ --bk-creme: #F5F4F1; /* Seitenhintergrund */ --bk-white: #FFFFFF; /* Karten, Boxen */ --bk-line: #DCD8CE; /* feiner Schatten unter Karten */ --bk-radius: 15px; /* einheitlicher Eckradius */ } /* ===================================================================== 3 · GRUNDLAGE ===================================================================== */ body { background-color: var(--bk-creme); } /* Absatzabstand. Elementor hat dafür KEIN globales Feld – nur pro Text-Editor-Widget. Weil es eine Fließtext-Regel ist wie die Zeilenhöhe, steht sie hier einmal zentral. Der letzte Absatz eines Widgets bekommt keinen Abstand, damit darunter kein Loch entsteht. */ .elementor-widget-text-editor p { margin-bottom: 24px; } .elementor-widget-text-editor p:last-child { margin-bottom: 0; } /* ===================================================================== 4 · ÜBERSCHRIFTEN-PRINZIP Grundwort = Archivo SemiBold Petrol (macht Elementor über Theme Style). Der hervorgehobene Teil steht im Editor als (älteres Markup: ) und wird hier zu Newsreader Light Italic in Beige. Gilt für H1, H2 und H3 gleich. ===================================================================== */ h1 em, h2 em, h3 em, .bk-akzent { font-family: 'Newsreader', Georgia, 'Times New Roman', serif; font-weight: 300; font-style: italic; color: var(--bk-beige); letter-spacing: 0; } /* Variante A: Akzent kleiner als das Grundwort (Hero, 82 → 65). Klasse gehört an das Überschrift-Widget, nicht an den Span. */ .bk-akzent-sm em, .bk-akzent-sm .bk-akzent, h1.bk-akzent-sm em, h1.bk-akzent-sm .bk-akzent { font-size: 0.8em; } /* Variante B: Akzent in Dunkel, für Headlines auf dem Aquarell. Beige kommt dort nur auf 1,8:1, #42413F auf 6,5:1. Klasse gehört an das Überschrift-Widget, die Spans darin bleiben .bk-akzent. */ .bk-akzent-dunkel em, .bk-akzent-dunkel .bk-akzent { color: var(--bk-dunkel); } /* ===================================================================== 5 · ECKRADIUS 15 PX Buttons sind Pillen (Radius 100, sitzt in Theme Style) – die 15 px gelten nur für Bilder, Boxen und Karten. ===================================================================== */ .elementor-widget-image img { border-radius: var(--bk-radius); } /* Ausnahmen: Logo und runde Portraits */ .bk-logo img { border-radius: 0; } .bk-round img { border-radius: 50%; } /* ===================================================================== 6 · BUTTONS Klasse am Button-Widget unter Erweitert → CSS-Klassen: bk-btn-fill (Beige gefüllt) · bk-btn-outline (Beige-Rand) · bk-btn-petrol (Petrol gefüllt) Schrift, Größe, Radius und Innenabstand gehören Theme Style → Buttons. Hier steht nur, was Theme Style nicht kann. ===================================================================== */ .elementor-button { transition: transform .25s ease, background-color .25s ease, color .25s ease, border-color .25s ease; } /* gefüllt Beige, Hover wächst um 5 % */ .bk-btn-fill .elementor-button { background-color: var(--bk-beige); border: 1px solid var(--bk-beige); color: #FFFFFF; } .bk-btn-fill .elementor-button:hover, .bk-btn-fill .elementor-button:focus { background-color: var(--bk-beige); color: #FFFFFF; transform: scale(1.05); } /* Outline: transparent mit Beige-Rand, Hover füllt sich */ .bk-btn-outline .elementor-button { background-color: transparent; border: 1px solid var(--bk-beige); color: var(--bk-beige); } .bk-btn-outline .elementor-button:hover, .bk-btn-outline .elementor-button:focus { background-color: var(--bk-beige); border-color: var(--bk-beige); color: #FFFFFF; } /* gefüllt Petrol (Sektion „Psychotherapie für Künstler*innen") */ .bk-btn-petrol .elementor-button { background-color: var(--bk-petrol); border: 1px solid var(--bk-petrol); color: #FFFFFF; } .bk-btn-petrol .elementor-button:hover, .bk-btn-petrol .elementor-button:focus { background-color: var(--bk-petrol); color: #FFFFFF; transform: scale(1.05); } /* Abstand zum Pfeil-Icon rechts */ .elementor-button .elementor-button-icon { margin-left: 10px; } /* ===================================================================== 7 · STICKY HEADER Klasse bk-header auf den äußersten Container des Header-Templates. ===================================================================== */ .bk-header, .ehf-header #masthead { position: sticky; top: 0; z-index: 99; background-color: rgba(245, 244, 241, .82); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); } /* ===================================================================== 8 · NAVIGATION Aktive Seite: Petrol, unterstrichen. Die Schriftgröße steht bewusst NICHT hier, sondern im UAE-Widget. ===================================================================== */ .bk-nav a { font-family: 'Archivo', sans-serif; color: var(--bk-text); text-decoration: none; } .bk-nav a:hover { color: var(--bk-petrol); } .bk-nav .current-menu-item > a, .bk-nav .current_page_item > a, .bk-nav a.bk-nav-active { color: var(--bk-petrol); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 6px; } /* ===================================================================== 9 · KLEINE ZUSATZZEILE Klasse bk-klein am Überschrift- oder Text-Widget, z. B. die Zeile unter einem Kartentitel. ===================================================================== */ .bk-klein, .bk-klein .elementor-heading-title { font-family: 'Archivo', sans-serif; font-weight: 400; font-size: 15px; line-height: 1.35em; color: var(--bk-boxtext); } /* ===================================================================== 10 · UMBRUCH NUR AB TABLET
hält im Zitatband die gewünschte Zeilenteilung auf großen Breiten und verschwindet auf Mobil. Im Markup steht ein Leerzeichen vor dem
, damit die Wörter ohne Umbruch nicht zusammenkleben. ===================================================================== */ @media (max-width: 767px) { br.bk-br-md { display: none; } }