/* =============================================================================
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; }
/* -----------------------------------------------------------------------------
Lange Wörter umbrechen
Ausnahme von der Regel „hier nur Klassen, keine nackten HTML-Elemente":
Das hier ist keine Gestaltung, sondern ein Sicherheitsnetz. Deutsche
Komposita wie „Gemeinschaftsveranstaltung" sind in einer 40-px-Überschrift
breiter als ein Handy. Ohne diese Regel schiebt ein einziges Wort die ganze
Seite zur Seite. Größe, Farbe und Schnitt bleiben beim Theme Style.
Beides zusammen: hyphens trennt an der Silbe („Möglich-keiten"),
overflow-wrap fängt ab, was sich nicht trennen lässt (lange Adressen,
Dateinamen). Ohne hyphens bräche der Browser mitten im Wort um –
„Möglichkeit / en". Das Trennen setzt voraus; das steht. */
h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; hyphens: auto; }
/* -----------------------------------------------------------------------------
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.
Eine Tabelle mit drei, vier Spalten passt auf dem Handy nicht in die
Breite. Statt die ganze Seite zu verschieben, rollt nur die Tabelle.
Das greift von allein, sobald eine Tabelle mit der Klasse nl-tabelle
in einem Text-Widget steht – ohne dass jemand etwas umbauen muss.
Wer eine Tabelle selbst einbaut, kann sie auch in
…
setzen. */
.nl-rollen,
.elementor-widget:has(> .nl-tabelle),
.elementor-widget-container:has(> .nl-tabelle),
.elementor-widget-container:has(> figure > .nl-tabelle) {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
@media (max-width: 767px) {
.nl-tabelle { font-size: 16px; }
.nl-tabelle th,
.nl-tabelle td { padding: 8px 10px; white-space: nowrap; }
.nl-tabelle td:first-child,
.nl-tabelle th:first-child { white-space: normal; min-width: 9em; }
}
/* -----------------------------------------------------------------------------
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;
}
/* -----------------------------------------------------------------------------
Fußzeile (Elementor-Vorlage „NL Fußzeile", Container-Klasse nl-fusszeile)
Vier Spalten auf der Markenfarbe: Adresse, Entdecken, Mitmachen,
Spendenkonto + Netzwerke; darunter Rechtliches. Die Links in den Textblöcken
(Telefon, E-Mail, „Alle Spendenmöglichkeiten") würden sonst die Linkfarbe
des Kits (rot) erben – auf Rot unsichtbar.
-------------------------------------------------------------------------- */
/* Fünf Klassen, weil die Linkregel für Text-Editor-Widgets weiter unten
(.elementor-widget-text-editor a:not(…):not(…):not(…)) vier hat. */
.nl-fusszeile .elementor-widget-text-editor.nl-fuss-text .elementor-widget-container a:not(.elementor-button),
.nl-fusszeile .elementor-widget-text-editor.nl-fuss-text.nl-fuss-text a:not(.elementor-button):not(.nl-pfeillink) {
color: inherit;
text-decoration: underline;
text-decoration-color: rgba(255, 255, 255, .45);
text-underline-offset: .15em;
transition: text-decoration-color .15s ease;
}
.nl-fusszeile .elementor-widget-text-editor.nl-fuss-text .elementor-widget-container a:not(.elementor-button):hover,
.nl-fusszeile .elementor-widget-text-editor.nl-fuss-text .elementor-widget-container a:not(.elementor-button):focus-visible { text-decoration-color: currentColor; }
.nl-fusszeile .nl-fuss-text p:last-child { margin-bottom: 0; }
/* Seit die Anschrift aus dem Domain-Datensatz kommt (inc/kontakt.php), ist es
kein Text-Editor-Widget mehr, sondern ein Shortcode-Widget. Dieselbe Regel
noch einmal – sonst zieht die Linkfarbe des Kits Telefon und E-Mail auf die
Markenfarbe, und die ist auf der Fläche unsichtbar. */
.nl-fusszeile .elementor-widget-shortcode.nl-fuss-text a:not(.elementor-button),
.nl-fusszeile .elementor-widget-shortcode.nl-fuss-text.nl-fuss-text a:not(.elementor-button) {
color: inherit;
text-decoration: underline;
text-decoration-color: rgba(255, 255, 255, .45);
text-underline-offset: .15em;
}
.nl-fusszeile .elementor-widget-shortcode.nl-fuss-text a:not(.elementor-button):hover,
.nl-fusszeile .elementor-widget-shortcode.nl-fuss-text a:not(.elementor-button):focus-visible { text-decoration-color: currentColor; }
/* -----------------------------------------------------------------------------
Anschrift, Telefon, E-Mail
Kommen aus dem Domain-Datensatz (Design → Domains, inc/kontakt.php) und
stehen in Fußzeile, auf der Kontaktseite und in den Strukturdaten. Ausgabe
ist ein – das liest die Suchmaschine als Anschrift. Kursiv, wie
Browser von Haus aus setzen, will hier aber niemand.
-------------------------------------------------------------------------- */
.nl-anschrift {
font-style: normal;
margin: 0 0 10px;
line-height: 1.5;
}
.nl-anschrift__name { font-weight: 700; }
.nl-anschrift__kontakt {
display: inline-block;
margin-top: 8px;
}
.nl-anschrift__traeger {
display: inline-block;
margin-bottom: 4px;
font-size: .92em;
opacity: .85;
}
/* Einzeilige Fassung: [nl_anschrift trenner="komma"] – für Zeilen wie
„Neues Leben e.V., Raiffeisenstraße 2, 57635 Wölmersen". */
.nl-anschrift--zeile .nl-anschrift__name { font-weight: inherit; }
.nl-fusszeile .elementor-nav-menu--main .elementor-item { line-height: 1.35; }
/* -----------------------------------------------------------------------------
Kantig. Das Design von Neues Leben kennt keine Rundungen (René, 12.9.2026).
Elementor rundet ein paar Dinge von Haus aus – hier die Gegenwehr für die
Stellen, die kein Regler abdeckt. Buttons, Bilder, Formularfelder bekommen
ihre 0 im Editor (Rahmen → Radius 0).
-------------------------------------------------------------------------- */
.elementor-search-form__toggle .e-font-icon-svg-container,
.elementor-search-form__toggle i,
.elementor-search-form--skin-full_screen input[type="search"].elementor-search-form__input,
.elementor-menu-toggle,
.elementor-button,
.elementor-widget-icon .elementor-icon { border-radius: 0 !important; }
/* -----------------------------------------------------------------------------
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 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
Werte seit dem Entwurf „Kopfzeile neu" (12.9.2026): Balken 112 → 64 px,
Logo 200 → 148 px, Übergang 0,22 Sekunden. Unter 1024 px: Balken 72 → 64,
Logo 150 → 136. Die Ausgangswerte stehen in der Elementor-Vorlage
(Mindesthöhe des Balkens, Breite des Logos) – hier nur der Zielzustand.
-------------------------------------------------------------------------- */
.nl-kopfleiste .nl-balken { transition: min-height .22s ease; }
.nl-kopfleiste .nl-logo img,
.nl-kopfleiste .nl-logo svg { transition: max-width .22s ease, width .22s ease; max-width: 200px; }
/* 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. */
.nl-kopfleiste.elementor-sticky--effects .nl-balken.nl-balken { min-height: 64px; }
.nl-kopfleiste.elementor-sticky--effects .nl-logo img,
.nl-kopfleiste.elementor-sticky--effects .nl-logo svg { max-width: 148px; }
@media (max-width: 1023.98px) {
.nl-kopfleiste .nl-logo img,
.nl-kopfleiste .nl-logo svg { max-width: 150px; }
.nl-kopfleiste.elementor-sticky--effects .nl-balken.nl-balken { min-height: 64px; }
.nl-kopfleiste.elementor-sticky--effects .nl-logo img,
.nl-kopfleiste.elementor-sticky--effects .nl-logo svg { max-width: 136px; }
}
@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;
/* Kein Rahmen, kein Grund: Bild, Luft, Text (TYPO3-Auswertung; kantig). Die
Loop-Karten seit 2.24.0 setzen ihren Gap selbst. */
}
.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-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); }
}
/* 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. */
/* Solange kein Logo hinterlegt ist, steht hier der Name der Domain. Die
Farbe kommt vom Umfeld – aber das Elementor-Kit färbt jeden Link ein
(„.elementor-kit-2860 a"), und das schlägt ein einfaches „inherit".
Deshalb die doppelte Klasse: auf der Fläche gilt die Schriftfarbe der
Fläche, nicht die Linkfarbe. */
.nl-logo-text,
.nl-logo-text.nl-logo-text {
font-size: 28px;
font-weight: 700;
letter-spacing: .04em;
text-transform: uppercase;
color: var(--nl-auf-marke);
}
@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; }
}
/* -----------------------------------------------------------------------------
Bühnen – die Seitenköpfe (Vorlagen „NL Bühne A–H", Kategorie „NL Bühnen")
Aus der Designstudie vom 13.9.2026 übernommen sind Form, Fläche und
Schrift, nicht die Farben: Die eine Form ist der Pfeil nach rechts – wie im
Logo. Mal ist das Foto der Pfeil, mal ein heller Kasten über dem Foto, mal
die Farbfläche selbst. Nie ein Bogen, nie eine Rundung.
DER WINKEL IST DER DES LOGOS. Gemessen an Neues-Leben-Logo-2025 (2008 ×
591 px): Spitze 183 px tief bei 396 px Höhe = 0,462 der Höhe. Die Kanten
stehen damit 42,5 Grad zur Senkrechten (47,5 Grad zur Waagerechten), die
Spitze ist 85 Grad offen.
Die Designstudie zeichnet die Spitze etwas flacher: nachgemessen 0,425
(heller Kasten), 0,441 und 0,436 (Fotos), im Mittel 0,434 – rund zwei Grad
weniger. Wir folgen dem Logo, weil es die verbindliche Marke ist; wer die
Studie genauer treffen will, setzt --nl-pfeil-faktor auf .434.
CSS kennt die Höhe eines Elements nicht; deshalb setzt assets/pfeil.js die
Variable --nl-spitze je Element aus der gemessenen Höhe (inc/pfeil.php).
Der Wert hier ist nur der Rückfall ohne JavaScript.
Elementor kennt keinen Pfeil. Er entsteht hier aus clip-path; der Container
bekommt unter Erweitert → CSS-Klassen einen der Namen:
nl-buehne der äußere Container jeder Bühne
nl-pfeil-rechts Container läuft rechts in eine Spitze aus
nl-pfeil-links Spiegelbild: Spitze nach links (zweites Foto in Bühne H)
nl-pfeil-beidseitig Spitze links und rechts (in der Studie nicht belegt)
nl-buehne__kasten Pfeilkasten MIT Text: der Text bleibt frei von der Spitze;
unter 768 px ohne Spitze (Platz ist dort das knappe Gut)
nl-mobil-zuerst unter 768 px rückt der Container an den Anfang (Foto oben)
nl-buehne__buendig linker Innenabstand = Rand des 1140er-Rasters
nl-mobil-unten seit 2.24.0 ohne Wirkung (die Spitze zeigt immer nach
rechts, im Winkel des Logos) – Klasse darf bleiben
Anderer Winkel für eine ganze Website: .
Für eine einzelne Bühne: Erweitert → Eigenes CSS,
selector { --nl-pfeil-faktor: .3; }
-------------------------------------------------------------------------- */
.nl-buehne,
.nl-pfeil-rechts,
.nl-pfeil-links,
.nl-pfeil-beidseitig { --nl-spitze: clamp(40px, 10vw, 160px); }
.nl-pfeil-rechts {
clip-path: polygon(
0 0,
calc(100% - var(--nl-spitze)) 0,
100% 50%,
calc(100% - var(--nl-spitze)) 100%,
0 100%
);
}
/* Spiegelbild: gerade Kante rechts, Spitze nach links. Das zweite Foto in
Bühne H („What we believe") – oben zeigt die Spitze nach rechts, unten nach
links. Nachgemessen an der Designstudie: 105 px Tiefe bei 238 px Höhe,
dasselbe Verhältnis wie bei allen anderen Pfeilen im Blatt. */
.nl-pfeil-links {
clip-path: polygon(
var(--nl-spitze) 0,
100% 0,
100% 100%,
var(--nl-spitze) 100%,
0 50%
);
}
/* Spitze links UND rechts. In der Designstudie kommt diese Form nicht vor;
sie bleibt für den Fall, dass jemand sie bewusst einsetzen will. */
.nl-pfeil-beidseitig {
clip-path: polygon(
var(--nl-spitze) 0,
calc(100% - var(--nl-spitze)) 0,
100% 50%,
calc(100% - var(--nl-spitze)) 100%,
var(--nl-spitze) 100%,
0 50%
);
}
/* Der Text im Pfeilkasten endet vor der Spitze: Elementors eigener
Innenabstand plus die Tiefe der Spitze. */
.e-con.nl-pfeil-rechts.nl-buehne__kasten {
padding-inline-end: calc(var(--padding-inline-end) + var(--nl-spitze));
}
/* Linker Innenabstand bündig zum Raster – für Textspalten, die am Bildschirmrand
beginnen und deren Text trotzdem am 1140er-Raster stehen soll. */
.e-con.nl-buehne__buendig {
padding-inline-start: max(var(--padding-inline-start), calc((100% - var(--nl-breit)) / 2 + var(--nl-rand)));
}
/* Foto-Container ohne eigene Kinder: das Bild füllt die ganze Fläche. */
.nl-buehne__foto { background-size: cover; background-position: center; }
/* Elementor hängt dem letzten Widget eines Containers den „Abstand zwischen
Widgets" aus dem Kit an (30 px) – in einer Bühne ist das Luft, die niemand
bestellt hat. Die Abstände in der Bühne macht der Container mit seinem Gap. */
.nl-buehne .elementor-widget { --kit-widget-spacing: 0px; }
@media (max-width: 767.98px) {
/* Foto oben, Text darunter */
.nl-buehne .nl-mobil-zuerst { order: -1; }
/* Ein Pfeilkasten mit Text wird auf dem Handy zum schlichten Kasten. */
.nl-buehne .nl-pfeil-rechts.nl-buehne__kasten {
clip-path: none;
padding-inline-end: var(--padding-inline-end);
}
.e-con.nl-buehne__buendig { padding-inline-start: var(--padding-inline-start); }
}
@media (min-width: 1720px) {
/* Auf sehr breiten Bildschirmen bleibt das Raster der Bühnen bei 1140 –
die Bühnen sollen nicht mit dem Text davonlaufen. */
.nl-buehne { --nl-breit: 1140px; }
}
/* =============================================================================
BÜHNE MIT VIDEO STATT FOTO
=============================================================================
Die Startseite von tsr.de öffnet mit einem laufenden Video. Elementor kann
das von Haus aus: Container → Stil → Hintergrund → Video. Was Elementor
NICHT kann, steht hier:
1. Das Video in die Pfeilform bringen. clip-path am Container schneidet auch
das Video – dafür muss der Videocontainer aber wirklich die ganze Fläche
füllen, und das tut er nur mit object-fit.
2. Einen Pausenknopf. Bewegung, die länger als fünf Sekunden läuft und nicht
anhaltbar ist, verstößt gegen die Barrierefreiheit (WCAG 2.2.2). Elementor
liefert keinen Knopf; assets/buehne-video.js hängt einen an.
3. Auf „Bewegung bitte reduzieren" hören. Wer das im Betriebssystem gesetzt
hat, bekommt das Standbild – das Video startet gar nicht erst.
KLASSEN
nl-buehne__video am Container mit dem Hintergrundvideo
nl-buehne__video--dunkel legt einen dunklen Schleier darüber, damit
heller Text lesbar bleibt (Elementors eigene
Hintergrund-Überlagerung tut es auch)
WORAUF ZU ACHTEN IST
Ein Video von YouTube lädt Daten zu Google, bevor jemand zugestimmt hat –
auf einer Startseite ist das heikel. Für Bühnenvideos deshalb eine eigene
MP4-Datei in die Mediathek legen (Elementor: „Selbst gehostet"). Das ist
auch schneller. Faustregel: unter 1920 px breit, unter 6 MB, ohne Ton,
10 bis 20 Sekunden, nahtlos geschnitten.
-------------------------------------------------------------------------- */
.nl-buehne__video { position: relative; overflow: hidden; }
/* Elementor legt den Videocontainer absolut über die Fläche. Bei einem
Container mit clip-path muss er wirklich bis in die Spitze reichen. */
.nl-buehne__video .elementor-background-video-container {
position: absolute;
inset: 0;
overflow: hidden;
pointer-events: none;
}
/* Ohne object-fit bleibt das Video in seinem Seitenverhältnis stehen und
lässt an den Seiten graue Streifen. */
.nl-buehne__video .elementor-background-video-container video,
.nl-buehne__video .elementor-background-video-hosted,
.nl-buehne__video .elementor-background-video-embed {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
max-width: none;
object-fit: cover;
transform: none;
}
/* Ein Schleier, damit weißer Text auf bewegtem Bild lesbar bleibt. */
.nl-buehne__video--dunkel::before {
content: "";
position: absolute;
inset: 0;
background: rgba(0, 0, 0, .38);
pointer-events: none;
z-index: 1;
}
/* Alles, was der Container selbst enthält, gehört über das Video. */
.nl-buehne__video > .e-con-inner,
.nl-buehne__video > .elementor-widget,
.nl-buehne__video > .e-con { position: relative; z-index: 2; }
/* Der Pausenknopf. Kantig wie alles hier, klein, unten links in der Bühne –
unten rechts sitzt schon der Spendenknopf. */
.nl-videoknopf {
position: absolute;
left: 12px;
bottom: 12px;
z-index: 3;
display: inline-flex;
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
padding: 0;
border: 1px solid rgba(255, 255, 255, .65);
border-radius: 0;
background: rgba(0, 0, 0, .45);
color: #fff;
cursor: pointer;
line-height: 0;
}
.nl-videoknopf:hover,
.nl-videoknopf:focus-visible { background: rgba(0, 0, 0, .75); }
.nl-videoknopf svg { width: 14px; height: 14px; fill: currentColor; }
/* =============================================================================
DER SCHWEBENDE SPENDENKNOPF
=============================================================================
Ein Knopf unten rechts, auf jeder Seite der Domain. Er ersetzt die alte
Werkzeugleiste mit Spenden, Kontakt und Newsletter – einer statt dreier.
Gebaut in inc/schwebend.php, geschaltet unter Design → Domains.
DER PLATZ FÜR DEN CHAT
Brevo kennt für seinen Chat-Knopf neun feste Plätze und keinen freien
Abstand zum Rand. Zwei Knöpfe in derselben Ecke lägen also übereinander.
Mit der Klasse nl-schwebt--chat rückt der Spendenknopf um eine Knopfhöhe
nach oben; Brevo bleibt unten rechts. Passt Brevos Knopfgröße einmal nicht,
ist es eine Zahl: --nl-schwebt-chat.
Der z-index liegt bewusst UNTER Brevos 9999 – wenn das Chatfenster aufgeht,
soll es vorne sein.
-------------------------------------------------------------------------- */
:root {
--nl-schwebt-rand: 16px; /* Abstand zum rechten und unteren Rand */
--nl-schwebt-chat: 74px; /* Höhe von Brevos Knopf plus Luft */
}
/* Zwei Klassennamen, nicht einer: Das Elementor-Kit färbt mit
„.elementor-kit-2860 a" JEDEN Link ein. Ein einzelnes .nl-schwebt wäre
gleich stark und verlöre je nach Ladereihenfolge – die doppelte Klasse
gewinnt sicher, ohne !important. */
.nl-schwebt,
.nl-schwebt.nl-schwebt {
position: fixed;
right: var(--nl-schwebt-rand);
bottom: var(--nl-schwebt-rand);
z-index: 9000;
display: inline-flex;
align-items: center;
gap: 9px;
padding: 13px 18px;
border-radius: 0;
background: var(--nl-marke);
color: var(--nl-auf-marke);
font-family: inherit;
font-size: 16px;
font-weight: 700;
line-height: 1;
text-decoration: none;
box-shadow: 0 2px 16px rgba(0, 0, 0, .22);
transition: background-color .15s ease, transform .15s ease;
}
.nl-schwebt.nl-schwebt:hover,
.nl-schwebt.nl-schwebt:focus-visible {
background: var(--nl-marke-dunkel);
color: var(--nl-auf-marke);
transform: translateY(-2px);
}
.nl-schwebt:focus-visible { outline: 3px solid var(--nl-auf-marke); outline-offset: -6px; }
.nl-schwebt__herz { flex: 0 0 auto; }
/* Mit Chat: eine Knopfhöhe höher. */
.nl-schwebt--chat { bottom: calc(var(--nl-schwebt-rand) + var(--nl-schwebt-chat)); }
/* Auf dem Handy ist Platz das knappe Gut: nur das Herz, der Text bleibt für
den Screenreader im aria-label stehen. Brevos Knopf sitzt dort ohnehin
immer unten – deshalb rückt der Spendenknopf auch ohne Chat-Häkchen nicht
tiefer als hier. */
@media (max-width: 575.98px) {
.nl-schwebt { padding: 13px; gap: 0; }
.nl-schwebt__text {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
}
}
@media (prefers-reduced-motion: reduce) {
.nl-schwebt { transition: none; }
.nl-schwebt:hover,
.nl-schwebt:focus-visible { transform: none; }
}
/* Auf Papier hat ein schwebender Knopf nichts zu suchen. */
@media print {
.nl-schwebt,
.nl-videoknopf { display: none !important; }
}
/* -----------------------------------------------------------------------------
Vorlagen – Karten, Zeilen, Datenblock, Personen (nl-core 2.24.0)
Die Bausteine der Theme-Builder-Vorlagen (vorlagenplan.md, Phase 1).
Elementor liefert die Widgets, hier steht das gemeinsame Aussehen: kantig,
ohne Rahmen, Rubrik in der Akzentfarbe, Titel in Tinte, Pfeil nur am Link.
Alles mobil zuerst – die Regeln ohne Media Query gelten fürs Handy.
-------------------------------------------------------------------------- */
/* Karte (Loop-Vorlagen „Karte …"): der ganze Container ist der Link. */
.nl-karte { text-decoration: none; color: inherit; }
.nl-karte .nl-karte__bild { overflow: hidden; background: var(--nl-hell); }
.nl-karte .nl-karte__titel { transition: color .2s ease; }
.nl-karte:hover .nl-karte__titel,
.nl-karte:focus-visible .nl-karte__titel { color: var(--nl-akzent); }
.nl-karte:focus-visible { outline: 2px solid var(--nl-akzent); outline-offset: 4px; }
/* Etikett – „Wenige Plätze", „Ausgebucht", „Neu": ein Wort auf Fläche. */
.nl-etikett,
.nl-etikett .elementor-heading-title {
display: inline-block;
font-size: 12px;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
line-height: 1;
padding: 6px 8px;
background: var(--nl-tinte);
color: var(--nl-weiss);
}
.nl-etikett:empty,
.nl-etikett .elementor-heading-title:empty { display: none; }
.nl-etikett--marke, .nl-etikett--marke .elementor-heading-title { background: var(--nl-akzent); color: var(--nl-auf-akzent); }
.nl-etikett--hell, .nl-etikett--hell .elementor-heading-title { background: var(--nl-hell); color: var(--nl-tinte); }
/* Zeile (Loop „Zeile Termin", Datenblock „Zeilen"): Datumsblock links, Text rechts. */
.nl-zeile {
display: flex;
align-items: flex-start;
gap: 16px;
padding: 14px 0;
border-bottom: 1px solid var(--nl-linie);
list-style: none;
margin: 0;
text-decoration: none;
color: inherit;
}
.nl-zeile:first-child { border-top: 1px solid var(--nl-linie); }
.nl-zeile .nl-datum { flex: 0 0 60px; }
.nl-zeile__text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.nl-zeile__teil { font-size: 16px; color: var(--nl-grau); }
.nl-zeile__titel { font-size: 19px; font-weight: 700; line-height: 1.25; color: var(--nl-tinte); }
.nl-zeile__meta { font-size: 15px; color: var(--nl-grau); }
a.nl-zeile:hover .nl-zeile__titel, a.nl-zeile:focus-visible .nl-zeile__titel { color: var(--nl-akzent); }
@media (min-width: 768px) {
.nl-zeile { gap: 24px; padding: 18px 0; }
.nl-zeile .nl-datum { flex-basis: 72px; }
.nl-zeile__text { flex-direction: row; align-items: baseline; gap: 24px; }
.nl-zeile__titel { flex: 1 1 auto; }
}
/* Klapper – , kantig, ohne Rahmen, Linie unten. */
.nl-klapp { border-bottom: 1px solid var(--nl-linie); }
.nl-klapp:first-of-type { border-top: 1px solid var(--nl-linie); }
.nl-klapp > summary {
cursor: pointer;
list-style: none;
position: relative;
padding: 16px 40px 16px 0;
font-size: 19px;
font-weight: 700;
line-height: 1.3;
color: var(--nl-tinte);
}
.nl-klapp > summary::-webkit-details-marker { display: none; }
.nl-klapp > summary::after {
content: "";
position: absolute;
right: 8px;
top: 50%;
width: 10px;
height: 10px;
border-right: 2px solid var(--nl-akzent);
border-bottom: 2px solid var(--nl-akzent);
transform: translateY(-70%) rotate(45deg);
transition: transform .2s ease;
}
.nl-klapp[open] > summary::after { transform: translateY(-30%) rotate(225deg); }
.nl-klapp > summary:hover { color: var(--nl-akzent); }
.nl-klapp__inhalt { padding: 0 0 20px; font-size: 17px; line-height: 1.55; }
.nl-klapp__inhalt > :last-child { margin-bottom: 0; }
/* Datenblock (Widget „NL Datenblock") */
.nl-db { --nl-db-kopf: var(--nl-akzent); --nl-db-linie: var(--nl-linie); }
.nl-db__titel { font-size: 23px; font-weight: 700; line-height: 1.2; margin: 0 0 14px; }
.nl-db__leer { color: var(--nl-grau); font-size: 16px; }
.nl-db__k { font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--nl-db-kopf); }
.nl-db__paar { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; margin-right: 14px; }
.nl-db__unterzeile { margin-top: 4px; }
.nl-db__unterzeile:first-child { margin-top: 0; }
.nl-db__ja { color: var(--nl-akzent); font-weight: 700; }
.nl-db__nein { color: var(--nl-grau); }
/* Tabelle: auf dem Handy wird jede Zeile ein Block mit Beschriftung. */
.nl-db__rollen { overflow-x: auto; }
.nl-db__tabelle { border-color: var(--nl-db-linie); }
.nl-db__tabelle th { color: var(--nl-db-kopf); }
.nl-db__tabelle th, .nl-db__tabelle td { border-bottom-color: var(--nl-db-linie); }
@media (max-width: 767.98px) {
.nl-db__tabelle thead { display: none; }
.nl-db__tabelle tr { display: block; padding: 12px 0; border-bottom: 1px solid var(--nl-db-linie); }
.nl-db__tabelle td { display: block; padding: 4px 0; border: 0; }
.nl-db__tabelle td::before {
content: attr(data-label);
display: block;
font-size: 12px;
font-weight: 700;
letter-spacing: .06em;
text-transform: uppercase;
color: var(--nl-db-kopf);
}
.nl-db__tabelle td:empty { display: none; }
}
.nl-db-dicht-eng .nl-tabelle th, .nl-db-dicht-eng .nl-tabelle td { padding-top: 6px; padding-bottom: 6px; }
.nl-db-dicht-weit .nl-tabelle th, .nl-db-dicht-weit .nl-tabelle td { padding-top: 16px; padding-bottom: 16px; }
/* Liste */
.nl-db__liste { list-style: none; margin: 0; padding: 0; }
.nl-db__eintrag { padding: 12px 0; border-bottom: 1px solid var(--nl-db-linie); display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: baseline; }
.nl-db__eintrag:first-child { border-top: 1px solid var(--nl-db-linie); }
.nl-db__haupt { font-weight: 700; font-size: 18px; flex: 1 0 100%; }
@media (min-width: 768px) { .nl-db__haupt { flex: 0 0 auto; min-width: 200px; } }
/* Beschriftung / Wert (Gruppen, Steckbrief) – die vorhandene .nl-info ohne Rahmen */
.nl-db__info { border: 0; padding: 0; gap: 10px; }
.nl-db__info dt { font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--nl-db-kopf); }
.nl-db__info dd { font-size: 17px; color: var(--nl-tinte); margin: 0 0 4px; }
@media (min-width: 768px) {
.nl-db__info { display: grid; grid-template-columns: max-content 1fr; column-gap: 28px; row-gap: 10px; align-items: baseline; }
.nl-db__info dd { margin: 0; }
}
/* Zeilen im Datenblock */
.nl-db__zeilen { list-style: none; margin: 0; padding: 0; }
/* Personen (Widget „NL Personen") */
.nl-personen { --nl-personen-spalten: 2; }
.nl-personen__titel { font-size: 23px; font-weight: 700; line-height: 1.2; margin: 0 0 16px; }
.nl-personen__liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 24px 20px; grid-template-columns: repeat(var(--nl-personen-spalten), minmax(0, 1fr)); }
.nl-personen__link { display: flex; flex-direction: column; gap: 10px; text-decoration: none; color: inherit; }
.nl-personen__bild { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; background: var(--nl-hell); }
.nl-personen__bild--leer { background: var(--nl-hell); }
.nl-personen__text { display: flex; flex-direction: column; gap: 2px; }
.nl-personen__name { font-size: 18px; font-weight: 700; line-height: 1.25; color: var(--nl-tinte); }
.nl-personen__funktion { font-size: 15px; color: var(--nl-grau); }
a.nl-personen__link:hover .nl-personen__name, a.nl-personen__link:focus-visible .nl-personen__name { color: var(--nl-akzent); }
.nl-personen--zeilen .nl-personen__liste { grid-template-columns: 1fr; gap: 12px; }
.nl-personen--zeilen .nl-personen__link { flex-direction: row; align-items: center; gap: 14px; }
.nl-personen--zeilen .nl-personen__bild { width: 56px; aspect-ratio: 1; }
.nl-personen__namen { margin: 0; font-size: 17px; }
@media (min-width: 768px) { .nl-personen__liste { gap: 32px 28px; } }
/* Kennkarte – der Faktenkasten neben oder über dem Text (Freizeit, Kurs, Termin).
In Elementor: Container mit Klasse nl-kennkarte, darin Icon-Listen oder Überschriften. */
.nl-kennkarte {
background: var(--nl-hell);
}
.nl-kennkarte .elementor-icon-list-text { font-size: 17px; }
.nl-kennkarte .nl-kennkarte__k,
.nl-kennkarte .nl-kennkarte__k .elementor-heading-title {
font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--nl-akzent); margin: 0;
}
.nl-kennkarte .nl-kennkarte__w,
.nl-kennkarte .nl-kennkarte__w .elementor-heading-title { font-size: 20px; font-weight: 700; line-height: 1.25; margin: 0; }
.nl-kennkarte .nl-kennkarte__w:empty { display: none; }
/* Lesebreite für Text-Widgets in Detailseiten */
.nl-lesen { max-width: var(--nl-lese); }
/* Rubrik über Karten- und Seitentiteln – die kleine Zeile. */
.nl-rubrik, .nl-rubrik .elementor-heading-title {
font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--nl-akzent); margin: 0;
}
/* Play-Fläche über Bildern (Karte Episode) */
.nl-play { position: relative; }
.nl-play::after {
content: "";
position: absolute;
left: 50%; top: 50%;
width: 56px; height: 56px;
transform: translate(-50%, -50%);
background: var(--nl-akzent);
clip-path: polygon(30% 22%, 78% 50%, 30% 78%);
pointer-events: none;
}
/* Bildformate der Karten – das Bild-Widget bekommt die Klasse, das ![]()
das Maß. */
.nl-karte__bild img { display: block; width: 100%; height: auto; object-fit: cover; background: var(--nl-hell); }
.elementor-element.nl-karte__bild--3-2 img { aspect-ratio: 3 / 2; }
.elementor-element.nl-karte__bild--4-5 img { aspect-ratio: 4 / 5; object-position: center top; }
.elementor-element.nl-karte__bild--16-9 img { aspect-ratio: 16 / 9; }
.elementor-element.nl-karte__bild--3-4 img { aspect-ratio: 3 / 4; width: 70%; margin: 0; }
.e-con.nl-karte { gap: var(--row-gap) var(--column-gap); }
.nl-karte__bild .elementor-widget-container { position: relative; }
.nl-karte .elementor-widget-container { margin: 0; }
/* Laufzeit „12" → „12 Min." */
.nl-min .elementor-heading-title:not(:empty)::after { content: " Min."; }
/* Zeile Termin als Loop-Karte: der Datumsblock ist ein Container. */
.nl-zeile.nl-karte { border-bottom: 1px solid var(--nl-linie); }
.nl-zeile.nl-karte .nl-datum { padding: 8px 6px; }
/* Etikett-Überschrift ohne Inhalt verschwindet ganz. */
.nl-etikett .elementor-heading-title:empty { display: none; }
.elementor-widget.nl-etikett { width: auto; }
/* Unter 768 px an den Anfang rücken – gilt überall, nicht nur in Bühnen
(Seitenleiste mit den Fakten vor dem langen Text). */
@media (max-width: 767.98px) { .nl-mobil-zuerst { order: -1; } }
/* Lesezeit „5" → „Lesezeit 5 Min." */
.nl-lesezeit .elementor-heading-title:not(:empty)::before { content: "Lesezeit "; }
.nl-lesezeit .elementor-heading-title:not(:empty)::after { content: " Min."; }
/* Handschrift-Zeile (Festtag, Unterzeile) */
.nl-hand .elementor-heading-title { font-family: 'Covered By Your Grace', cursive; font-weight: 400; }
/* Zweispaltig: Text und Seitenleiste */
.nl-seitenleiste { position: sticky; top: 140px; }
@media (max-width: 1023.98px) { .nl-seitenleiste { position: static; } }
.nl-db__zusatz { color: var(--nl-grau); font-size: 15px; }
/* Zahl zu Betrag: 249 wird 249 Euro */
.nl-euro .elementor-heading-title:not(:empty)::after { content: " €"; }
/* Karten auf der Markenfläche (Magazin-Aufmacher): Schrift in „Schrift auf der Fläche". */
.nl-auf-marke .nl-karte .elementor-heading-title,
.nl-auf-marke .nl-karte .elementor-widget-theme-post-excerpt { color: var(--nl-auf-marke) !important; }
.nl-auf-marke .nl-karte:hover .nl-karte__titel .elementor-heading-title { text-decoration: underline; }
/* Bereichs-Kacheln */
.nl-kachel .nl-buehne__foto { width: 100%; }