/* ============================================================================= Neues Leben – Bausteine ----------------------------------------------------------------------------- Das sichtbare Design als Stylesheet, nicht als Klickeinstellungen. WARUM DAS SO IST Eine Karte hat rund fünfzehn Werte: Rahmen, Innenabstand, Titelgröße, Textfarbe, Lückenmaß, Verhalten beim Überfahren. Diese fünfzehn Werte in Elementor an jedem einzelnen Widget einzustellen heißt: fünfzehn Klicks je Karte, und beim nächsten Mal sind es vierzehn. Hier stehen sie einmal. In Elementor trägst du beim Container unter Advanced → CSS Classes den Namen ein – zum Beispiel nl-karte – und das Aussehen kommt von allein. In den Vorlagen des Child-Themes stehen dieselben Klassen im PHP. Eine Quelle für beide Seiten. WAS HIER NICHT STEHT Die Grundschrift. Größe, Zeilenhöhe und Farbe von Fließtext und Überschriften kommen aus Elementors Theme Style. Würde dieses Stylesheet auch h1 und p setzen, hätten wir zwei Stellen, die sich widersprechen können. Deshalb: hier nur Klassen, keine nackten HTML-Elemente. FARBEN JE DOMAIN --nl-marke und --nl-auf-marke setzt nl-core je nach aufgerufener Domain. Steht hier nichts, gilt das Rot der Hauptdomain. ========================================================================== */ :root { /* Große Flächen und große Schrift. */ --nl-marke: #ff194e; --nl-marke-dunkel: #cc002f; --nl-auf-marke: #ffffff; /* Alles Kleine: Rubriken, Links, Knöpfe, Datumsblöcke. Steht hier dieselbe Farbe wie oben, ist das Absicht – #ff194e ist die Marke, auch im Kleintext. Für die barrierefreie Variante später wird dieser eine Wert auf #cc002f gesetzt (das bisherige Hover-Rot, 5,82 : 1 statt 3,82 : 1); an den Bausteinen ändert sich nichts. Gesetzt wird der Wert im Betrieb von inc/design.php je Domain. */ --nl-akzent: #ff194e; --nl-auf-akzent: #ffffff; --nl-tinte: #161616; --nl-grau: #5d5d5d; --nl-hell: #f1f1f1; --nl-mittel: #e0e0e0; /* bg-medium der alten Website */ --nl-linie: #e0e0e0; --nl-weiss: #ffffff; /* Breiten und Abstände stammen aus den Fluid-Vorlagen und dem compilierten Stylesheet der alten Website – keine geschätzten Werte. Der Container wächst in Stufen (Bootstrap-Raster), und ab 1720 px springt er auf 1656 px. Wer nur 1140 einträgt, macht die Seite auf großen Bildschirmen schmaler als sie war. */ --nl-breit: 1140px; /* Inhaltsbreite, siehe Leiter unten */ --nl-lese: 740px; /* container-60: col-lg-8, 710 px Text */ --nl-breit80: 925px; /* container-80: col-lg-10, 895 px Text */ --nl-rand: 15px; /* Innenrand des Containers */ --nl-luft: 48px; /* über/unter Abschnitt, siehe Leiter */ --nl-lücke: 30px; /* zwischen Spalten */ } /* Die Luftleiter der alten Website: 3 / 4 / 5 / 7 rem. Kein clamp – die Stufen sind so gewollt und sollen so bleiben. */ @media (min-width: 576px) { :root { --nl-luft: 64px; } } @media (min-width: 768px) { :root { --nl-luft: 80px; } } @media (min-width: 1200px) { :root { --nl-luft: 112px; } } /* Die Breitenleiter. Unter 576 px läuft der Container voll. */ @media (min-width: 576px) { :root { --nl-breit: 540px; } } @media (min-width: 768px) { :root { --nl-breit: 720px; } } @media (min-width: 992px) { :root { --nl-breit: 960px; } } @media (min-width: 1200px) { :root { --nl-breit: 1140px; } } @media (min-width: 1720px) { :root { --nl-breit: 1656px; } } /* ----------------------------------------------------------------------------- Seitenkopf Das Muster, mit dem jede Detailseite anfängt: farbige Fläche, Bild darin, Titel zentriert darauf. Das Bild ist optional – ohne Bild bleibt die Farbe. -------------------------------------------------------------------------- */ .nl-kopf { display: grid; background: var(--nl-marke); color: var(--nl-auf-marke); } .nl-kopf__bild { grid-area: 1 / 1; width: 100%; height: 100%; min-height: 300px; object-fit: cover; opacity: .45; /* damit der Titel darauf lesbar bleibt */ } .nl-kopf__text { grid-area: 1 / 1; display: grid; place-items: center; text-align: center; padding: var(--nl-luft) var(--nl-rand); } .nl-kopf__titel { font-size: clamp(35px, 1.5rem + 3vw, 60px); font-weight: 700; line-height: 1.2; color: inherit; margin: 0; } /* Beim Gebetskalender steht hier der Festtag – bewusst in anderer Schrift. */ .nl-kopf__unter { font-size: 22px; font-weight: 500; margin: 10px 0 0; opacity: .92; color: inherit; } .nl-kopf__unter--festtag { font-family: Georgia, "Times New Roman", serif; font-style: italic; } /* ----------------------------------------------------------------------------- Kleintext über einer Überschrift, Rubriken, Etiketten Die kleinen Zeilen, die einordnen: „MEDIEN" über einem Titel, das Datum über einer Andacht, die graue Zeile unter einer Karte. -------------------------------------------------------------------------- */ .nl-marke-zeile { font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--nl-akzent); margin: 0 0 8px; } /* ----------------------------------------------------------------------------- Zeilen mit Datum – Termine, Freizeiten Eine Liste von Terminen: farbiger Datumsblock links, Titel und Ort daneben. -------------------------------------------------------------------------- */ .nl-datum { background: var(--nl-akzent); color: var(--nl-auf-akzent); text-align: center; padding: 8px 6px; line-height: 1.1; } .nl-datum__tag { display: block; font-size: 26px; font-weight: 700; } .nl-datum__monat { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; } /* ----------------------------------------------------------------------------- Tabellen – Termine, Preise, Steckbrief Schlichte Tabellen ohne Rahmen, nur mit feinen Linien zwischen den Zeilen. -------------------------------------------------------------------------- */ .nl-tabelle { width: 100%; border-collapse: collapse; font-size: 17px; } .nl-tabelle th, .nl-tabelle td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--nl-linie); vertical-align: top; } .nl-tabelle th { font-size: 15px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--nl-grau); } .nl-tabelle td:last-child { font-variant-numeric: tabular-nums; } /* Auf schmalen Geräten seitlich rollen statt die Seite zu sprengen. */ /* ----------------------------------------------------------------------------- Schmuckzitat Kommt so aus dem Magazin-Import:
. In der Markenfarbe. Bei 28 bis 50 px ist das großer Text im Sinne der Barrierefreiheit – da genügt ein Kontrast von 3:1, und #ff194e auf Weiß liegt bei 3,82:1. Für Fließtext wäre dieses Rot zu schwach; hier nicht. Auf tsr.de und acf.de wird daraus von selbst das dunkle Grün. -------------------------------------------------------------------------- */ .nl-zitat { font-size: clamp(28px, 1.5rem + 2vw, 50px); font-weight: 300; color: var(--nl-akzent); line-height: 1.25; text-align: center; margin: 36px 0; padding: 0 var(--nl-rand); border: 0; quotes: none; } .nl-zitat p { margin: 0; } .nl-zitat cite, .nl-zitat figcaption, .nl-zitat footer { display: block; margin-top: 20px; font-size: 16px; font-style: normal; letter-spacing: .09em; text-transform: uppercase; color: var(--nl-grau); } /* ----------------------------------------------------------------------------- Autorenbox und Infokasten Wer hat das geschrieben, und was gehört als Zusatzinformation neben den Text. -------------------------------------------------------------------------- */ .nl-info { border: 1px solid rgba(0, 0, 0, .125); padding: 24px; display: flex; flex-direction: column; gap: 14px; } .nl-info dt { font-size: 16px; font-weight: 700; margin: 0; } .nl-info dd { font-size: 16px; color: var(--nl-grau); margin: 0 0 6px; } /* Zweispaltig: Inhalt links, Infokasten rechts. */ /* ----------------------------------------------------------------------------- Zum Hören – ergänzt inc/audio.php Der Abspieler unter Artikeln, die es auch als Aufnahme gibt. -------------------------------------------------------------------------- */ .nl-audio { margin: 24px 0; } .nl-audio__titel { font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--nl-marke); margin: 0 0 8px; } .nl-audio__player { width: 100%; } .nl-audio__hinweis { font-size: 14px; color: var(--nl-grau); margin: 8px 0 0; } /* ----------------------------------------------------------------------------- Schmale Geräte Was sich unter 820 und unter 560 Pixeln ändert – Spalten werden zu Zeilen. -------------------------------------------------------------------------- */ @media (max-width: 820px) { /* Die Luft regelt jetzt die Leiter ganz oben – hier nur noch das Raster. */ .nl-kopf__bild { min-height: 220px; } } /* ----------------------------------------------------------------------------- Druck – Andachten und Artikel werden ausgedruckt, das ist kein Randfall Beim Ausdrucken fallen Navigation und Farbflächen weg; Links bekommen ihre Adresse dazu, damit das Papier für sich steht. -------------------------------------------------------------------------- */ @media print { .nl-kopf { background: none; color: #000; } .nl-kopf__bild, .nl-audio { display: none; } .nl-zitat { font-size: 20pt; } } /* ----------------------------------------------------------------------------- Autorenzeile Eine Zeile, kein Kasten: quadratisches Bild, daneben der Name. Steht unter Andachten, Artikeln und News. Ohne Bild rutscht der Name nach links, ohne Profil fällt nur der Link weg – der Name bleibt. -------------------------------------------------------------------------- */ .nl-autorenzeile { display: flex; align-items: center; gap: 14px; margin: 24px 0 0; font-size: 18px; line-height: 1.3; } .nl-autorenzeile + .nl-autorenzeile { margin-top: 12px; } /* Mit Beschriftung darüber steht das Bild nicht mehr neben, sondern unter ihr. */ .nl-autorenzeile:has(.nl-autorenzeile__label) { display: block; } .nl-autorenzeile__label { display: block; margin-bottom: 8px; font-size: 13px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--nl-grau); } .nl-autorenzeile__bild { flex: none; width: 48px; height: 48px; object-fit: cover; display: block; } /* Der Name bleibt schwarz, auch wenn er verlinkt ist. Die doppelte Klasse hebt die Spezifität über die Linkfarbe aus dem Elementor-Kit – ganz ohne !important, damit man am Widget weiterhin etwas einstellen kann. */ .nl-autorenzeile .nl-autorenzeile__name { font-weight: 500; color: var(--nl-tinte); } .nl-autorenzeile .nl-autorenzeile__link { display: inline-flex; align-items: center; gap: 14px; color: var(--nl-tinte); text-decoration: none; } /* Der Pfeil ist das Versprechen: hier geht es zur Person. Er hängt am Link – gibt es keine Profilseite, gibt es keinen Link und damit auch keinen Pfeil. Gezeichnet wird derselbe Pfeil wie im Knopf, aus --nl-pfeil. */ .nl-autorenzeile .nl-autorenzeile__link::after { content: ""; flex: none; width: 17px; height: 17px; margin-left: -4px; background: var(--nl-marke); -webkit-mask: var(--nl-pfeil) center / contain no-repeat; mask: var(--nl-pfeil) center / contain no-repeat; transition: transform 0.18s ease; } .nl-autorenzeile--ohne-pfeil .nl-autorenzeile__link::after { content: none; } .nl-autorenzeile .nl-autorenzeile__link:hover::after { transform: translateX(3px); } .nl-autorenzeile .nl-autorenzeile__link:hover .nl-autorenzeile__name { color: var(--nl-akzent); } .nl-autorenzeile .nl-autorenzeile__link:focus-visible { outline: 2px solid var(--nl-akzent); outline-offset: 3px; } @media (prefers-reduced-motion: reduce) { .nl-autorenzeile .nl-autorenzeile__link::after { transition: none; } .nl-autorenzeile .nl-autorenzeile__link:hover::after { transform: none; } } /* ----------------------------------------------------------------------------- Andacht Die Seite hat einen festen Ablauf: Datum, Titel, Leitvers, Text, Merksatz, Gebet, Bibelstellen, Autorenbox. Die Bausteine dafür stehen schon oben – hier nur, was die Andacht eigens braucht. -------------------------------------------------------------------------- */ .nl-andacht__datum { margin-bottom: 12px; } /* Der Leitvers steht groß und in der Markenfarbe – er ist der Grund, warum jemand die Seite öffnet. */ .nl-andacht__leitvers { color: var(--nl-akzent); margin-block: 8px 40px; } .nl-andacht__leitvers blockquote { margin: 0; } .nl-andacht__leitvers figcaption { color: var(--nl-grau); } /* Merksatz und Gebet: zwei Kästen, die sich unterscheiden müssen. Der Merksatz bekommt eine Kante in der Markenfarbe, das Gebet einen hellen Grund. So sieht man beim Überfliegen, was was ist. */ .nl-andacht__merksatz { border: 0; border-left: 3px solid var(--nl-akzent); padding: 4px 0 4px 24px; margin-block: 32px; } .nl-andacht__merksatz p:not(.nl-marke-zeile) { font-size: 23px; line-height: 1.4; margin: 0; } .nl-andacht__gebet { border: 0; background: var(--nl-hell); margin-block: 32px; } .nl-andacht__gebet p:not(.nl-marke-zeile) { margin: 0; } .nl-andacht__stellen, .nl-andacht__lesungen { margin-block: 32px; } .nl-stellenliste { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 24px; } .nl-stellenliste a { color: var(--nl-akzent); text-decoration: none; border-bottom: 1px solid currentColor; } .nl-stellenliste a:hover { color: var(--nl-tinte); } /* Bibellese: zwei Zeilen, keine Kopfzeile – die Beschriftung steht links. */ .nl-andacht__lesungen .nl-tabelle th { width: 8em; font-weight: 700; white-space: nowrap; } /* ----------------------------------------------------------------------------- Kopfzeile: schrumpfen beim Scrollen Elementor kann einen Container beim Scrollen oben festhalten und hängt ihm dann die Klasse .elementor-sticky--effects an. Was dabei passieren soll, kann es nicht: Balken kleiner UND Logo kleiner, gleichzeitig, weich. Deshalb diese fünf Regeln. Damit sie greifen, tragen drei Elemente in Elementor unter Erweitert → CSS-Klassen einen Namen: nl-kopfleiste der äußere Container mit dem Sticky-Effekt nl-balken der rote Balken darin nl-logo das Widget mit dem Logo Die Werte stammen aus der alten Website: 180 → 100 px Balken, 240 → 180 px Logo, Übergang 0,2 Sekunden. -------------------------------------------------------------------------- */ .nl-kopfleiste .nl-balken { transition: min-height .2s ease; } .nl-kopfleiste .nl-logo img, .nl-kopfleiste .nl-logo svg { transition: max-width .2s ease; max-width: 240px; } /* Der Klassenname steht zweimal da – das ist kein Tippfehler. Er hebt die Spezifität so weit an, dass die Regel Elementors eigene Höhenangabe überstimmt, ohne !important. Und sie greift bei jedem Containertyp: klassischer Container, Div Block oder Flexbox. */ .nl-kopfleiste.elementor-sticky--effects .nl-balken.nl-balken { min-height: 100px; } .nl-kopfleiste.elementor-sticky--effects .nl-logo img, .nl-kopfleiste.elementor-sticky--effects .nl-logo svg { max-width: 180px; } @media (max-width: 1199.98px) { .nl-kopfleiste.elementor-sticky--effects .nl-balken.nl-balken { min-height: 80px; } .nl-kopfleiste.elementor-sticky--effects .nl-logo img, .nl-kopfleiste.elementor-sticky--effects .nl-logo svg { max-width: 150px; } } @media (prefers-reduced-motion: reduce) { .nl-kopfleiste .nl-balken, .nl-kopfleiste .nl-logo img, .nl-kopfleiste .nl-logo svg { transition: none; } } /* ----------------------------------------------------------------------------- Suche, die zur Seite aufgeht Elementors Suchformular kennt drei Erscheinungsbilder: Klassisch, Minimal und Vollbild. Ein Feld, das beim Klick auf die Lupe zur Seite aufgeht, ist nicht dabei. Es geht aber mit dem nativen Widget und ohne eine Zeile JavaScript. Das Feld ist von Anfang an da, nur 44 Pixel schmal und durchsichtig – die Lupe liegt darüber. Ein Klick landet also im Feld, das Feld bekommt den Fokus, und :focus-within macht daraus 280 Pixel. Beim Verlassen geht es von selbst wieder zu. In Elementor: Widget "Suchformular", Skin "Minimal", unter Erweitert → CSS-Klassen die Klasse nl-suche eintragen. Sonst nichts. Damit es nach LINKS aufgeht und nicht nach rechts, muss der Container, in dem die Suche sitzt, rechtsbündig ausrichten (Rechtfertigen: Ende). -------------------------------------------------------------------------- */ .nl-suche .elementor-search-form__container { position: relative; width: 44px; overflow: hidden; border-bottom: 1px solid transparent; transition: width .25s ease, border-color .25s ease; } .nl-suche .elementor-search-form__container:focus-within { width: min(280px, 60vw); border-bottom-color: currentColor; } /* Das Eingabefeld füllt den ganzen Bereich – auch die 44 Pixel unter der Lupe. Nur so landet ein Klick auf die Lupe im Feld. Unsichtbar ist es, anklickbar bleibt es. */ .nl-suche .elementor-search-form__input { width: 100%; padding-right: 44px; opacity: 0; transition: opacity .2s ease .05s; } .nl-suche .elementor-search-form__container:focus-within .elementor-search-form__input { opacity: 1; } /* Die Lupe liegt darüber und nimmt keine Klicks an – sonst würde sie das Feld darunter abschirmen. Beim Aufgehen bleibt sie rechts stehen. */ .nl-suche .elementor-search-form__icon { position: absolute; right: 0; top: 50%; transform: translateY(-50%); pointer-events: none; } /* Chromes eigenes Löschkreuz passt farblich nicht auf die Marke. */ .nl-suche .elementor-search-form__input::-webkit-search-cancel-button { -webkit-appearance: none; } @media (prefers-reduced-motion: reduce) { .nl-suche .elementor-search-form__container, .nl-suche .elementor-search-form__input { transition: none; } } /* ============================================================================= Brücke zu Elementor Elementors Container bringen eigene Layout-Regeln mit – .e-con setzt display, Breite und Innenabstand –, und ihre Selektoren sind spezifischer als eine einzelne Klasse. Ohne diesen Block bliebe .nl-raster im Editor wirkungslos, weil Elementors flex gewinnt. Deshalb stehen die layoutbestimmenden Bausteine hier ein zweites Mal, mit Elementors eigener Klasse davor. Das hebt die Spezifität auf 0,2,0 – gerade genug, um Elementors Grundgerüst zu schlagen, und wenig genug, dass eine Einstellung an einem einzelnen Element weiterhin gewinnt. Kein !important. Wer in Elementor am Container etwas einstellt, behält recht. ========================================================================== */ .e-con.nl-abschnitt, .elementor-element.nl-abschnitt { padding-block: var(--nl-luft); } .e-con.nl-innen, .elementor-element.nl-innen { --width: 100%; max-width: var(--nl-breit); margin-inline: auto; } .e-con.nl-innen--lese, .elementor-element.nl-innen--lese { max-width: var(--nl-lese); } .e-con.nl-raster, .elementor-element.nl-raster { display: grid; grid-template-columns: repeat(var(--nl-spalten, 3), minmax(0, 1fr)); gap: var(--nl-lücke); align-items: stretch; } .e-con.nl-karte, .elementor-element.nl-karte { display: flex; flex-direction: column; gap: 0; padding: 0; background: var(--nl-weiss); border: 1px solid rgba(0, 0, 0, .125); } .e-con.nl-karte__koerper, .elementor-element.nl-karte__koerper { display: flex; flex-direction: column; gap: 8px; padding: 20px; flex: 1; } .e-con.nl-kopf, .elementor-element.nl-kopf { display: grid; padding: 0; } .e-con.nl-zeile, .elementor-element.nl-zeile { display: grid; grid-template-columns: 92px 1fr auto; gap: 20px; align-items: center; } .e-con.nl-mit-kasten, .elementor-element.nl-mit-kasten { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 40px; align-items: start; } @media (max-width: 820px) { .e-con.nl-mit-kasten, .elementor-element.nl-mit-kasten { grid-template-columns: minmax(0, 1fr); } .e-con.nl-zeile, .elementor-element.nl-zeile { grid-template-columns: 72px 1fr; } } /* Widget-Hüllen. Elementor wickelt jedes Widget in einen eigenen div. Eine Klasse, die man im Editor vergibt, landet auf dieser Hülle – nicht auf dem img darin. Deshalb hier beides. */ .elementor-element.nl-kopf__bild { grid-area: 1 / 1; width: 100%; } .elementor-element.nl-kopf__bild img { width: 100%; height: 100%; min-height: 300px; object-fit: cover; opacity: .45; display: block; } .e-con.nl-kopf__text, .elementor-element.nl-kopf__text { grid-area: 1 / 1; display: grid; place-items: center; text-align: center; padding: var(--nl-luft) var(--nl-rand); } .elementor-element.nl-karte__bild img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; } .elementor-element.nl-karte__bild--hoch img { aspect-ratio: 3 / 4; } .elementor-element.nl-karte__bild--quadrat img { aspect-ratio: 1; } /* ----------------------------------------------------------------------------- Kopfzeile Gemessen: Balken 180 px hoch in der Markenfarbe, Logo 225 × 66, Servicelinks 20 px fett, darunter ein Band in #f1f1f1, 93 px hoch, mit fünf gleich breiten Hauptpunkten in 20 px fett. Hinweis zur Lesbarkeit: Die Hauptpunkte stehen in der Markenfarbe auf Hellgrau. Bei 20 px fett gilt die Schwelle 3 : 1, und die wird knapp erreicht. Wer auf Nummer sicher gehen will, nimmt hier --nl-akzent. -------------------------------------------------------------------------- */ .nl-kopfzeile__logo { display: block; flex: none; color: inherit; text-decoration: none; } .nl-kopfzeile__logo img { display: block; width: 225px; height: auto; } /* Solange kein Logo hinterlegt ist, steht hier der Name der Domain. Lieber ein lesbarer Schriftzug als ein leeres Kästchen. */ .nl-logo-text { font-size: 28px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: inherit; } @media (max-width: 900px) { .nl-kopfzeile__logo img { width: 158px; } } /* ----------------------------------------------------------------------------- Der Pfeil Ein Pfeil, an einer einzigen Stelle definiert. Er steckt im Knopf, im Pfeil-Link, in der Bühne und hinter dem Autorennamen. Wer ihn hier ändert, ändert ihn überall – deshalb eine Variable und keine viermal kopierte Grafik. Gezeichnet wird er als Maske: Die Grafik gibt nur die Form vor, die Farbe kommt aus currentColor. So passt er sich an – weiß auf rotem Knopf, rot auf weißem Grund, ohne dass man eine zweite Datei braucht. -------------------------------------------------------------------------- */ :root { --nl-marker: #ececec; --nl-pfeil: url('data:image/svg+xml;utf8,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23000" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"%3E%3Cpath d="M4 12h15M13 6l6 6-6 6"/%3E%3C/svg%3E'); } /* Der Pfeil zum Danebenstellen, wo kein Baustein ihn schon mitbringt. */ .nl-pfeil { display: inline-block; flex: none; width: 1em; height: 1em; background: currentColor; -webkit-mask: var(--nl-pfeil) center / contain no-repeat; mask: var(--nl-pfeil) center / contain no-repeat; } /* ----------------------------------------------------------------------------- Links – zwei Bausteine, der dritte kommt aus Elementor 1. Der Fließtext-Link – BRAUCHT KEINE KLASSE. Grauer Balken, der beim Überfahren von links hereinläuft und beim Verlassen nach links wieder hinaus. Gilt automatisch für jeden Link in einem Elementor-Textfeld und im Beitragsinhalt. Nur wer einen Link außerhalb davon so haben will – etwa in einer Überschrift – schreibt nl-link dran. Maße von der alten Website: Balken 0,58 em hoch, oben knapp unter der x-Höhe, unten auf der Unterlänge. Der Ton steht in --nl-marker. Dort ist er #e6e6e6, hier #ececec, weil die alte Seite an dieser Stelle auf grauem Grund liegt und der Unterschied zum Hintergrund gleich groß bleiben soll. 2. nl-pfeillink – Ein Wort mit Pfeillinie darunter, für Verweise am Ende eines Abschnitts. Die einzige Klasse, die man hier von Hand einträgt. 3. Der Knopf – steht nicht mehr hier. Das ist Elementors Button-Widget, eingestellt unter Website-Einstellungen → Theme Style → Buttons. Den Pfeil darin wählt man im Widget selbst als Symbol. Unterstrichen wird nichts. Nie. Taucht doch ein Unterstrich auf, kommt er aus dem Theme oder dem Elementor-Kit: Website-Einstellungen → Typografie → Links → Textdekoration: Keine. -------------------------------------------------------------------------- */ /* --- 1. Der Fließtext-Link ------------------------------------------------ */ /* Keine Klasse nötig. Die Regel greift dort, wo Fließtext steht: in Elementors Textfeld und im Beitragsinhalt. Buttons und Pfeil-Links sind ausgenommen, die haben ihr eigenes Aussehen. */ .nl-link, .nl-text a:not(.elementor-button):not(.nl-pfeillink):not(.elementor-icon), .elementor-widget-text-editor a:not(.elementor-button):not(.nl-pfeillink):not(.elementor-icon), .elementor-widget-theme-post-content a:not(.elementor-button):not(.nl-pfeillink):not(.elementor-icon), .elementor-widget-post-content a:not(.elementor-button):not(.nl-pfeillink):not(.elementor-icon) { color: var(--nl-akzent); text-decoration: none; padding: 0 3px; margin: 0 -3px; background-image: linear-gradient(var(--nl-marker), var(--nl-marker)); background-repeat: no-repeat; background-position: left 0 bottom 0.04em; background-size: 0% 0.58em; transition: background-size 0.3s cubic-bezier(0.4, 0, 0.2, 1); -webkit-box-decoration-break: clone; box-decoration-break: clone; } .nl-link:hover, .nl-link:focus-visible, .nl-text a:not(.elementor-button):not(.nl-pfeillink):not(.elementor-icon):hover, .nl-text a:not(.elementor-button):not(.nl-pfeillink):not(.elementor-icon):focus-visible, .elementor-widget-text-editor a:not(.elementor-button):not(.nl-pfeillink):not(.elementor-icon):hover, .elementor-widget-text-editor a:not(.elementor-button):not(.nl-pfeillink):not(.elementor-icon):focus-visible, .elementor-widget-theme-post-content a:not(.elementor-button):not(.nl-pfeillink):not(.elementor-icon):hover, .elementor-widget-theme-post-content a:not(.elementor-button):not(.nl-pfeillink):not(.elementor-icon):focus-visible, .elementor-widget-post-content a:not(.elementor-button):not(.nl-pfeillink):not(.elementor-icon):hover, .elementor-widget-post-content a:not(.elementor-button):not(.nl-pfeillink):not(.elementor-icon):focus-visible { background-size: 100% 0.58em; text-decoration: none; } /* --- 2. Der Pfeil-Link ---------------------------------------------------- */ .nl-pfeillink { --nl-strich: calc(100% + 8px); position: relative; display: inline-block; padding-bottom: 0.8em; color: var(--nl-akzent); font-weight: 700; text-decoration: none; transition: color 0.2s ease; } /* Die Linie. */ .nl-pfeillink::before { content: ""; position: absolute; left: 0; bottom: 0.65em; height: 1px; width: var(--nl-strich); background: currentColor; transition: width 0.25s cubic-bezier(0.4, 0, 0.2, 1); } /* Die Spitze – zwei Kanten eines Quadrats, um 45 Grad gedreht. */ .nl-pfeillink::after { content: ""; position: absolute; bottom: 0.65em; left: var(--nl-strich); width: 0.65em; height: 0.65em; border-top: 1px solid currentColor; border-right: 1px solid currentColor; transform: translate(-0.65em, 0.3em) rotate(45deg); transition: left 0.25s cubic-bezier(0.4, 0, 0.2, 1); } .nl-pfeillink:hover, .nl-pfeillink:focus-visible { --nl-strich: calc(100% + 22px); } /* --- 3. Der Knopf mit Pfeil ----------------------------------------------- */ /* Die drei Ausführungen stehen weiter oben bei „Knöpfe". Hier kommt nur der Pfeil dazu – als eigene Klasse, damit ein Knopf auch ohne ihn geht. */ @media (prefers-reduced-motion: reduce) { .nl-link, .nl-text a, .nl-pfeillink::before, .nl-pfeillink::after { transition: none; } .nl-pfeillink:hover { --nl-strich: calc(100% + 8px); } } /* ----------------------------------------------------------------------------- Sprechblase Ein Kasten mit einem Zipfel, der unten oder oben heraussteht – das Muster der Gebets- und Zitatkacheln. Der Zipfel nimmt den Hintergrund des Kastens mit (background: inherit). Wer in Elementor die Hintergrundfarbe des Containers ändert, ändert den Zipfel mit; man muss nichts doppelt einstellen. Bei einem Verlauf als Hintergrund geht das nicht auf – dann eine einfarbige Fläche nehmen. Maße nach der Vorlage: Der Zipfel ist doppelt so breit wie hoch, seine Spitze sitzt bei einem Drittel der Kastenbreite. In Elementor: Am Container unter Erweitert → CSS-Klassen nl-sprechblase eintragen. Zwei Fallen: Der übergeordnete Container darf nicht auf „Überlauf: ausgeblendet" stehen, sonst wird der Zipfel abgeschnitten. Und wer am Container einen unteren Außenabstand einstellt, überschreibt den Platz, den der Zipfel hier für sich reserviert – dann selbst genug lassen. -------------------------------------------------------------------------- */ .nl-sprechblase { --nl-zipfel: 48px; /* Höhe des Zipfels; die Breite ist doppelt so groß */ --nl-zipfel-x: 34%; /* Wo die Spitze sitzt, von links */ position: relative; background: var(--nl-marke); color: var(--nl-auf-marke); margin-bottom: var(--nl-zipfel); } .nl-sprechblase::after { content: ""; position: absolute; top: 100%; left: var(--nl-zipfel-x); width: calc(var(--nl-zipfel) * 2); height: var(--nl-zipfel); transform: translateX(-50%); background: inherit; clip-path: polygon(0 0, 100% 0, 50% 100%); } /* Wo die Spitze sitzt. */ .nl-sprechblase--links { --nl-zipfel-x: 12%; } .nl-sprechblase--mitte { --nl-zipfel-x: 50%; } .nl-sprechblase--rechts { --nl-zipfel-x: 88%; } /* Wie groß sie ist. */ .nl-sprechblase--klein { --nl-zipfel: 28px; } .nl-sprechblase--gross { --nl-zipfel: 68px; } /* Nach oben statt nach unten – für Blasen, die auf etwas darüber zeigen. */ .nl-sprechblase--oben { margin-bottom: 0; margin-top: var(--nl-zipfel); } .nl-sprechblase--oben::after { top: auto; bottom: 100%; clip-path: polygon(50% 0, 0 100%, 100% 100%); } /* Zwei fertige Farben, falls in Elementor nichts eingestellt ist. */ .nl-sprechblase--hell { background: var(--nl-hell); color: var(--nl-tinte); } .nl-sprechblase--weiss { background: var(--nl-weiss); color: var(--nl-tinte); } /* Auf dem Handy wird der Zipfel kleiner, sonst frisst er die halbe Kachel. */ @media (max-width: 575.98px) { .nl-sprechblase { --nl-zipfel: 30px; } .nl-sprechblase--gross { --nl-zipfel: 40px; } } /* ----------------------------------------------------------------------------- Brotkrumenpfad Das Markup baut Rank Math, dafür gibt es in Elementor keine Regler. Deshalb steht das Aussehen hier – und zwar ohne Klasse zum Eintragen: Die Regel greift überall dort, wo der Pfad ausgegeben wird. Die Werte sind an der alten Website gemessen: 16 px, Links in Schwarz, nur die aktuelle Seite in der Markenfarbe. Genau umgekehrt zur Voreinstellung von Elementor, wo alle Links rot sind. Der Abstand nach oben und unten steht hier ausdrücklich NICHT. Abstände sind Layout, und Layout gehört Elementor: Widget → Erweitert → Innenabstand. Sonst addieren sich zwei Quellen und niemand findet, welche gerade zählt. Auf der alten Website waren es 24 px oben und unten – ein guter Startwert. Das Trennzeichen selbst stellt man in Rank Math ein: Allgemeine Einstellungen → Brotkrümel → Trennzeichen. Empfehlung: › Eine Falle: Setz das Kürzel in ein Shortcode-Widget, nicht in ein Textfeld. Im Textfeld bekämen die Links den grauen Balken des Fließtext-Links. -------------------------------------------------------------------------- */ .rank-math-breadcrumb { font-size: 16px; line-height: 1.5; color: var(--nl-tinte); } .rank-math-breadcrumb p { margin: 0; } /* Der Weg dorthin: schwarz, ohne Unterstrich, ohne Balken. */ .rank-math-breadcrumb a { color: var(--nl-tinte); text-decoration: none; background: none; padding: 0; margin: 0; transition: color 0.15s ease; } .rank-math-breadcrumb a:hover, .rank-math-breadcrumb a:focus-visible { color: var(--nl-akzent); text-decoration: none; } /* Die Seite, auf der man steht. */ .rank-math-breadcrumb .last { color: var(--nl-akzent); } .rank-math-breadcrumb .separator { padding: 0 6px; color: var(--nl-tinte); } @media (max-width: 575.98px) { .rank-math-breadcrumb { font-size: 15px; } } @media (prefers-reduced-motion: reduce) { .rank-math-breadcrumb a { transition: none; } } @media print { .rank-math-breadcrumb { display: none; } } /* ----------------------------------------------------------------------------- Artikeltext aus dem Import Der Fließtext von Magazinartikeln und News kommt fertig aus der Datenbank – Absätze, Zwischenüberschriften, Zitate. Elementor gibt ihn mit dem Widget „Beitragsinhalt" aus und hat für das Innenleben keine Regler. Deshalb steht das Nötige hier, und zwar ohne Klasse: Die Regeln greifen dort, wo der Text ausgegeben wird. Der Rhythmus ist bewusst nicht der der alten Website. Dort hatten Überschriften margin-top 0 und margin-bottom 8 px – der Abstand darüber kam allein vom Absatz davor. Das liest sich gedrängt: Die Überschrift klebte fast gleich weit an dem, was vor ihr steht, wie an dem, was folgt. Hier ist der Abstand über der Überschrift dreimal so groß wie darunter. Das ist die alte Setzerregel: Eine Überschrift gehört zu dem, was nach ihr kommt, nicht zu dem davor. Dadurch zerfällt ein langer Artikel beim Überfliegen von selbst in Abschnitte. -------------------------------------------------------------------------- */ /* Die Variablen hängen am Widget selbst, nicht an .elementor-widget-container: Den inneren Wrapper gibt Elementor mit „Optimized Markup" (Standard für Neuinstallationen ab 3.30) nicht mehr aus. Eigene Eigenschaften erben nach unten – so gilt es mit und ohne Wrapper (Korrektur zu 2.5.1). */ .nl-text, .elementor-widget-theme-post-content, .elementor-widget-post-content { --nl-luft-ueber: 48px; --nl-luft-unter: 16px; } .nl-text > h2, .nl-text > h3, .nl-text > h4, .elementor-widget-theme-post-content h2, .elementor-widget-theme-post-content h3, .elementor-widget-theme-post-content h4, .elementor-widget-post-content h2, .elementor-widget-post-content h3, .elementor-widget-post-content h4 { margin-top: var(--nl-luft-ueber, 48px); margin-bottom: var(--nl-luft-unter, 16px); } /* Ganz oben keine Luft – da steht schon der Titel darüber. */ .nl-text > :first-child, .elementor-widget-theme-post-content > :first-child, .elementor-widget-post-content > :first-child, .elementor-widget-theme-post-content .elementor-widget-container > :first-child, .elementor-widget-post-content .elementor-widget-container > :first-child { margin-top: 0; } /* Absätze im Artikel. */ .nl-text > p, .elementor-widget-theme-post-content p, .elementor-widget-post-content p { margin-bottom: 24px; } /* Der Vorspann. Auf der alten Website 28 px in Light – deutlich größer als der Fließtext, damit der Einstieg trägt. */ .nl-text .lead, .elementor-widget-theme-post-content .lead, .elementor-widget-post-content .lead { font-size: 28px; font-weight: 300; line-height: 1.35; margin-bottom: 28px; } /* ------------------------------------------------------------------------- * Bildnachweis * * Klein und zurückhaltend, aber nicht versteckt: Ein Urhebervermerk, den * niemand lesen kann, erfüllt seinen Zweck nicht – rechtlich nicht und * gegenüber den Fotografinnen erst recht nicht. * * Grau statt schwarz, damit er dem Bild nicht die Aufmerksamkeit nimmt. * 13 px, damit er lesbar bleibt. * ---------------------------------------------------------------------- */ .nl-bildnachweis { display: block; margin-top: 6px; font-size: 13px; line-height: 1.4; color: var(--nl-grau); } /* Steht der Nachweis direkt unter einem Bild, gehört er an dessen Kante – nicht an den Textrand darunter. */ figure > .nl-bildnachweis { margin-top: 4px; } @media (max-width: 767.98px) { .nl-text, .elementor-widget-theme-post-content, .elementor-widget-post-content { --nl-luft-ueber: 36px; --nl-luft-unter: 12px; } .nl-text .lead, .elementor-widget-theme-post-content .lead, .elementor-widget-post-content .lead { font-size: 23px; } }