`). Als `border-top` an der Navigation ging ihr Einzug verloren:
WordPress liefert für den Kopf-Container
`> :where(:not(.alignleft)…) { margin-left: auto !important }` – gegen
`!important` kommt kein `margin-inline` an, die Linie lief über die ganze
Breite statt mit 80 px Rand.
**Dasselbe Muster wie dreimal zuvor** (Spenden-Modul, Sozialsymbole,
kompakter Kopf): Eine eigene Regel auf einem WordPress-Layout-Block
verliert gegen dessen generierte Regel. Hier hilft keine höhere
Spezifität, sondern ein Element, das der Layout-Selektor nicht trifft. */
/* **Kein zusätzlicher Einzug mehr.** Kopf und Fußbereich liefen bis v2.29.3
auf `wideSize: 1400px`, der Seiteninhalt auf 1280 – zwei Raster auf einer
Seite. Gemessen bei 1440 px: Inhalt und „Das sind wir" auf der Kante 73,
Spenden-Modul und Fußbereich auf 24, die Trennlinie im Kopf auf 104. Von
Bene gemeldet („warum bricht das aus dem Schema der Seite raus?").
Alle Container stehen jetzt auf 1280. Die 80 px Einzug, die die Linie
vorher brauchte, um die Kante zu treffen, sind damit überzählig – der
Container bringt sie mit. */
/* `alignwide` im Markup, damit die Linie dieselbe Breite hat wie der
Seiteninhalt – ohne `align` bekäme sie in einem „constrained"-Container
die Textbreite von 760 px. `max-width: none` wäre das andere Extrem und
zöge sie über die volle Fensterbreite; gemessen stand sie damit auf der
Kante 24 statt 73. */
.nrv-kopf > .nrv-kopf-trenner {
height: 0;
margin-block: 0;
border-top: 1px solid var(--wp--preset--color--linie);
}
/* Versalien mit weitem Sperrsatz – im Entwurf 12,5 px bei 0.2em. Das
Designsystem setzt 12 px als Untergrenze, also bleibt es dabei. */
.nrv-kopf > .wp-block-navigation .wp-block-navigation-item__content,
.nrv-kopf > .wp-block-navigation .wp-block-navigation-submenu__toggle {
font-family: var(--wp--preset--font-family--manrope);
font-size: 0.78rem;
font-weight: 500;
letter-spacing: 0.2em;
text-transform: uppercase;
}
/* Die Untermenü-Einträge bleiben gemischt gesetzt: Versalien über mehrere
Zeilen sind bei dieser Mitgliedschaft schwer zu lesen. */
.nrv-kopf > .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
font-size: 0.9375rem;
font-weight: 400;
letter-spacing: 0;
text-transform: none;
}
/* Der Knopf sitzt rechts auf Höhe der Marke. Im Entwurf steht er eine Ebene
höher in der Servicezeile – dort scrollt er aber mit ihr hinaus, und der
Artboard „Navigation-Sticky" zeigt ihn beim Scrollen ausdrücklich weiter.
Deshalb eine Ebene tiefer, sonst unverändert. */
.nrv-kopf-mitte {
position: relative;
margin-block: 0;
}
/* **Der Knopf steht in der Servicezeile, wie im Entwurf.** Bis v2.22.3 saß er
im Kopf rechts auf Höhe der Marke – eine Stelle, die der Artboard nicht
kennt. Meine Begründung damals: In der Servicezeile scrollt er hinaus,
obwohl „Navigation-Sticky" ihn weiter zeigt. Das stimmt, ist aber ein
Problem des kompakten Zustands und kein Grund, den Normalzustand vom
Entwurf abweichen zu lassen – gesehen wird zuerst der ungescrollte Kopf.
Von Bene gemeldet.
Maße aus `Navigation-Desktop.dc.html`: `min-height: 44px`, `padding: 0 22px`,
13 px / 600, `letter-spacing: .04em`, `border-radius: 2px`, Pfeil dahinter.
Unserer stand auf 49 px Höhe, 12 px und 700. */
.nrv-service-rechts > .nrv-kopf-cta {
margin-block: 0;
flex-shrink: 0;
}
.nrv-service-rechts > .nrv-kopf-cta .wp-block-button__link {
min-height: 44px;
display: inline-flex;
align-items: center;
gap: 0.625rem;
padding: 0 1.375rem;
font-size: 0.8125rem;
font-weight: 600;
letter-spacing: 0.04em;
border-radius: 0;
text-transform: none;
}
/* Der Pfeil steht im Entwurf hinter der Beschriftung. Als `::after`, damit
die Beschriftung im Markup sauber bleibt – dieselbe Entscheidung wie bei
`.nrv-cta` (v2.19.6). */
.nrv-service-rechts > .nrv-kopf-cta .wp-block-button__link::after {
content: "→";
font-size: 1em;
line-height: 1;
}
/* ---------------------------------------------------------------------------
Kompakter Zustand beim Scrollen (Artboard „Navigation-Sticky", 76 px)
Aufgebaut ist der Kopf 252 px hoch. Klebend wäre das ein Fünftel der
Fensterhöhe, das dem Inhalt dauerhaft fehlt. Die Klasse setzt
`assets/js/navigation.js`.
--------------------------------------------------------------------------- */
header.wp-block-template-part > .nrv-kopf {
transition: padding 0.2s ease;
}
.nrv-kopf-kompakt > .nrv-kopf > .wp-block-group,
.nrv-kopf-kompakt > .nrv-kopf {
--nrv-kopf-kompakt: 1;
}
.nrv-kopf-kompakt .nrv-kopf {
display: grid;
grid-template-columns: 260px minmax(0, 1fr) 260px;
align-items: center;
min-height: 76px;
box-shadow: 0 6px 24px rgba(14, 42, 79, 0.08);
}
.nrv-kopf-kompakt .nrv-kopf-mitte {
grid-column: 1;
position: static;
display: flex;
justify-content: flex-start;
}
/* Im kompakten Zustand trägt nur das Wappen – der Schriftzug würde die
260-px-Spalte sprengen, und die Marke ist am Wappen erkennbar. */
/* Alle drei ausdrücklich in Zeile 1. Ohne das platziert das Raster die
Marke in Spalte 1, den Knopf in Spalte 3 – und die Navigation findet in
Zeile 1 keinen freien Platz mehr vor sich, weil Auto-Placement nur
vorwärts geht. Sie rutschte in eine zweite Zeile, der Kopf war 154 statt
76 px hoch. Derselbe Mechanismus wie beim Spenden-Modul. */
.nrv-kopf-kompakt .nrv-marke {
grid-column: 1;
grid-row: 1;
justify-content: flex-start;
padding-block: 0.6875rem;
gap: 0;
}
.nrv-kopf-kompakt .nrv-marke .wp-block-site-title {
display: none;
}
/* Die Wort-Bild-Marke liegt bei 3,68 : 1 – eine Breitenangabe von 46 px wie
beim früheren Wappen ergäbe hier 12 px Höhe. Im kompakten Kopf zählt die
Höhe, nicht die Breite. */
/* Im kompakten Kopf steht links der **Stander**, nicht die Wort-Bild-Marke:
Bei 34 px Höhe ist deren Schriftzug ohnehin nicht mehr zu lesen, und der
Stander ist das Zeichen, das der Verein auch im Browser-Tab führt. Von
Bene gewünscht („Wie im Favicon").
Das Seitenlogo bleibt im Markup und trägt den vollen Kopf; `display: none`
nimmt es im kompakten Zustand auch aus der Vorlesereihenfolge, sodass von
den beiden Startseiten-Verweisen immer nur einer zählt. */
.nrv-kopf-kompakt .nrv-marke .wp-block-site-logo {
display: none;
}
/* --- Der Stander ------------------------------------------------------- */
.nrv-marke-stander {
display: none;
line-height: 0;
flex: 0 0 auto;
}
.nrv-marke-stander img {
display: block;
width: auto;
height: 40px;
}
.nrv-kopf-kompakt .nrv-marke-stander {
display: block;
}
/* Im kompakten Kopf zeigt der Artboard „Navigation-Sticky" den Knopf weiter.
Die Servicezeile ist dort über das negative `top` des Headers hinaus-
geschoben, der Knopf also außer Sicht. Er wird deshalb aus ihrem Fluss
genommen und rechts in die kompakte Zeile gesetzt – Bezugspunkt ist der
klebende Header selbst (`position: sticky` erzeugt ihn, siehe Abschnitt
„Sticky gehört auf das header-Element"). */
/* Im kompakten Kopf hat die Linie keine Aufgabe – dort steht die Navigation
neben Wappen und Knopf, nicht darunter. Als viertes Kind des Grids bekam
sie eine eigene Zelle und stand als 100 px langer Strich quer in der
Zeile. `display: none` statt `border: 0`, sonst bleibt die leere Zelle
und verschiebt die Spalten. */
.nrv-kopf-kompakt .nrv-kopf-trenner {
display: none;
}
/* **Nur ab 1200 px.** Darunter übernimmt der Menü-Knopf des Navigations-
blocks die rechte Seite der Kopfzeile – gemessen auf einer Artikelseite bei
716 px: Der Knopf lag auf 535–685, „MENÜ" auf 503–590, also mittendrin.
Oberhalb steht die Navigation mittig und rechts ist Platz. Darunter bleibt
der Knopf, wo er hingehört: in der Servicezeile. */
@media (min-width: 1200px) {
.nrv-kopf-kompakt .nrv-service-rechts > .nrv-kopf-cta {
position: absolute;
z-index: 4;
right: clamp(1rem, 4vw, 4.5rem);
top: calc(var(--nrv-servicezeile, 60px) + 50%);
transform: translateY(-50%);
}
}
.nrv-kopf-kompakt .nrv-kopf > .wp-block-navigation {
grid-column: 2;
grid-row: 1;
border-top: 0;
margin-inline: 0;
min-height: 0;
}
/* Der Knopf liegt im DOM in der mittleren Gruppe, soll aber in die dritte
Spalte. Grid greift nur auf direkte Kinder – deshalb wird die Gruppe im
kompakten Zustand selbst zum Raster und reicht den Knopf nach rechts
durch. */
.nrv-kopf-kompakt .nrv-kopf-mitte {
display: contents;
}
/* ---------------------------------------------------------------------------
Schmale Fenster: eine Zeile, Marke links, Menü rechts
Der Artboard „Mobil · Seite mit mitlaufender Leiste" zeigt 76 px mit Wappen
und Wortmarke links und dem Menüsymbol rechts – ohne Servicezeile. Deren
Inhalte liegen im geöffneten Menü.
**Hier weiche ich ab und behalte die Servicezeile.** Der Navigationsblock
von WordPress nimmt kein Suchfeld auf; ganz ausgeblendet gäbe es auf dem
Telefon keine Suche mehr. Sie bleibt deshalb stehen, reduziert auf Suchfeld
und Login – Sozialsymbole und Spenden stehen ohnehin im Fußbereich.
--------------------------------------------------------------------------- */
@media (max-width: 1200px) {
.nrv-kopf > .nrv-marke {
padding-block: 1rem 0.875rem;
}
.nrv-kopf > .wp-block-navigation {
border-top: 0;
margin-inline: 0;
min-height: 0;
}
/* Unter dem Umbruchpunkt steht ohnehin das Overlay – ein zweiter
Zustand wäre ein zweiter Satz Regeln ohne Gewinn. */
.nrv-kopf-kompakt .nrv-kopf {
display: block;
min-height: 0;
}
.nrv-kopf-kompakt .nrv-kopf-mitte {
display: block;
position: relative;
}
.nrv-kopf-kompakt .nrv-marke .wp-block-site-title {
display: block;
}
}
/* 30.1 Kopf unter dem Umbruchpunkt ---------------------------------------- */
@media (max-width: 1200px) {
/* Marke links, Menüknopf rechts – eine Zeile statt drei gestapelter
Blöcke. Ohne diese Regel stand die Marke mittig und darunter
„Mitglied werden" und „Menü" untereinander. */
.nrv-kopf > .wp-block-group,
.nrv-kopf {
position: relative;
}
.nrv-kopf .nrv-kopf-mitte {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
}
.nrv-kopf-mitte > .nrv-marke {
justify-content: flex-start;
flex: 1 1 auto;
min-width: 0;
}
.nrv-service-rechts > .nrv-kopf-cta {
flex: 0 0 auto;
}
/* Der Umschaltknopf des Navigationsblocks sitzt im Block selbst. Damit er
neben die Marke kommt, rückt die Navigation in dieselbe Zeile.
**Senkrecht zentriert über `inset-block` und `align-items`, nicht über
`transform`.** Ein Vorfahre mit `transform` wird zum Bezugspunkt für
`position: fixed` – und das Overlay-Menü von WordPress ist genau das.
Mit `translateY(-50%)` bezog sein `inset: 0` sich auf die Navigation
statt auf das Fenster: Gemessen stand das geöffnete Menü als 72 px
hoher Kasten bei y = 176, während seine 61 Verweise bis y = 3479
darunter hinausliefen. Es gab also keine Fläche hinter dem Menü.
Derselbe Mechanismus trifft `position: sticky` nicht – deshalb ist das
erst beim Prüfen des Overlays aufgefallen, nicht beim Kopf. */
.nrv-kopf > .wp-block-navigation {
position: absolute;
right: var(--nrv-rand, 1.5rem);
inset-block: 0;
display: flex;
align-items: center;
margin: 0;
}
}
@media (max-width: 780px) {
/* Sozialsymbole und Spenden raus – beides steht im Fußbereich. Übrig
bleiben Suche und Login, und damit passt die Zeile wieder in eine.
Der Selektor nennt die Servicezeile mit: WordPress liefert für
Layout-Blöcke `.wp-block-social-links.is-layout-flex { display: flex }`
– zwei Klassen. Eine einklassige Regel verliert dagegen, und die
Symbole blieben trotz greifender Media Query stehen. Dritter Fall
dieser Art an einem Tag; **jede eigene `display`-Regel auf einem
WordPress-Block braucht mindestens zwei Klassen.** */
.nrv-servicezeile .nrv-social,
.nrv-servicezeile .nrv-service-spenden {
display: none;
}
.nrv-servicezeile > .wp-block-group {
flex-wrap: nowrap;
padding-block: 0.5rem;
}
:root {
--nrv-servicezeile-hoehe: 52px;
}
/* **Umbrechen erlauben.** Seit der Knopf „Mitglied werden" in der
Servicezeile steht (v2.22.4, wie im Entwurf), brauchen Login, Suche und
Knopf bei 375 px zusammen rund 385 px plus Fugen – gemessener Überlauf
138 px. Das Markup setzt `flexWrap: nowrap`, deshalb hier `!important`:
Es schlägt keine eigene Regel, sondern die generierte Layout-Regel des
Group-Blocks. Der Knopf rückt dadurch in eine zweite Zeile und läuft
über die volle Breite – auf dem Telefon die bessere Klickfläche als ein
gequetschter Knopf neben zwei anderen Bedienelementen. */
.nrv-service-rechts {
width: 100%;
flex-wrap: wrap !important;
justify-content: space-between;
row-gap: 0.625rem;
}
.nrv-service-rechts > .nrv-kopf-cta {
flex-basis: 100%;
}
.nrv-service-rechts > .nrv-kopf-cta .wp-block-button,
.nrv-service-rechts > .nrv-kopf-cta .wp-block-button__link {
width: 100%;
justify-content: center;
}
.nrv-servicezeile .nrv-suche {
width: min(220px, 55vw);
order: 0;
flex-basis: auto;
}
.nrv-service-login a {
white-space: nowrap;
}
/* „Mitglied werden" ist auf dem Telefon der breiteste Einzelposten neben
dem Menüknopf. Er bleibt, rückt aber enger. */
.nrv-kopf-cta .wp-element-button {
font-size: 0.75rem;
padding-inline: 0.875rem;
}
}
@media (max-width: 560px) {
/* „MITGLIEDER-LOGIN" braucht in Versalien mit 0,16 em Sperrsatz rund
160 px. Mit dem Suchfeld daneben lief die Zeile bei 375 px um 70 px
über den Rand – gemessen scrollWidth 445. Weniger Sperrsatz und eine
Stufe kleiner bringen es auf rund 120 px. */
/* „Mitglieder-Login" misst in Versalien 163 px und sprengt die Zeile neben
dem Suchfeld – kleiner setzen reichte nicht. Deshalb dieselbe Technik
wie bei der Wortmarke: Die Vorsilbe verschwindet, „Login" bleibt. */
.nrv-login-lang {
display: none;
}
.nrv-service-login a {
letter-spacing: 0.08em;
}
.nrv-servicezeile .nrv-suche {
width: min(170px, 45vw);
}
}
@media (max-width: 520px) {
/* Unter 520 px tragen Marke, Knopf und Menü nicht mehr nebeneinander.
Der Knopf weicht – er steht im geöffneten Menü weiterhin. */
.nrv-kopf .nrv-service-rechts > .nrv-kopf-cta {
display: none;
}
.nrv-marke .wp-block-site-title a {
font-size: 1.125rem;
}
}
/* ==========================================================================
31. Über uns (v2.10)
--------------------------------------------------------------------------
Nach dem Artboard „Über uns · Desktop" (1440 × 5923): Aufmacher mit Bild,
Sprungnavigation, drei Abschnitte (Das sind wir, Vorstand und Gremien,
Unser Clubhaus) und vier Weiterführungen.
Alle Texte stammen aus den Redaktionsseiten; aufgebaut über
`skripte/ueber-uns-bauen.php`.
========================================================================== */
/* 31.1 Baustein „Seitenkopf mit Bild" (Canvas-Stand 15.10.2026)
Der erste der elf Bausteine aus Jasmines Abgleich vom 26.10.2026. Fünf von
sechs geprüften Artboards nutzen genau diesen Aufbau, Maße aus
`Trainer.dc.html`, `Jobs.dc.html`, `Reviere.dc.html`, `Stiftungs-GYM.dc.html`
und `Ueber-uns.dc.html`:
Bühne 560 px über die volle Breite, Bild formatfüllend;
unten links eine WEISSE Textkarte, 760 px breit, 80 px vom linken Rand,
Innenabstand 48/56/40/0, darin Kicker, h1 54 px und eine kursive
Unterzeile 24 px, dazu bis zu drei Knöpfe.
**Das ist ein Gestaltungswechsel, kein Feinschliff.** Bis v3.27.1 stand der
Text WEISS IM BILD auf einem Navy-Verlauf. Die weiße Karte ist in zweierlei
Hinsicht besser: Der Kontrast hängt nicht mehr am Motiv – Navy auf Weiß
ergibt 14,4:1 unabhängig vom Bild –, und die Kontrastmessung kann ihn
wieder prüfen. Bei Text auf einem Verlauf musste er gerechnet werden, weil
`background-color` einen Verlauf nicht kennt.
Die linke Kante trifft das Raster: Bei 1440 px ergibt
`(100% − 1280px) / 2` genau die 80 px des Entwurfs. */
.nrv-kopfbild {
position: relative;
margin-block: 0 clamp(2rem, 4vw, 3.5rem);
}
/* Die Bühne läuft randlos, der Entwurf setzt sie über die volle Breite.
`align: full` allein genügt nicht: `wp:post-content` in `page.html` trägt
selbst nur `align: wide`, und ein `alignfull` darin wird nie breiter als
sein Container – gemessen 1280 statt 1440 px. Den Container auf `full` zu
stellen war am 13.10. der falsche Weg (danach waren ALLE Blöcke 1837 px
breit und die Wide-Size griff nirgends mehr).
Deshalb bricht die Bühne selbst aus. `100vw` schließt eine sichtbare
Scrollbar mit ein und erzeugt dann waagerechten Überlauf – darum die
Begrenzung auf die Breite des Dokuments. */
.nrv-kopfbild.nrv-kopfbild {
width: var( --nrv-fensterbreite, 100vw );
max-width: var( --nrv-fensterbreite, 100vw );
margin-inline: calc( 50% - var( --nrv-fensterbreite, 100vw ) / 2 );
}
/* `100vw` schließt eine sichtbare Scrollbar MIT EIN – gemessen 1440 gegen
1425 px Dokumentbreite. Die Bühne stand dadurch 7 px zu weit links, die
Textkarte landete bei 73 statt bei den 80 px des Entwurfs, und die Seite
ließ sich waagerecht schieben.
`overflow-x: clip` am body half nicht (der overflow des body wird auf den
Viewport propagiert, wenn am html `visible` steht) und am html ebenso
wenig – nachgemessen blieb `scrollX` bei 7,5. In CSS ist die
Scrollbarbreite nicht zu erfahren.
`navigation.js` setzt deshalb `--nrv-fensterbreite` aus
`documentElement.clientWidth` und misst bei jedem `resize` neu. Der
Rückfall `100vw` gilt nur, bis das Skript gelaufen ist. */
.nrv-kopfbild-foto {
margin: 0;
}
/* Zwei Klassen im Selektor, sonst gewinnt WordPress' `.wp-block-image img
{ height: auto }` bei gleicher Spezifität über die Ladereihenfolge –
gemessen 853 statt 260 px. Dieselbe Stelle wie bei Sozialsymbolen,
Spenden-Modul, kompaktem Kopf, Servicezeile und Suchfeld-Platzhalter. */
.nrv-kopfbild .nrv-kopfbild-foto img {
display: block;
width: 100%;
height: 260px;
object-fit: cover;
}
/* Mobil ist die Karte keine Karte, sondern steht unter dem Bild – so der
Artboard `Reviere-mobil.dc.html`: Bild 260 px, darunter 28/20/8 Innenabstand
und 14 px Fuge. Ein Overlay auf 375 px Breite ließe vom Motiv nichts übrig. */
.nrv-kopfbild-text {
background: var(--wp--preset--color--weiss);
padding: 1.75rem 1.25rem 0.5rem;
display: flex;
flex-direction: column;
gap: 0.875rem;
margin-block: 0;
}
/* blockGap liefert `> * + * { margin-block-start }` – im Flex-Container
verschiebt das jedes Kind außer dem ersten. Zum wiederholten Mal dieselbe
Stelle. */
.nrv-kopfbild-text > * { margin-block: 0; }
/* Größe, Gewicht und Zeilenhöhe stehen in Abschnitt 56 (Typografie gegen die
Spezifikation) und werden hier bewusst NICHT wiederholt – sonst gäbe es
zwei Quellen für denselben Wert. Hier nur, was den Baustein ausmacht. */
.nrv-kopfbild-titel {
font-family: var(--wp--preset--font-family--cormorant-garamond);
color: var(--wp--preset--color--navy);
max-width: 24ch;
}
.nrv-kopfbild-unter {
font-family: var(--wp--preset--font-family--cormorant-garamond);
font-size: 1.25rem;
font-style: italic;
line-height: 1.2;
font-weight: 400;
color: var(--wp--preset--color--navy);
max-width: 40ch;
}
/* Bis zu drei Knöpfe, gefüllt oder umrandet. */
.nrv-kopfbild-knoepfe {
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
margin-top: 0.5rem !important;
}
@media (min-width: 900px) {
.nrv-kopfbild {
height: 560px;
}
.nrv-kopfbild .nrv-kopfbild-foto,
.nrv-kopfbild .nrv-kopfbild-foto img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
}
.nrv-kopfbild-text {
position: absolute;
/* Trifft bei 1440 px genau die 80 px des Entwurfs. Gerechnet wird gegen
die Bühne, und die ist seit dem Full-Bleed so breit wie das Fenster. */
left: max(1.5rem, calc((100% - 1280px) / 2));
bottom: 0;
width: min(760px, calc(100% - 10rem));
padding: 3rem 3.5rem 2.5rem 0;
gap: 1rem;
}
.nrv-kopfbild-unter { font-size: 1.5rem; }
}
/* 31.3 Abschnitte */
.nrv-ueber-abschnitt {
margin-block: 0 clamp(3rem, 6vw, 5rem);
}
/* **Der seitliche Innenabstand fehlte.**
*
* Mit `padding-block` allein stand die getönte Fläche exakt an der Textkontur:
* Überschrift und Karten klebten an ihrer linken Kante, und was ein abgesetzter
* Abschnitt sein sollte, sah aus wie ein Balken hinter dem Text.
*
* Das ist derselbe Befund wie beim Newsraster (v2.6.3), nur umgekehrt: Dort
* war eine Fläche **ohne** Innenabstand fälschlich eine Karte, hier fehlt einer
* Fläche **mit** Absicht der Abstand. Das Unterscheidungsmerkmal bleibt
* dasselbe. Der Artboard „Über uns · Desktop" setzt `padding: 96px 80px`. */
.nrv-ueber-grau {
background: var(--wp--preset--color--flaeche);
padding: clamp(2.5rem, 5vw, 4rem) clamp(1.5rem, 4vw, 5rem);
}
.nrv-ueber-titel {
font-family: var(--wp--preset--font-family--cormorant-garamond);
font-size: clamp(1.75rem, 3vw, 2.4rem);
font-weight: 500;
line-height: 1.1;
margin-block: 0 1.25rem;
scroll-margin-top: 180px;
}
.nrv-ueber-untertitel {
font-family: var(--wp--preset--font-family--cormorant-garamond);
font-size: clamp(1.25rem, 2vw, 1.6rem);
font-weight: 600;
margin-block: 2rem 1rem;
}
/* 31.4 Kennzahlen */
.nrv-kennzahlen {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 1px;
background: var(--wp--preset--color--linie);
border-block: 1px solid var(--wp--preset--color--linie);
margin-block: clamp(2rem, 4vw, 3rem);
}
.nrv-kennzahlen > *,
.nrv-kennzahl > * { margin-block: 0; }
.nrv-kennzahl {
background: var(--wp--preset--color--weiss);
padding: 1.5rem 1.25rem;
}
.nrv-kennzahl-wert {
font-family: var(--wp--preset--font-family--cormorant-garamond);
font-size: clamp(2rem, 3.4vw, 2.75rem);
font-weight: 500;
line-height: 1;
}
.nrv-kennzahl-text {
font-size: 0.9375rem;
line-height: 1.45;
color: var(--wp--preset--color--grau);
margin-block-start: 0.5rem;
}
/* Auf getöntem Grund müssen die Felder heller sein als die Fläche, sonst
verschwindet das Raster. */
.nrv-ueber-grau .nrv-kennzahl {
background: var(--wp--preset--color--weiss);
}
/* 31.5 Drei Bildkarten */
.nrv-ueber-karten {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: clamp(1.5rem, 3vw, 2.5rem);
margin-block: clamp(2rem, 4vw, 3rem) 0;
}
.nrv-ueber-karten > *,
.nrv-ueber-karte > * { margin-block: 0; }
.nrv-ueber-karte {
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.nrv-ueber-karte-bild {
margin: 0;
overflow: hidden;
}
.nrv-ueber-karte-bild img {
display: block;
width: 100%;
height: auto;
aspect-ratio: 3 / 2;
object-fit: cover;
}
.nrv-ueber-karte-titel {
font-family: var(--wp--preset--font-family--cormorant-garamond);
font-size: 1.375rem;
font-weight: 600;
line-height: 1.2;
margin-block: 0;
}
.nrv-ueber-karte p {
font-size: 1rem;
line-height: 1.55;
}
/* 31.6 Chronik der Clubhäuser */
.nrv-chronik {
border-top: 1px solid var(--wp--preset--color--linie);
margin-block: 1.25rem 0;
}
.nrv-chronik > * { margin-block: 0; }
.nrv-chronik-zeile {
display: grid;
grid-template-columns: 6rem minmax(0, 1fr);
gap: 0 1.5rem;
padding-block: 0.875rem;
border-bottom: 1px solid var(--wp--preset--color--linie);
}
.nrv-chronik-zeile > * { margin-block: 0; }
.nrv-chronik-jahr {
font-family: var(--wp--preset--font-family--manrope);
font-size: 0.9375rem;
font-weight: 700;
letter-spacing: 0.04em;
}
.nrv-chronik-text {
font-size: 1rem;
line-height: 1.5;
}
.nrv-haus-liste {
margin-block: 0.75rem 1.25rem;
padding-left: 1.125rem;
line-height: 1.7;
}
/* 31.7 Weiterführungen */
.nrv-wf-karten {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
gap: clamp(1.25rem, 2.5vw, 2rem);
margin-block: clamp(1.5rem, 3vw, 2.5rem) 0;
}
.nrv-wf-karten > *,
.nrv-wf-karte > * { margin-block: 0; }
.nrv-wf-karte {
display: flex;
flex-direction: column;
gap: 0.5rem;
background: var(--wp--preset--color--weiss);
padding: 1.5rem 1.375rem;
}
.nrv-wf-karte-titel {
font-family: var(--wp--preset--font-family--cormorant-garamond);
font-weight: 600;
line-height: 1.2;
margin-block: 0.25rem 0;
}
.nrv-wf-karte p:not(.nrv-label):not(.nrv-cta) {
font-size: 0.9375rem;
line-height: 1.5;
}
@media (max-width: 860px) {
/* Der Seitenkopf braucht hier nichts mehr: Seit v3.28.0 ist die gestapelte
Fassung der Normalfall und das Overlay die Ausnahme ab 900 px. */
.nrv-chronik-zeile {
grid-template-columns: 4.5rem minmax(0, 1fr);
gap: 0 1rem;
}
}
/* Seiten mit eigenem Aufmacher tragen ihren Titel im Bild. Der Titel aus
`templates/page.html` stünde darüber ein zweites Mal – auf „Über uns"
gemessen: „Über uns" als Seitentitel, „ÜBER UNS" als Marke im Bild und
darunter die Zeile des Entwurfs. `:has()` greift auf den Container, nicht
auf die Seite, und bleibt damit auf genau diese Seiten beschränkt. */
/* `.nrv-seitenkopf` ergänzt am 13.10.2026: Diese Seiten tragen ihren Titel
als `h1` im Inhalt, damit er neben der Einleitung stehen kann. Der Titel
aus `page.html` stünde sonst zusätzlich darüber – auf `/nrv-shop/` stand
„NRV Shop" über „Fürs Wasser. Für den Club. Zum Verschenken.". */
/* Nur der SEITENTITEL wird ausgeblendet, nicht jeder Beitragstitel.
`body:has(…) .wp-block-post-title` traf auch die Titel in Query-Blöcken –
im Modul „Nachrichten aus …" blieben alle drei Überschriften unsichtbar
(display: none, gemessen 0 × 0 px). Der Seitentitel ist ein direktes Kind
von main; die Titel der Beitragsliste stecken in .wp-block-post-template. */
/* Seit v3.27.0 entfernt `nrv_andreaskreuz_seitentitel_unterdruecken()` in der
functions.php den Block ganz, statt ihn hier auszublenden: `display: none`
nimmt ihn dem Auge, nicht dem Dokument – 15 von 20 Seiten trugen dadurch
zwei `h1`. Die Regel bleibt als Rückfall für den Editor, wo der Filter beim
Vorschaurendern nicht greift. */
body:has(.nrv-kopfbild) main > .wp-block-post-title,
body:has(.nrv-seitenkopf) main > .wp-block-post-title {
display: none;
}
/* ==========================================================================
32. Erfolge (v2.10.2)
--------------------------------------------------------------------------
Nach dem Artboard „Erfolge · Desktop" (1440 × 6323). Vier nummerierte
Abschnitte, dazu das Medaillenvisual, das Jasmines Briefing als
Gestaltungsauftrag notiert hatte – mit der Vorgabe, olympische und
paralympische Leistungen **gleichwertig** zu zeigen. Umgesetzt als zwei
gleich gebaute Tafeln nebeneinander, nicht als Haupt- und Nebenliste.
Aufbau über `skripte/erfolge-bauen.php`.
========================================================================== */
.nrv-erfolge-kopf {
margin-block: 0 clamp(2.5rem, 5vw, 4rem);
}
.nrv-erfolge-kopf > * { margin-block: 0; }
.nrv-erfolge-sprung {
padding-block: 1rem;
border-block: 1px solid var(--wp--preset--color--linie);
margin-block: clamp(1.5rem, 3vw, 2.5rem) 0;
}
/* 32.1 Der Nachwuchsweg als Stufenfolge */
.nrv-stufen {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
gap: 1px;
background: var(--wp--preset--color--linie);
border: 1px solid var(--wp--preset--color--linie);
margin-block: clamp(1.5rem, 3vw, 2.5rem);
}
.nrv-stufen > *,
.nrv-stufe > * { margin-block: 0; }
.nrv-stufe {
background: var(--wp--preset--color--weiss);
padding: 1.25rem 1.125rem;
display: flex;
flex-direction: column;
gap: 0.375rem;
}
.nrv-stufe-marke {
font-family: var(--wp--preset--font-family--manrope);
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--wp--preset--color--grau);
}
.nrv-stufe-titel {
font-family: var(--wp--preset--font-family--cormorant-garamond);
font-size: 1.1875rem;
font-weight: 600;
line-height: 1.2;
}
.nrv-stufe-text {
font-size: 0.875rem;
line-height: 1.45;
color: var(--wp--preset--color--grau);
}
/* 32.2 Medaillenvisual
Zwei Tafeln, gleich breit und gleich gebaut. Der Rang steht als Wort, nicht
als Farbfläche: Gold, Silber und Bronze unterscheiden sich im Druck wie auf
dem Bildschirm zu wenig, und eine reine Farbcodierung wäre für
Farbfehlsichtige keine Information. */
.nrv-medaillen {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: clamp(1.5rem, 3vw, 2.5rem);
margin-block: clamp(1.5rem, 3vw, 2.5rem);
}
.nrv-medaillen > *,
.nrv-medaillen-tafel > * { margin-block: 0; }
.nrv-medaillen-tafel {
background: var(--wp--preset--color--weiss);
padding: clamp(1.25rem, 2.5vw, 1.75rem);
}
.nrv-medaillen-titel {
font-family: var(--wp--preset--font-family--cormorant-garamond);
font-size: 1.375rem;
font-weight: 600;
margin-block: 0;
}
.nrv-medaillen-unter {
font-size: 0.875rem;
color: var(--wp--preset--color--grau);
margin-block: 0.25rem 1.125rem;
padding-bottom: 0.875rem;
border-bottom: 1px solid var(--wp--preset--color--linie);
}
.nrv-medaille {
display: grid;
grid-template-columns: 5.25rem minmax(0, 1fr);
gap: 0 1rem;
padding-block: 0.75rem;
border-bottom: 1px solid var(--wp--preset--color--linie);
}
.nrv-medaille > * { margin-block: 0; }
.nrv-medaille-rang {
grid-column: 1;
grid-row: 1 / span 2;
font-family: var(--wp--preset--font-family--manrope);
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
padding-top: 0.25rem;
}
/* Der Rang wird zusätzlich durch einen Strich unterschiedlicher Stärke
markiert – eine zweite Unterscheidung neben dem Wort, ohne Farbe. */
.nrv-medaille-rang::before {
content: "";
display: block;
width: 2rem;
margin-bottom: 0.4375rem;
border-top: 3px solid var(--wp--preset--color--navy);
}
.nrv-medaille-silber .nrv-medaille-rang::before { border-top-width: 2px; }
.nrv-medaille-bronze .nrv-medaille-rang::before { border-top-width: 1px; }
.nrv-medaille-name {
grid-column: 2;
grid-row: 1;
font-weight: 700;
font-size: 1rem;
line-height: 1.3;
}
.nrv-medaille-detail {
grid-column: 2;
grid-row: 2;
font-size: 0.875rem;
line-height: 1.45;
color: var(--wp--preset--color--grau);
margin-block-start: 0.125rem;
}
.nrv-wm-zeile {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 0.5rem 1.5rem;
padding: 1rem 0;
border-block: 1px solid var(--wp--preset--color--linie);
margin-block: 0 1.5rem;
}
.nrv-wm-zeile > * { margin-block: 0; }
.nrv-wm-text { font-size: 1.0625rem; }
/* 32.3 Saisonstrahl der Bundesliga */
.nrv-saisons {
display: grid;
grid-template-columns: repeat(13, minmax(0, 1fr));
gap: 2px;
margin-block: clamp(1.5rem, 3vw, 2.5rem) 0.75rem;
}
.nrv-saisons > *,
.nrv-saison > * { margin-block: 0; }
.nrv-saison {
background: var(--wp--preset--color--flaeche);
padding: 0.875rem 0.25rem 0.625rem;
text-align: center;
}
.nrv-saison-meister { background: var(--wp--preset--color--navy); }
.nrv-saison-marke {
font-size: 0.875rem;
line-height: 1;
min-height: 1rem;
color: var(--wp--preset--color--grau);
}
.nrv-saison-jahr {
font-family: var(--wp--preset--font-family--manrope);
font-size: 0.75rem;
font-weight: 600;
letter-spacing: 0.02em;
margin-block-start: 0.375rem;
}
.nrv-saison-meister .nrv-saison-marke,
.nrv-saison-meister .nrv-saison-jahr {
color: var(--wp--preset--color--weiss);
}
.nrv-saison-legende {
display: flex;
flex-wrap: wrap;
gap: 0.5rem 1.5rem;
font-size: 0.8125rem;
color: var(--wp--preset--color--grau);
margin-block: 0 clamp(1.5rem, 3vw, 2.5rem);
}
.nrv-triples {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 1.5rem;
margin-block: 0 1.5rem;
}
.nrv-triples > *,
.nrv-triple > * { margin-block: 0; }
.nrv-triple {
border-left: 2px solid var(--wp--preset--color--navy);
padding-left: 1.125rem;
}
.nrv-triple-jahr {
font-family: var(--wp--preset--font-family--manrope);
font-size: 0.8125rem;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
margin-block: 0 0.5rem;
}
.nrv-triple ul {
margin: 0;
padding-left: 1.125rem;
font-size: 0.9375rem;
line-height: 1.6;
}
/* 32.4 Eignerkampagnen */
.nrv-boote {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
gap: clamp(1.25rem, 2.5vw, 2rem);
margin-block: clamp(1.5rem, 3vw, 2.5rem);
}
.nrv-boote > *,
.nrv-boot > * { margin-block: 0; }
.nrv-boot {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.nrv-boot-bild {
margin: 0;
overflow: hidden;
}
.nrv-boot-bild img {
display: block;
width: 100%;
height: auto;
aspect-ratio: 4 / 3;
object-fit: cover;
}
.nrv-boot-name {
font-family: var(--wp--preset--font-family--cormorant-garamond);
font-size: 1.375rem;
font-weight: 600;
line-height: 1.15;
margin-block: 0;
}
.nrv-boot-text {
font-size: 0.9375rem;
line-height: 1.5;
color: var(--wp--preset--color--grau);
}
@media (max-width: 860px) {
/* Dreizehn Saisons nebeneinander ergeben auf dem Telefon 24-px-Spalten –
die Jahreszahl passt dort nicht hinein. Zwei Reihen statt einer. */
.nrv-saisons {
grid-template-columns: repeat(7, minmax(0, 1fr));
}
.nrv-medaille {
grid-template-columns: minmax(0, 1fr);
}
.nrv-medaille-rang,
.nrv-medaille-name,
.nrv-medaille-detail {
grid-column: 1;
grid-row: auto;
}
}
/* ==========================================================================
33. Partner und Partnerclubs (v2.11)
--------------------------------------------------------------------------
Nach den Artboards „Partner des NRV" (1440 × 4373) und „Partnerclubs ·
Weltkarte" (1440 × 5123). Die Weltkarte fehlt – siehe CLAUDE.md, die
Koordinaten gibt es im Bestand nicht. An ihrer Stelle steht die
Ländergliederung aus den 80 Datenblättern.
Aufbau über `skripte/partner-bauen.php` und `partnerclubs-bauen.php`.
========================================================================== */
/* 33.1 Vier Nutzenmodule */
/* **Feste vier Spalten, nicht `auto-fit`.** Bei 1128 px Inhaltsbreite und
40 px Fuge braucht eine vierte Spalte 1160 px – `minmax(260px, 1fr)` legt
deshalb nur drei an, und der vierte Punkt steht allein in einer zweiten
Reihe. Bei vier gleichwertigen Aussagen sieht das nach Fehler aus.
Derselbe Fall wie bei der H.E.A.T-Crew (v2.16.6): Steht die Zahl der
Elemente fest, gehört die Spaltenzahl fest gesetzt. */
.nrv-nutzen {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: clamp(1.5rem, 3vw, 2.5rem);
margin-block: clamp(1.5rem, 3vw, 2.5rem) 0;
}
@media (max-width: 1100px) {
.nrv-nutzen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
.nrv-nutzen { grid-template-columns: minmax(0, 1fr); }
}
.nrv-nutzen > *,
.nrv-nutzen-modul > * { margin-block: 0; }
.nrv-nutzen-modul {
display: flex;
flex-direction: column;
gap: 0.5rem;
border-top: 2px solid var(--wp--preset--color--navy);
padding-top: 1rem;
}
.nrv-nutzen-titel {
font-family: var(--wp--preset--font-family--cormorant-garamond);
font-size: 1.25rem;
font-weight: 600;
line-height: 1.25;
margin-block: 0.25rem 0;
}
.nrv-nutzen-modul p:last-child {
font-size: 0.9375rem;
line-height: 1.55;
}
/* 33.2 Partnerschaftsgeschichte: Bild und Text nebeneinander */
.nrv-geschichte {
display: grid;
grid-template-columns: 1.15fr 1fr;
gap: clamp(1.5rem, 3vw, 3rem);
align-items: center;
margin-block: clamp(1.5rem, 3vw, 2.5rem) 0;
}
.nrv-geschichte > *,
.nrv-geschichte-text > * { margin-block: 0; }
.nrv-geschichte-bild { margin: 0; overflow: hidden; }
.nrv-geschichte-bild img {
display: block;
width: 100%;
height: auto;
aspect-ratio: 3 / 2;
object-fit: cover;
}
.nrv-geschichte-text {
display: flex;
flex-direction: column;
gap: 0.625rem;
}
.nrv-geschichte-titel {
font-family: var(--wp--preset--font-family--cormorant-garamond);
font-size: clamp(1.375rem, 2.2vw, 1.75rem);
font-weight: 500;
line-height: 1.15;
margin-block: 0;
}
.nrv-massliste {
margin-block: 0.75rem 0;
padding-left: 1.125rem;
line-height: 1.8;
font-size: 1.0625rem;
}
/* 33.3 Logoraster
Die Logos kommen als farbige JPEG aus dem Craft-Bestand, mit weißem Grund
und unterschiedlichen Seitenverhältnissen. Der Entwurf zeigt sie
einheitlich monochrom – das ginge nur, indem die Dateien neu gesetzt
werden. Stattdessen sorgt eine gleich hohe Fläche mit `object-fit: contain`
dafür, dass sie in einer Reihe stehen, ohne dass eines das andere
erschlägt. */
.nrv-logos {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 1px;
background: var(--wp--preset--color--linie);
border: 1px solid var(--wp--preset--color--linie);
margin-block: clamp(1.5rem, 3vw, 2.5rem) 0;
}
.nrv-logos > * { margin-block: 0; }
.nrv-logo {
margin: 0;
background: var(--wp--preset--color--weiss);
display: flex;
align-items: center;
justify-content: center;
padding: 1.25rem 1rem;
min-height: 104px;
}
.nrv-logo img {
display: block;
max-width: 100%;
max-height: 64px;
width: auto;
height: auto;
object-fit: contain;
/* Leicht entsättigt, damit achtzehn Marken nebeneinander nicht als
Farbteppich wirken. Beim Zeigen volle Farbe – so bleibt erkennbar,
dass es anklickbare Marken sind. */
filter: grayscale(1);
opacity: 0.78;
transition: filter 0.2s ease, opacity 0.2s ease;
}
.nrv-logo:hover img {
filter: grayscale(0);
opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
.nrv-logo img { transition: none; }
}
/* 33.4 Ansprechpartner */
.nrv-ansprech {
background: var(--wp--preset--color--flaeche);
padding: clamp(1.5rem, 3vw, 2.5rem);
margin-block: clamp(1.5rem, 3vw, 2.5rem) 0;
}
.nrv-ansprech > *,
.nrv-ansprech-text > * { margin-block: 0; }
.nrv-ansprech-text {
display: flex;
flex-direction: column;
gap: 0.75rem;
max-width: 54ch;
}
.nrv-ueber-grau .nrv-ansprech {
background: var(--wp--preset--color--weiss);
}
/* 33.5 Länder der Partnerclubs */
.nrv-laender {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 1px;
background: var(--wp--preset--color--linie);
border: 1px solid var(--wp--preset--color--linie);
margin-block: clamp(1.5rem, 3vw, 2.5rem) 0;
}
.nrv-laender > *,
.nrv-land > * { margin-block: 0; }
.nrv-land {
background: var(--wp--preset--color--weiss);
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 0.75rem;
padding: 0.75rem 1rem;
}
.nrv-land-name {
font-size: 0.9375rem;
}
.nrv-land-zahl {
font-family: var(--wp--preset--font-family--manrope);
font-size: 0.9375rem;
font-weight: 700;
font-variant-numeric: tabular-nums;
}
@media (max-width: 760px) {
.nrv-geschichte {
grid-template-columns: minmax(0, 1fr);
}
}
/* ==========================================================================
34. Mitglied werden und Kinderschutz (v2.12)
--------------------------------------------------------------------------
Nach den Artboards „Mitglied werden" (1440 × 7063) und „Kinder- und
Jugendschutz" (1440 × 3773).
========================================================================== */
/* 34.1 Themenblöcke: Bild und Text im Wechsel */
/* Maße aus `Mitglied-werden.dc.html`: `repeat(2, minmax(0, 1fr))`, 80 px
Fuge, mittig. `minmax(0, 1fr)` statt `1fr 1fr` – sonst kann ein Kind mit
breitem Inhalt seine Spalte aufweiten, weil `1fr` eine Mindestbreite von
`auto` hat. */
.nrv-thema {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: clamp(1.5rem, 6vw, 5rem);
align-items: center;
}
.nrv-thema > *,
.nrv-thema-text > * { margin-block: 0; }
/* Jeder zweite Block spiegelt – das Bild wandert nach rechts. `order` statt
einer zweiten Grid-Definition, damit die Reihenfolge im Quelltext gleich
bleibt: Bild zuerst, dann Text. Für Screenreader ändert sich dadurch
nichts. */
.nrv-thema-gedreht .nrv-thema-bild { order: 2; }
.nrv-thema-bild { margin: 0; overflow: hidden; }
/* Der Entwurf setzt eine feste Höhe von 560 px, kein Seitenverhältnis: Bei
zwei gleich breiten Spalten entscheidet die Texthöhe sonst mit, und die
vier Module stünden unterschiedlich hoch. */
.nrv-thema-bild img,
.nrv-thema > figure img {
display: block;
width: 100%;
height: 560px;
object-fit: cover;
}
.nrv-thema-text {
display: flex;
flex-direction: column;
gap: 0.75rem;
}
/* Ohne eigene Schriftgröße: Das Modul hat weder Rahmen noch Fläche, ist
also kein Kasten – sein Titel folgt der Abschnitts-H2 in Abschnitt 56.
Zwei Angaben für denselben Wert laufen auseinander. */
.nrv-thema-titel {
font-family: var(--wp--preset--font-family--cormorant-garamond);
margin-block: 0.25rem 0;
}
/* `:not(.nrv-label)` wie bei `.nrv-gs-block`, `.nrv-teamkarte` und
`.nrv-rechts-karte`: Ein Kicker ist ein Absatz, und eine Modulregel mit
zwei Selektorteilen schlägt sonst `.nrv-label` mit seiner einen Klasse.
Gemessen stand der Kicker hier auf 16 px statt 13. */
.nrv-thema-text p:not(.nrv-label):not(.nrv-cta) { font-size: 1rem; line-height: 1.6; }
/* 34.2 Downloads */
.nrv-downloads {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
gap: clamp(1rem, 2vw, 1.5rem);
margin-block: clamp(1.5rem, 3vw, 2.5rem);
}
.nrv-downloads > *,
.nrv-download > * { margin-block: 0; }
.nrv-download {
display: flex;
flex-direction: column;
gap: 0.5rem;
background: var(--wp--preset--color--weiss);
border: 1px solid var(--wp--preset--color--linie);
padding: 1.375rem 1.25rem;
}
.nrv-download-titel {
font-family: var(--wp--preset--font-family--cormorant-garamond);
font-size: 1.1875rem;
font-weight: 600;
margin-block: 0;
}
.nrv-download-text {
font-size: 0.9375rem;
line-height: 1.45;
color: var(--wp--preset--color--grau);
flex: 1 1 auto;
}
.nrv-download-kontakt { background: var(--wp--preset--color--flaeche); }
/* 34.3 Kinderschutz: Ansprechpersonen
Intern und extern stehen in zwei Spalten mit sichtbarer Trennung. Das
Briefing verlangt die Trennung ausdrücklich – wer sich unabhängig beraten
lassen will, muss auf einen Blick sehen, welche Stelle nicht zum Club
gehört. */
.nrv-ks-titel {
font-family: var(--wp--preset--font-family--cormorant-garamond);
font-size: clamp(1.9rem, 3.6vw, 3rem);
font-weight: 500;
line-height: 1.08;
margin-block: 0.5rem 1.25rem;
}
.nrv-ks-spalten {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: clamp(1.5rem, 3vw, 2.5rem);
margin-block: clamp(1.5rem, 3vw, 2rem) 0;
}
.nrv-ks-spalten > *,
.nrv-ks-block > * { margin-block: 0; }
.nrv-ks-block {
background: var(--wp--preset--color--weiss);
padding: clamp(1.25rem, 2.5vw, 1.75rem);
display: flex;
flex-direction: column;
gap: 0.75rem;
}
/* Die interne Spalte trägt oben einen kräftigen Strich, die externe einen
feinen – eine Unterscheidung, die auch ohne Farbe trägt. */
.nrv-ks-intern { border-top: 3px solid var(--wp--preset--color--navy); }
.nrv-ks-extern { border-top: 1px solid var(--wp--preset--color--navy); }
.nrv-ks-einleitung {
font-size: 0.9375rem;
line-height: 1.55;
color: var(--wp--preset--color--grau);
}
.nrv-ks-rolle {
font-size: 0.875rem;
line-height: 1.4;
color: var(--wp--preset--color--grau);
margin-block: 0.125rem 0.375rem;
}
/* 34.4 Die neun Maßnahmen als Stufenmodul */
.nrv-ks-phase {
margin-block: clamp(1.5rem, 3vw, 2rem) 0;
}
.nrv-ks-phase > * { margin-block: 0; }
.nrv-ks-phase-marke {
font-family: var(--wp--preset--font-family--manrope);
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.16em;
text-transform: uppercase;
padding-bottom: 0.625rem;
border-bottom: 2px solid var(--wp--preset--color--navy);
margin-block-end: 1.25rem;
}
.nrv-ks-massnahmen {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
gap: clamp(1.25rem, 2.5vw, 2rem);
}
.nrv-ks-massnahmen > *,
.nrv-ks-massnahme > * { margin-block: 0; }
.nrv-ks-massnahme {
display: grid;
grid-template-columns: 2.5rem minmax(0, 1fr);
gap: 0 0.875rem;
align-items: start;
}
.nrv-ks-nummer {
grid-column: 1;
grid-row: 1 / span 2;
font-family: var(--wp--preset--font-family--manrope);
font-size: 1.125rem;
font-weight: 700;
color: var(--wp--preset--color--grau);
font-variant-numeric: tabular-nums;
}
.nrv-ks-massnahme-titel {
grid-column: 2;
grid-row: 1;
font-family: var(--wp--preset--font-family--cormorant-garamond);
font-size: 1.1875rem;
font-weight: 600;
line-height: 1.2;
margin-block: 0 0.375rem;
}
.nrv-ks-massnahme-text {
grid-column: 2;
grid-row: 2;
font-size: 0.9375rem;
line-height: 1.55;
}
@media (max-width: 760px) {
.nrv-thema {
grid-template-columns: minmax(0, 1fr);
}
/* Gespiegelt ergibt einspaltig keinen Sinn – das Bild gehört über den
Text, sonst steht es zwischen Titel und Fließtext. */
.nrv-thema-gedreht .nrv-thema-bild { order: 0; }
}
/* ====================================================================== */
/* 35. NRV Shop und Clubkollektion */
/* ====================================================================== */
/* 35.1 Zwei Wege zum Sortiment */
.nrv-shop-wege {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 1.5rem;
margin-block: 2.5rem 3.5rem;
}
/* blockGap setzt auf Geschwisterelemente einen oberen Außenabstand. Im Grid
verschiebt der die zweite Spalte nach unten – hier regelt gap die Abstände. */
.nrv-shop-wege > * { margin-block: 0; }
.nrv-shop-weg {
display: flex;
flex-direction: column;
background-color: var(--wp--preset--color--weiss);
border: 1px solid var(--wp--preset--color--linie);
padding: 2rem;
}
.nrv-shop-weg > * { margin-block: 0; margin-inline: 0; max-width: none; }
.nrv-shop-weg > * + * { margin-block-start: 0.75rem; }
.nrv-shop-weg h3 {
font-size: 1.5rem;
line-height: 1.2;
}
/* Der Knopf sitzt unten, damit beide Karten trotz ungleich langer Texte auf
derselben Höhe enden. */
.nrv-shop-weg .wp-block-buttons {
margin-block-start: auto;
padding-block-start: 1.25rem;
}
/* 35.2 Produktraster */
.nrv-produktraster {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 2rem 1.5rem;
margin-block: 2rem 3rem;
}
/* Ein Group-Block mit „constrained"-Layout gibt seinen Kindern
`margin-inline: auto` und `max-width: content-size`, dazu `has-global-padding`
seitlichen Innenabstand. Bei einem Grid- oder Flex-Item verhindern auto-Margins
das Strecken: Die Kachel bleibt so breit wie ihr Inhalt, und die Produktfotos
einer Zeile stehen unterschiedlich breit nebeneinander – gemessen 241 px neben
302 px. Es sieht nach einem Bildproblem aus und ist eine Layoutnebenwirkung.
Das Markup setzt deshalb `layout: default`. Diese Regeln fangen zusätzlich die
Kacheln ab, die jemand als Blockmuster von Hand einfügt – im Editor ist die
Voreinstellung wieder „constrained". */
.nrv-produktraster > *,
.nrv-shop-wege > *,
.nrv-koll-schritte > * {
margin-block: 0;
margin-inline: 0;
max-width: none;
}
.nrv-produkt.has-global-padding {
padding-inline: 0;
}
.nrv-produkt {
display: flex;
flex-direction: column;
}
.nrv-produkt > * {
margin-block: 0;
margin-inline: 0;
max-width: none;
}
/* Die Produktfotos sind auf Weiß freigestellt und haben unterschiedliche
Seitenverhältnisse – vom liegenden Stander bis zur stehenden Latzhose.
Deshalb `contain` statt `cover`: Ein beschnittenes Produkt ist unbrauchbar,
und ein einheitlicher Rahmen hält das Raster trotzdem ruhig.
Die weiße Fläche ist hier Absicht, kein Versehen wie im Newsraster: Sie hat
Innenabstand und trägt das Bild. Genau das unterscheidet eine Karte von
einem stehengebliebenen Hintergrund. */
.nrv-produkt-bild {
/* Ausdrücklich 100 %, nicht `align-self: stretch`: Eine Figure, deren Bild
schmaler ist als die Spalte, bleibt sonst auf der Bildbreite stehen – das
Bild misst sich an der Figure, die Figure am Bild. */
width: 100%;
box-sizing: border-box;
background-color: var(--wp--preset--color--weiss);
border: 1px solid var(--wp--preset--color--linie);
padding: 1.25rem;
margin-block-end: 0.875rem;
}
.nrv-produkt-bild img {
display: block;
width: 100%;
aspect-ratio: 1 / 1;
object-fit: contain;
}
.nrv-produkt-name {
font-family: var(--wp--preset--font-family--cormorant-garamond);
font-size: 1.25rem;
font-weight: 600;
line-height: 1.25;
margin-block-end: 0.375rem;
}
.nrv-produkt-preis {
font-family: var(--wp--preset--font-family--manrope);
font-size: 0.9375rem;
font-weight: 600;
letter-spacing: 0.02em;
}
/* Fehlt ein Preis, steht das als Hinweis da – gedämpft, nicht wie eine
Preisangabe. Geraten wird nichts. */
.nrv-produkt-preis-offen {
font-weight: 500;
font-style: italic;
color: var(--wp--preset--color--grau);
}
.nrv-produkt-varianten {
list-style: none;
padding-left: 0;
margin-block: 0;
font-size: 0.9375rem;
}
.nrv-produkt-varianten li {
display: flex;
justify-content: space-between;
gap: 1rem;
padding-block: 0.3125rem;
border-block-end: 1px solid var(--wp--preset--color--linie);
color: var(--wp--preset--color--grau);
}
.nrv-produkt-varianten li:last-child { border-block-end: 0; }
.nrv-produkt-varianten strong {
font-family: var(--wp--preset--font-family--manrope);
font-size: 0.875rem;
font-weight: 600;
color: var(--wp--preset--color--navy);
white-space: nowrap;
}
/* 35.3 Reservieren */
.nrv-shop-bestellen {
background-color: var(--wp--preset--color--flaeche);
padding: 2.5rem;
margin-block: 3rem 0;
}
.nrv-shop-bestellen > * { margin-block: 0; }
.nrv-shop-bestellen > * + * { margin-block-start: 1rem; }
.nrv-shop-kontaktliste {
list-style: none;
padding-left: 0;
max-width: 46rem;
}
.nrv-shop-kontaktliste li {
display: grid;
/* 14rem, nicht `max-content`: Jedes Listenelement ist ein eigenes Grid, bei
max-content bekommt also jede Zeile ihre eigene Spaltenbreite und die Werte
stehen nicht mehr untereinander – gemessen 52, 68 und 206 px. Die feste
Breite trägt das längste Label („Geschäftsstellenzeiten", 206 px in
Versalien) und hält die Werte auf einer Kante. */
grid-template-columns: 14rem minmax(0, 1fr);
gap: 1rem;
padding-block: 0.5rem;
border-block-end: 1px solid var(--wp--preset--color--linie);
}
.nrv-shop-kontaktliste li:last-child { border-block-end: 0; }
.nrv-shop-kontaktliste strong {
font-family: var(--wp--preset--font-family--manrope);
font-size: 0.8125rem;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--wp--preset--color--grau);
align-self: center;
}
/* 35.4 Die drei Schritte zur Clubkollektion */
.nrv-koll-schritte {
margin-block: 3rem;
}
.nrv-koll-schritte > h2 { margin-block-end: 1.75rem; }
/* Das Grid liegt auf den Schritten, nicht auf dem Abschnitt – die Überschrift
soll über der vollen Breite stehen und nicht als vierte Spalte mitlaufen. */
.nrv-koll-schritte {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 1.5rem;
}
.nrv-koll-schritte > h2 {
grid-column: 1 / -1;
margin-block: 0 0.5rem;
}
.nrv-koll-schritte > * { margin-block: 0; }
.nrv-koll-schritt {
border-top: 2px solid var(--wp--preset--color--navy);
padding-block-start: 1rem;
}
.nrv-koll-schritt > * { margin-block: 0; margin-inline: 0; max-width: none; }
.nrv-koll-schritt > * + * { margin-block-start: 0.625rem; }
.nrv-koll-ziffer {
font-family: var(--wp--preset--font-family--manrope);
font-size: 0.875rem;
font-weight: 700;
letter-spacing: 0.08em;
color: var(--wp--preset--color--grau);
}
.nrv-koll-schritt h3 {
font-size: 1.3125rem;
line-height: 1.25;
}
/* 35.5 Schmalere Fenster */
@media (max-width: 1100px) {
.nrv-produktraster { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
.nrv-produktraster { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.nrv-shop-wege,
.nrv-koll-schritte { grid-template-columns: minmax(0, 1fr); }
.nrv-shop-bestellen { padding: 1.75rem; }
}
@media (max-width: 760px) {
/* Zwei Spalten für Beschriftung und Wert brauchen zusammen gut 600 px.
Darunter steht die Beschriftung über ihrem Wert. */
.nrv-shop-kontaktliste li { grid-template-columns: minmax(0, 1fr); gap: 0.125rem; }
}
@media (max-width: 560px) {
/* Einspaltig bleibt es bei zwei Produkten je Zeile: Eine Kachel über die
volle Breite macht aus 15 Artikeln eine sehr lange Seite, und die Fotos
sind quadratisch gefasst – sie tragen auch schmal. */
.nrv-produktraster { gap: 1.5rem 1rem; }
.nrv-produkt-bild { padding: 0.75rem; }
}
/* ====================================================================== */
/* 36. Teamseiten: Olympic Team und H.E.A.T Sailing */
/* ====================================================================== */
/* Der Aufmacher kommt aus Abschnitt 31 („Über uns") – ein Muster, drei
Seiten. Hier steht nur, was dazukommt. */
/* 36.1 Abschnittsköpfe und Textblöcke */
.nrv-team-kopf {
margin-block: clamp(2.5rem, 5vw, 4rem) 1.5rem;
}
.nrv-team-kopf > * { margin-block: 0; margin-inline: 0; max-width: none; }
.nrv-team-kopf > * + * { margin-block-start: 0.5rem; }
.nrv-team-kopf p:not(.nrv-label):not(.nrv-cta) {
max-width: 68ch;
margin-block-start: 1rem;
}
.nrv-team-abschnitt {
margin-block: clamp(2rem, 4vw, 3rem);
}
.nrv-team-abschnitt > * { margin-block: 0; margin-inline: 0; }
.nrv-team-abschnitt > * + * { margin-block-start: 1rem; }
.nrv-team-abschnitt p { max-width: 68ch; }
/* Porträts im Hochformat 4:5. Die Vorlagen sind uneinheitlich – vom Quadrat
bis zum Querformat –,
und anders als bei den Produktfotos ist `cover` hier
richtig: Ein Gesicht verträgt seitlichen Beschnitt,
eine Leerfläche neben
dem Kopf sähe nach Fehler aus. Wo der Kopf nicht mittig sitzt {
width: 100%;
box-sizing: border-box;
margin-block-end: 0.75rem;
}
.nrv-athlet-position {
font-size: 0.9375rem;
color: var(--wp--preset--color--grau);
margin-block-start: 0.1875rem;
}
/* Die Ehemaligen stehen kleiner – sie gehören zur Geschichte des Teams {
grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
}
/* 36.3 Olympische Jahresleiste */
.nrv-olympialeiste {
display: grid;
grid-template-columns: repeat(19, minmax(0, 1fr));
gap: 4px;
align-items: end;
margin-block: 1.5rem 2rem;
}
.nrv-olympialeiste > * { margin-block: 0; margin-inline: 0; max-width: none; }
.nrv-olympiajahr {
display: flex;
flex-direction: column;
justify-content: flex-end;
min-height: 150px;
}
.nrv-olympiajahr > * { margin-block: 0; margin-inline: 0; max-width: none; }
.nrv-olympiajahr-zahl {
border-top: 1px solid var(--wp--preset--color--linie);
padding-block-start: 0.5rem;
font-family: var(--wp--preset--font-family--manrope);
font-size: 0.75rem;
font-weight: 600;
text-align: center;
color: var(--wp--preset--color--grau);
}
/* Ein Medaillenjahr trägt eine kräftige Oberkante statt einer Farbe: Gold,
Silber und Bronze sind am Bildschirm zu ähnlich, und eine reine
Farbcodierung trägt für Farbfehlsichtige keine Information. Dieselbe
Entscheidung wie beim Medaillenvisual auf „Erfolge". */
.nrv-olympiajahr-medaille .nrv-olympiajahr-zahl {
border-top: 3px solid var(--wp--preset--color--navy);
color: var(--wp--preset--color--navy);
font-weight: 700;
}
.nrv-olympiajahr-medaillentext {
font-size: 0.75rem;
line-height: 1.3;
color: var(--wp--preset--color--navy);
background: var(--wp--preset--color--flaeche);
padding: 0.5rem 0.375rem;
margin-block-end: 0.5rem;
/* Senkrecht gesetzt – bei 19 Spalten auf 1280 px stehen je Spalte 63 px zur
Verfügung, waagerecht bliebe von „Silber · Susann Beucke" ein Wortsalat. */
writing-mode: vertical-rl;
transform: rotate(180deg);
max-height: 240px;
align-self: center;
}
/* 36.4 Nachrichten aus dem Team */
.nrv-team-news .wp-block-post-template {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 2rem;
list-style: none;
padding-inline: 0;
margin-block: 1.5rem;
}
.nrv-team-news .wp-block-post-template > li { margin-block: 0; }
.nrv-team-news-bild img {
width: 100%;
height: auto;
}
.nrv-team-news-titel {
font-size: 1.25rem;
line-height: 1.25;
margin-block: 0.375rem 0.5rem;
}
.nrv-team-news-titel a { text-decoration: none; }
.nrv-team-news-titel a:hover { text-decoration: underline; }
.nrv-team-news-text {
font-size: 0.9375rem;
line-height: 1.55;
color: var(--wp--preset--color--grau);
margin-block: 0;
}
.nrv-team-news .nrv-datum {
font-family: var(--wp--preset--font-family--manrope);
font-size: 0.75rem;
letter-spacing: 0.06em;
color: var(--wp--preset--color--grau);
margin-block-start: 0.625rem;
}
/* 36.5 Video erst nach Einwilligung */
.nrv-video {
margin-block: 1.5rem clamp(2rem, 4vw, 3rem);
}
.nrv-video-flaeche {
background: var(--wp--preset--color--flaeche);
border: 1px solid var(--wp--preset--color--linie);
padding: clamp(1.75rem, 4vw, 3rem);
/* 16:9 wie das Video, das hier erscheinen wird – so springt die Seite beim
Laden nicht. */
min-height: 0;
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
aspect-ratio: 16 / 9;
}
.nrv-video-flaeche > * { margin-block: 0; max-width: 54ch; }
.nrv-video-flaeche > * + * { margin-block-start: 0.75rem; }
.nrv-video-titel {
font-family: var(--wp--preset--font-family--cormorant-garamond);
font-size: 1.5rem;
font-weight: 600;
line-height: 1.2;
}
.nrv-video-hinweis {
font-size: 0.9375rem;
line-height: 1.55;
color: var(--wp--preset--color--grau);
}
.nrv-video-fuss {
font-size: 0.8125rem;
color: var(--wp--preset--color--grau);
}
.nrv-video-laeuft {
aspect-ratio: 16 / 9;
}
.nrv-video-laeuft iframe {
display: block;
width: 100%;
aspect-ratio: 16 / 9;
border: 0;
}
/* 36.6 Schmalere Fenster */
@media (max-width: 1000px) {
.nrv-team-news .wp-block-post-template { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
/* 19 Spalten brauchen mindestens 63 px je Spalte, sonst steht die
Jahreszahl quer. Darunter läuft die Leiste in zwei Reihen. */
.nrv-olympialeiste { grid-template-columns: repeat(10, minmax(0, 1fr)); }
.nrv-olympiajahr { min-height: 110px; }
.nrv-olympiajahr-medaillentext { max-height: 170px; font-size: 0.75rem; }
.nrv-video-flaeche { aspect-ratio: auto; }
}
@media (max-width: 620px) {
.nrv-team-news .wp-block-post-template { grid-template-columns: minmax(0, 1fr); }
.nrv-olympialeiste { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
/* 36.7 H.E.A.T Sailing */
.nrv-heat-chronik {
display: grid;
gap: 0;
margin-block: 1.5rem clamp(2rem, 4vw, 3rem);
border-top: 1px solid var(--wp--preset--color--linie);
}
.nrv-heat-chronik > * { margin-block: 0; margin-inline: 0; max-width: none; }
.nrv-heat-station {
display: grid;
grid-template-columns: 7rem minmax(0, 1fr);
gap: 1.5rem;
padding-block: 1.125rem;
border-bottom: 1px solid var(--wp--preset--color--linie);
}
.nrv-heat-station > * { margin-block: 0; margin-inline: 0; max-width: none; }
.nrv-heat-jahr {
font-family: var(--wp--preset--font-family--manrope);
font-size: 0.9375rem;
font-weight: 700;
letter-spacing: 0.04em;
}
.nrv-heat-text {
max-width: 68ch;
line-height: 1.6;
}
/* Die Crew der H.E.A.T-Seite trug bis v3.44 eine eigene Tafel
(`nrv-heat-crew`, vier Spalten mit 1-px-Fugen auf getöntem Grund).
Seit dem Personenkarten-Baustein steht dort `nrv-personenkarte`,
Abschnitt 64.2 – die alte Regel ist damit entfallen.
Sie stand hier zuletzt **ohne Selektor**: Eine Umbenennung hatte die
Selektorzeile in den Kommentar darüber gezogen, der dadurch nie
geschlossen wurde. Der Browser las die Deklarationen als Block ohne
Selektor und verwarf sie, und die Datei trug eine schließende Klammer
zu viel. **Sichtbar war das nirgends** – die Regel war ohnehin
verwaist. Gefunden hat es die Klammerbilanz, nicht der Augenschein:
Wer CSS ändert, zählt `{` gegen `}` mit ausgeblendeten Kommentaren. */
.nrv-heat-stand {
font-size: 0.8125rem;
color: var(--wp--preset--color--grau);
margin-block: 0 clamp(2rem, 4vw, 3rem);
}
.nrv-heat-teamfoto,
.nrv-heat-klassenbild {
margin-block: clamp(1.5rem, 3vw, 2.5rem);
}
.nrv-heat-teamfoto img,
.nrv-heat-klassenbild img {
display: block;
width: 100%;
height: auto;
aspect-ratio: 16 / 9;
object-fit: cover;
}
.nrv-heat-unterstuetzen {
background: var(--wp--preset--color--flaeche);
padding: clamp(1.75rem, 4vw, 3rem);
margin-block: clamp(2rem, 4vw, 3rem);
}
.nrv-heat-unterstuetzen > * { margin-block: 0; margin-inline: 0; max-width: none; }
.nrv-heat-unterstuetzen > * + * { margin-block-start: 1rem; }
.nrv-heat-unterstuetzen p { max-width: 68ch; }
.nrv-heat-zwecke {
list-style: none;
padding-inline: 0;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 1.25rem;
max-width: none;
}
.nrv-heat-zwecke li {
margin-block: 0;
padding-block-start: 0.875rem;
border-top: 2px solid var(--wp--preset--color--navy);
font-size: 0.9375rem;
line-height: 1.55;
}
.nrv-heat-zwecke strong {
display: block;
font-family: var(--wp--preset--font-family--cormorant-garamond);
font-size: 1.1875rem;
font-weight: 600;
margin-block-end: 0.25rem;
}
@media (max-width: 1000px) {
}
@media (max-width: 620px) {
.nrv-heat-station { grid-template-columns: minmax(0, 1fr); gap: 0.25rem; }
}
/* ====================================================================== */
/* 37. Newsbereich: Magazinseite, Rubriken, Stammdaten, Newsletter */
/* ====================================================================== */
/* 37.1 Kopf und Rubrikenleiste */
.nrv-magazin-kopf {
margin-block: 0 1.25rem;
}
.nrv-magazin-kopf > * { margin-block: 0; margin-inline: 0; }
.nrv-magazin-titel {
font-size: clamp(2.4rem, 2.4rem + ((1vw - 0.2rem) * 3), 4.2rem);
line-height: 1.08;
margin-block-start: 0.25rem;
}
.nrv-rubriken {
margin-block: 0 clamp(2rem, 4vw, 3rem);
border-block: 1px solid var(--wp--preset--color--linie);
padding-block: 0.875rem;
}
.nrv-rubriken-liste {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
gap: 0.5rem 1.25rem;
}
.nrv-rubriken-liste li { margin: 0; }
.nrv-rubriken-liste a {
font-family: var(--wp--preset--font-family--manrope);
font-size: 0.8125rem;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
text-decoration: none;
color: var(--wp--preset--color--grau);
padding-block: 0.25rem;
border-bottom: 2px solid transparent;
}
.nrv-rubriken-liste a:hover,
.nrv-rubriken-liste a:focus-visible {
color: var(--wp--preset--color--navy);
border-bottom-color: var(--wp--preset--color--linie);
}
/* Die aktuelle Rubrik wird nicht nur dunkler, sondern bekommt die Linie: Eine
reine Farbabstufung zwischen gedämpftem und vollem Text ist für eine
Mitgliedschaft im Schnitt über 60 kein verlässlicher Unterschied. */
.nrv-rubriken-liste a[aria-current="page"] {
color: var(--wp--preset--color--navy);
border-bottom-color: var(--wp--preset--color--navy);
}
/* 37.2 Aufmacherbereich: Lead links, Artikel der Woche rechts */
/* **Der Aufmacherbereich ist seit v3.63.0 kein zweispaltiges Raster mehr.**
Bis dahin stand hier `8fr 4fr` mit dem Lead links und dem Artikel der
Woche rechts. Gemessen im Artboard ist das `8fr 4fr` aber der **Lead
selbst** – 821 px Bild, 411 px Text, zusammen über die vollen 1280 –,
und der Artikel der Woche ist ein eigenes `5fr 7fr`-Modul darunter
(siehe 29.1).
Der Unterschied fällt in keiner Messung auf, weil beide Lesarten ein
`8/4` ergeben. Sichtbar wurde er erst im Bildschirmabzug: Mit den
Sekundärkarten in der Seitenspalte stand der Lead 301 px hoch neben
einer 932 px hohen Spalte. */
.nrv-magazin-aufmacher {
display: block;
margin-block: 0 clamp(2.5rem, 5vw, 4rem);
}
.nrv-magazin-aufmacher > * { margin-block: 0; margin-inline: 0; max-width: none; }
.nrv-magazin-haupt > * { margin-block: 0; margin-inline: 0; max-width: none; }
.nrv-magazin-lead-bild img {
display: block;
width: 100%;
height: auto;
}
.nrv-magazin-lead .nrv-label { margin-block: 1rem 0.375rem; }
.nrv-magazin-lead-titel {
font-size: clamp(1.75rem, 1.6rem + 1vw, 2.6rem);
line-height: 1.12;
margin-block: 0 0.625rem;
}
.nrv-magazin-lead-titel a { text-decoration: none; }
.nrv-magazin-lead-titel a:hover { text-decoration: underline; }
.nrv-magazin-lead-text {
max-width: 62ch;
line-height: 1.6;
margin-block: 0;
}
.nrv-magazin-lead .nrv-datum { margin-block-start: 0.625rem; }
/* Die beiden Sekundärkarten unter dem Aufmacher, über die volle Breite –
im Artboard ein eigenes zweispaltiges Raster unter dem Lead. */
.nrv-magazin-sekundaer .wp-block-post-template {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 2.5rem;
list-style: none;
padding-inline: 0;
margin-block: 2.5rem 0;
padding-block-start: 2.5rem;
border-top: 1px solid var(--wp--preset--color--linie);
}
.nrv-magazin-sekundaer .wp-block-post-template > li { margin-block: 0; }
.nrv-magazin-karte-bild img {
display: block;
width: 100%;
height: auto;
}
.nrv-magazin-karte-titel {
font-size: 1.3125rem;
line-height: 1.2;
margin-block: 0.375rem 0.5rem;
}
.nrv-magazin-karte-titel a { text-decoration: none; }
.nrv-magazin-karte-titel a:hover { text-decoration: underline; }
.nrv-magazin-karte-text {
font-size: 0.9375rem;
line-height: 1.55;
color: var(--wp--preset--color--grau);
margin-block: 0;
}
.nrv-magazin-sekundaer .nrv-label,
.nrv-magazin-weitere .nrv-label { margin-block: 0.75rem 0; }
.nrv-magazin-sekundaer .nrv-datum,
.nrv-magazin-weitere .nrv-datum { margin-block-start: 0.5rem; }
/* 37.3 Weitere Meldungen */
.nrv-magazin-weitere .wp-block-post-template {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 3rem 2rem;
list-style: none;
padding-inline: 0;
margin-block: 1.5rem;
}
.nrv-magazin-weitere .wp-block-post-template > li { margin-block: 0; }
.nrv-magazin-mehr {
justify-content: center;
margin-block: 0 clamp(3rem, 6vw, 5rem);
}
/* 37.4 Stammdaten am Beitrag */
.nrv-stammdaten {
list-style: none;
margin: 1rem 0 0;
padding: 0;
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
}
.nrv-stammdaten li { margin: 0; }
.nrv-stammdaten-chip {
display: inline-flex;
align-items: baseline;
gap: 0.375rem;
border: 1px solid var(--wp--preset--color--linie);
padding: 0.3125rem 0.75rem;
font-size: 0.875rem;
text-decoration: none;
color: var(--wp--preset--color--navy);
background: var(--wp--preset--color--weiss);
}
.nrv-stammdaten-chip:hover,
.nrv-stammdaten-chip:focus-visible {
border-color: var(--wp--preset--color--navy);
}
/* Die Art steht vor dem Wert, damit „Kiel" nicht mit einer Person verwechselt
wird. Kleiner und gedämpft – der Wert ist die Information. */
.nrv-stammdaten-art {
font-family: var(--wp--preset--font-family--manrope);
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--wp--preset--color--grau);
}
.nrv-rubriklink { margin-block: 0; }
/* 37.5 Newsletter-Band */
.nrv-newsletterband {
display: grid;
grid-template-columns: 7fr 5fr;
gap: 4rem;
align-items: center;
background: var(--wp--preset--color--flaeche);
padding: clamp(2rem, 4vw, 3.5rem) clamp(1.75rem, 4vw, 4.5rem);
margin-block: clamp(3rem, 6vw, 5rem) 0;
}
.nrv-newsletterband > * { margin-block: 0; margin-inline: 0; max-width: none; }
.nrv-newsletterband-text > * { margin-block: 0; margin-inline: 0; max-width: none; }
.nrv-newsletterband-text > * + * { margin-block-start: 0.625rem; }
.nrv-newsletterband-titel {
font-size: clamp(1.6rem, 1.4rem + 1vw, 2.2rem);
line-height: 1.15;
}
.nrv-newsletterband-text p:not(.nrv-label):not(.nrv-cta) {
max-width: 54ch;
color: var(--wp--preset--color--grau);
}
.nrv-newsletterband-knopf { justify-content: flex-end; }
/* 37.6 Schmalere Fenster */
@media (max-width: 1100px) {
.nrv-magazin-weitere .wp-block-post-template { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
.nrv-newsletterband { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
.nrv-newsletterband-knopf { justify-content: flex-start; }
}
@media (max-width: 620px) {
.nrv-magazin-sekundaer .wp-block-post-template,
.nrv-magazin-weitere .wp-block-post-template { grid-template-columns: minmax(0, 1fr); }
/* Die Rubrikenleiste läuft waagerecht weiter, statt auf fünf Zeilen zu
wachsen. Antippen und Wischen ist auf dem Telefon die erwartete
Bedienung; die Linie oben und unten zeigt, dass die Leiste weitergeht. */
.nrv-rubriken-liste {
flex-wrap: nowrap;
overflow-x: auto;
scrollbar-width: thin;
padding-block-end: 0.375rem;
}
.nrv-rubriken-liste li { flex: 0 0 auto; }
}
/* ====================================================================== */
/* 38. Termine: Modul, Detailseite und Archiv */
/* ====================================================================== */
/* Die Karten kommen jetzt aus `nrv/naechste-termine` und sind je ein `
` –
die ganze Karte ist anklickbar, nicht nur der Titel. Die Regeln aus
Abschnitt 1 und 12 stammen vom statischen Markup mit `core/column` und
greifen hier nicht mehr; was dort steht, bleibt für Altbestand im Editor. */
.nrv-terminreihe {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 1.5rem;
margin-block: 1.5rem 0;
}
.nrv-terminreihe > * { margin-block: 0; }
a.nrv-termin {
display: flex;
flex-direction: column;
background: var(--wp--preset--color--weiss);
border: 1px solid var(--wp--preset--color--linie);
padding: 0;
text-decoration: none;
color: var(--wp--preset--color--navy);
/* Die Regel aus Abschnitt 1 setzt `.nrv-termin` auf `center` – das stammt vom
alten Markup mit vier schmalen Spalten und einer Zahl darin. Hier stehen
mehrzeilige Vortragstitel in der Karte, und zentrierter Fließtext hat auf
jeder Zeile einen anderen Anfang. Bei einer Mitgliedschaft im Schnitt über
60 ist das der Unterschied zwischen lesen und buchstabieren. */
text-align: start;
}
a.nrv-termin:hover,
a.nrv-termin:focus-visible {
border-color: var(--wp--preset--color--navy);
}
.nrv-termin-bild {
display: block;
overflow: hidden;
}
.nrv-termin-bild img {
display: block;
width: 100%;
aspect-ratio: 3 / 2;
object-fit: cover;
}
.nrv-termin-text {
display: flex;
flex-direction: column;
gap: 0.375rem;
padding: 1.25rem;
flex: 1 1 auto;
}
a.nrv-termin .nrv-label {
font-family: var(--wp--preset--font-family--manrope);
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--wp--preset--color--grau);
margin: 0;
}
/* Tag und Monat nebeneinander: Die große Zahl trägt, der Monat ordnet ein.
`baseline` ist hier richtig – beides steht in einer Zeile. */
.nrv-termin-datum {
display: flex;
align-items: baseline;
gap: 0.5rem;
}
a.nrv-termin .nrv-tag {
font-family: var(--wp--preset--font-family--cormorant-garamond);
font-size: 2.25rem;
font-weight: 600;
line-height: 1;
}
a.nrv-termin .nrv-monat {
font-family: var(--wp--preset--font-family--manrope);
font-size: 0.75rem;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--wp--preset--color--grau);
}
.nrv-termin-titel {
font-family: var(--wp--preset--font-family--cormorant-garamond);
font-size: 1.1875rem;
font-weight: 600;
line-height: 1.25;
}
.nrv-termin-wochentag {
font-size: 0.8125rem;
color: var(--wp--preset--color--grau);
}
/* Der Hinweis sitzt unten, damit er bei unterschiedlich langen Titeln auf
einer Linie steht. */
.nrv-termin-mehr {
margin-block-start: auto;
padding-block-start: 0.75rem;
font-family: var(--wp--preset--font-family--manrope);
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
}
a.nrv-termin:hover .nrv-termin-mehr,
a.nrv-termin:focus-visible .nrv-termin-mehr {
text-decoration: underline;
}
.nrv-termine-leer {
padding: 1.5rem 0;
color: var(--wp--preset--color--grau);
}
/* 38.2 Detailseite */
.nrv-terminkopf {
display: grid;
grid-template-columns: 7fr 5fr;
gap: 3rem;
align-items: start;
margin-block: 1rem clamp(2rem, 4vw, 3rem);
}
.nrv-terminkopf > * { margin-block: 0; margin-inline: 0; max-width: none; }
.nrv-terminkopf-text > * { margin-block: 0; margin-inline: 0; max-width: none; }
.nrv-terminkopf-titel {
font-size: clamp(1.9rem, 1.7rem + 1.4vw, 3rem);
line-height: 1.1;
margin-block: 0.5rem 1.5rem;
}
.nrv-terminkopf-bild img {
display: block;
width: 100%;
height: auto;
}
.nrv-terminkopf-daten {
background: var(--wp--preset--color--weiss);
border: 1px solid var(--wp--preset--color--linie);
padding: 1.75rem;
}
.nrv-terminkopf-daten > * { margin-block: 0; }
.nrv-eckdaten {
margin: 0;
}
.nrv-eckdaten-zeile {
display: grid;
grid-template-columns: 7.5rem minmax(0, 1fr);
gap: 1rem;
padding-block: 0.625rem;
border-bottom: 1px solid var(--wp--preset--color--linie);
}
.nrv-eckdaten-zeile:last-child { border-bottom: 0; }
.nrv-eckdaten dt {
font-family: var(--wp--preset--font-family--manrope);
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--wp--preset--color--grau);
align-self: center;
}
.nrv-eckdaten dd {
margin: 0;
font-size: 0.9375rem;
line-height: 1.45;
}
.nrv-termin-aktionen {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 0.875rem;
margin-block-start: 1.5rem;
}
.nrv-termintext {
margin-block: clamp(2rem, 4vw, 3rem);
}
.nrv-termin-clubhaus {
background: var(--wp--preset--color--flaeche);
padding: clamp(1.5rem, 3vw, 2.25rem);
margin-block: clamp(2rem, 4vw, 3rem);
}
.nrv-termin-clubhaus > * { margin-block: 0; margin-inline: 0; max-width: 62ch; }
.nrv-termin-clubhaus > * + * { margin-block-start: 0.625rem; }
.nrv-weitere-termine { margin-block: 0 clamp(2rem, 4vw, 3rem); }
/* 38.3 Archiv */
.nrv-terminliste .nrv-terminreihe {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 2rem 1.5rem;
margin-block: 2rem 0;
}
/* 38.4 Schmalere Fenster */
@media (max-width: 1000px) {
.nrv-terminkopf { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
.nrv-terminreihe,
.nrv-terminliste .nrv-terminreihe { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
.nrv-terminreihe,
.nrv-terminliste .nrv-terminreihe { grid-template-columns: minmax(0, 1fr); }
.nrv-eckdaten-zeile { grid-template-columns: minmax(0, 1fr); gap: 0.125rem; }
}
/* ====================================================================== */
/* 39. Die fünf Visualisierungen aus dem Briefing */
/* ====================================================================== */
/* 39.1 Kartenraster – Presse, Clubheft, Jobs */
/*
* **Der Selektor greift auf jede Variante, nicht auf eine Basisklasse.**
* Im Markup stehen nur `nrv-visual-raster-2`, `-3` und `-4` – die Basis
* `nrv-visual-raster` trägt kein einziges Element. Die Spaltenangaben
* standen also da und wirkten nicht: Beide Raster auf /team-event/ und
* /business-privatevents/ waren `display: block` mit gestapelten Karten.
* Gefunden am 28.10.2026; derselbe Fehlertyp wie bei `.nrv-zweispalt`
* (27.10.) – eine Rasterangabe ohne `display: grid` ist wirkungslos.
*
* Zwei Klassen im Selektor, sonst gewinnt WordPress' Layout-Regel für den
* Group-Block. Ein Attributselektor zählt dafür wie eine Klasse.
*/
[class*="nrv-visual-raster"].wp-block-group,
.nrv-visual-raster {
display: grid;
gap: 1.5rem;
margin-block: 1.5rem clamp(2rem, 4vw, 3rem);
}
[class*="nrv-visual-raster"] > * { margin-block: 0; margin-inline: 0; max-width: none; }
.nrv-visual-raster-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.nrv-visual-raster-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.nrv-visual-karte {
display: flex;
flex-direction: column;
gap: 0.5rem;
background: var(--wp--preset--color--weiss);
border: 1px solid var(--wp--preset--color--linie);
padding: 1.75rem;
}
.nrv-visual-karte > * { margin-block: 0; margin-inline: 0; max-width: none; }
.nrv-visual-karte-schmal { padding: 1.25rem 1.5rem; }
.nrv-visual-ziffer {
font-family: var(--wp--preset--font-family--manrope);
font-size: 0.8125rem;
font-weight: 700;
letter-spacing: 0.08em;
color: var(--wp--preset--color--grau);
}
.nrv-visual-titel {
font-family: var(--wp--preset--font-family--cormorant-garamond);
font-size: 1.375rem;
font-weight: 600;
line-height: 1.2;
}
.nrv-visual-text {
font-size: 0.9375rem;
line-height: 1.55;
}
/* Der Verweis sitzt unten, damit er bei ungleich langen Texten auf einer
Linie steht. */
.nrv-visual-karte .nrv-cta { margin-block-start: auto; padding-block-start: 0.75rem; }
/* 39.2 Presse */
.nrv-pressekontakt {
background: var(--wp--preset--color--flaeche);
padding: clamp(1.5rem, 3vw, 2.25rem);
margin-block: clamp(2rem, 4vw, 3rem);
}
.nrv-pressekontakt > * { margin-block: 0; margin-inline: 0; max-width: 62ch; }
.nrv-pressekontakt > * + * { margin-block-start: 0.5rem; }
/* 39.3 Clubheft: Cover neben dem Text */
.nrv-clubheft-kopf {
display: grid;
grid-template-columns: 7fr 5fr;
gap: clamp(2rem, 4vw, 3.5rem);
align-items: start;
margin-block: 0 clamp(2rem, 4vw, 3rem);
}
.nrv-clubheft-kopf > * { margin-block: 0; margin-inline: 0; max-width: none; }
.nrv-clubheft-text > * { margin-block: 0; margin-inline: 0; max-width: none; }
.nrv-clubheft-text > * + * { margin-block-start: 1rem; }
.nrv-clubheft-titel {
font-size: clamp(1.9rem, 1.7rem + 1.4vw, 2.8rem);
line-height: 1.1;
}
.nrv-clubheft-cover > * { margin-block: 0; }
/* Ein Heft wirft Schatten – das ist hier keine Dekoration, sondern der
Hinweis darauf, dass es ein gedrucktes Objekt ist und kein PDF. */
.nrv-clubheft-bild img {
display: block;
width: 100%;
height: auto;
box-shadow: 0 2px 18px rgba(14, 42, 79, 0.18);
}
.nrv-clubheft-bildunterschrift {
font-size: 0.8125rem;
color: var(--wp--preset--color--grau);
margin-block-start: 0.75rem;
}
.nrv-clubheft-produktion {
border-top: 1px solid var(--wp--preset--color--linie);
padding-block-start: 1.25rem;
margin-block-start: clamp(2rem, 4vw, 3rem);
}
.nrv-clubheft-produktion > * { margin-block: 0; margin-inline: 0; max-width: 62ch; }
.nrv-clubheft-produktion > * + * { margin-block-start: 0.375rem; }
.nrv-clubheft-produktion p:not(.nrv-label):not(.nrv-cta) {
font-size: 0.9375rem;
color: var(--wp--preset--color--grau);
}
/* 39.4 Jobs: Stellen als Karten */
.nrv-stellen {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
gap: 1.5rem;
margin-block: 1.5rem;
}
.nrv-stellen > * { margin-block: 0; margin-inline: 0; max-width: none; }
/* Die Stellenkarte trägt eine kräftige Oberkante: Sie ist das, weswegen
jemand auf diese Seite kommt, und hebt sich von den vier Merkmalskarten
darüber ab. */
.nrv-stelle {
display: flex;
flex-direction: column;
gap: 0.625rem;
border-top: 3px solid var(--wp--preset--color--navy);
background: var(--wp--preset--color--weiss);
border-inline: 1px solid var(--wp--preset--color--linie);
border-bottom: 1px solid var(--wp--preset--color--linie);
padding: 1.75rem;
}
.nrv-stelle > * { margin-block: 0; margin-inline: 0; max-width: none; }
.nrv-stelle-titel {
font-family: var(--wp--preset--font-family--cormorant-garamond);
font-size: 1.5rem;
font-weight: 600;
line-height: 1.2;
}
.nrv-stelle .nrv-cta { margin-block-start: auto; padding-block-start: 0.75rem; }
/* Wer klickt, soll vorher wissen, dass ein Download kommt – wie bei den
PDF-Listen der Partnerclubs. */
.nrv-cta-pdf a::after {
content: " (PDF)";
font-size: 0.8125rem;
color: var(--wp--preset--color--grau);
}
/* 39.5 Nachhaltigkeit: die vier Fragen */
.nrv-fragen {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 1px;
background: var(--wp--preset--color--linie);
border: 1px solid var(--wp--preset--color--linie);
margin-block: 1.5rem clamp(2rem, 4vw, 3rem);
}
.nrv-fragen > * { margin-block: 0; margin-inline: 0; max-width: none; }
.nrv-frage {
display: flex;
flex-direction: column;
gap: 0.5rem;
background: var(--wp--preset--color--weiss);
padding: clamp(1.5rem, 3vw, 2.25rem);
}
.nrv-frage > * { margin-block: 0; margin-inline: 0; max-width: none; }
.nrv-frage-ziffer {
font-family: var(--wp--preset--font-family--manrope);
font-size: 0.8125rem;
font-weight: 700;
letter-spacing: 0.1em;
color: var(--wp--preset--color--grau);
}
/* Die Frage steht in Cormorant und größer als Fließtext: Sie ist der Inhalt
der Kachel, nicht ihre Beschriftung. Beantwortet wird sie bewusst nicht –
der Club arbeitet daran, und eine erfundene Antwort wäre schlechter als
die offene Frage. */
.nrv-frage-text {
font-family: var(--wp--preset--font-family--cormorant-garamond);
font-size: clamp(1.125rem, 1.6vw, 1.375rem);
line-height: 1.35;
}
.nrv-charta {
background: var(--wp--preset--color--flaeche);
padding: clamp(1.75rem, 4vw, 3rem);
margin-block: clamp(2rem, 4vw, 3rem);
}
.nrv-charta > * { margin-block: 0; margin-inline: 0; max-width: 68ch; }
.nrv-charta > * + * { margin-block-start: 1rem; }
/* 39.6 Reviere */
.nrv-revier { margin-block: clamp(2.5rem, 5vw, 4rem); }
.nrv-revier-name {
font-size: clamp(1.9rem, 1.7rem + 1.4vw, 2.8rem);
line-height: 1.1;
margin-block: 0.25rem 0;
scroll-margin-top: 140px;
}
.nrv-revier-unter {
font-family: var(--wp--preset--font-family--cormorant-garamond);
font-size: 1.25rem;
font-style: italic;
color: var(--wp--preset--color--grau);
margin-block-end: 0.5rem;
}
.nrv-revier-sprungziel a {
font-family: var(--wp--preset--font-family--manrope);
font-size: 0.8125rem;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
text-decoration: none;
color: var(--wp--preset--color--grau);
}
.nrv-revier-sprungziel a:hover,
.nrv-revier-sprungziel a:focus-visible {
color: var(--wp--preset--color--navy);
text-decoration: underline;
}
/* 39.7 Schmalere Fenster */
@media (max-width: 1000px) {
.nrv-visual-raster-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.nrv-clubheft-kopf { grid-template-columns: minmax(0, 1fr); }
/* Das Cover vor den Text zu stellen hieße, die Seite mit einem Bild zu
beginnen, das ohne den Text nichts erklärt. */
.nrv-clubheft-cover { max-width: 320px; }
}
@media (max-width: 760px) {
.nrv-visual-raster-2,
.nrv-visual-raster-3,
.nrv-fragen { grid-template-columns: minmax(0, 1fr); }
}
/* Mail und Telefon klein und gedämpft: Der Name führt,
die Adresse ist das,
.nrv-person-tel {
font-size: 0.875rem;
line-height: 1.4;
}
.nrv-person-tel a {
color: var(--wp--preset--color--grau);
}
.nrv-person-tel a:hover {
color: var(--wp--preset--color--navy);
}
/* 40.2 Geschäftsstelle: Adresse, Zeiten, Kontakt nebeneinander */
.nrv-gs-kopf {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 1.5rem;
background: var(--wp--preset--color--flaeche);
padding: clamp(1.5rem, 3vw, 2.25rem);
margin-block: clamp(1.5rem, 3vw, 2.5rem);
}
.nrv-gs-kopf > * { margin-block: 0; margin-inline: 0; max-width: none; }
.nrv-gs-block > * { margin-block: 0; margin-inline: 0; max-width: none; }
.nrv-gs-block > * + * { margin-block-start: 0.5rem; }
.nrv-gs-block p:not(.nrv-label):not(.nrv-cta) {
font-size: 0.9375rem;
line-height: 1.55;
}
/* 40.3 Schmalere Fenster */
@media (max-width: 860px) {
.nrv-gs-kopf { grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
}
/* ===========================================================================
41. Seitenkopf: Titel und Einleitung nebeneinander (v2.20.0)
Von Jasmine gemeldet: „Die Headlines sind teilweise sehr groß, so dass sie
mit der Subline und Fließtext manchmal den ganzen Bildschirm in seiner Höhe
einnehmen."
Gemessen auf `/clubkollektion/` bei 1440 × 900: Das erste Produktbild
begann bei **y = 772**. Darüber lagen Kopf (296), Seitentitel (73),
Vorspann, zwei Absätze und eine Zwischenüberschrift – gestapelt.
Die Schriftgröße ist dabei **nicht** die Ursache: Die Artboards setzen ihre
h1 auf 76 und 80 px, also größer als unsere 67. Der Unterschied ist die
Anordnung. `Shop.dc.html` stellt Titel und Einleitung in ein Raster
`7fr 5fr` mit `align-items: end` nebeneinander – das halbiert die Höhe des
Aufmachers, ohne ein Wort zu kürzen.
--------------------------------------------------------------------------- */
.nrv-seitenkopf {
display: grid;
grid-template-columns: 7fr 5fr;
gap: clamp(2rem, 6vw, 6rem);
align-items: end;
margin-block: 0 clamp(2rem, 4vw, 3.5rem);
}
.nrv-seitenkopf > * { margin-block: 0; }
.nrv-seitenkopf-titel {
font-family: var(--wp--preset--font-family--cormorant-garamond);
font-size: clamp(2.25rem, 5vw, 4.75rem);
line-height: 1;
font-weight: 500;
margin-block: 0.5rem 0;
}
.nrv-seitenkopf-text {
font-size: 1.0625rem;
line-height: 1.7;
max-width: 46ch;
margin-block: 0;
}
@media (max-width: 860px) {
.nrv-seitenkopf {
grid-template-columns: minmax(0, 1fr);
gap: 1.25rem;
}
.nrv-seitenkopf-text { max-width: none; }
}
/* --- Der Seitentitel aus dem Template ist kein Hero ----------------------- */
/* `h1` steht über `theme.json` auf der Stufe `titel` – fluid bis 4,2 rem, bei
1440 px also 67 px. Das ist die Größe des Aufmachers auf der Startseite und
dort richtig. Über einer Inhaltsseite, der gleich Fließtext folgt, kostet
sie nur Höhe: Sie wird nicht gelesen, sie ist ja schon im Browser-Tab und
im Menü markiert.
Deshalb hier eine eigene Stufe, und zwar **nur** für `wp-block-post-title`
auf Seiten – der Hero-Titel der Startseite ist ein `core/heading` und
bleibt unberührt. Nachgemessen: 48 statt 67 px. */
/* **Nur der Seitentitel aus dem Template, nicht jeder `post-title`.**
Diese Regel hieß bis v2.26.1 `.page .wp-block-post-title` – und traf damit
auch die Beitragstitel in den Abfrageschleifen der Startseite, denn die
Startseite ist selbst eine `page` und jede Karte bringt einen
`wp-block-post-title` mit. Bei gleicher Spezifität wie
`.nrv-karte .nrv-karte-titel` (je zwei Klassen) gewann sie über ihre
spätere Stellung in der Datei.
Folge: Die Kartentitel standen auf **48 px statt 17,6 px**, der Aufmacher
auf 48 statt 36. Ein 48-px-Titel in einer 386 px breiten Spalte braucht
vier Zeilen und allein 204 px Höhe – zum Vergleich die Terminkarte
daneben, fast gleich breit: 19 px Titel, 71 px hoch. Der Abschnitt
„Neuigkeiten" wuchs dadurch auf 2.463 px.
Von Jasmine gemeldet („es wirkt alles etwas heavy", im Gegensatz zu den
Terminen, wo „die Proportionen stimmen"). **Eingeführt habe ich den Fehler
am selben Tag** mit dem Verkleinern des Seitentitels – eine Regel, die ich
gegen `/clubkollektion/` geprüft hatte und nicht gegen die Startseite.
Der Seitentitel steht als direktes Kind in `main`, die Kartentitel liegen
tief im `post-content`. Der Kindkombinator trennt beide sauber. */
/* `main` ist **nicht** direktes Kind von `body` – dazwischen liegt
`div.wp-site-blocks`. Deshalb Nachfahre bis `main`, von dort der
Kindkombinator: Der Seitentitel steht direkt darin, die Kartentitel
liegen tief im `post-content`. */
.page main > .wp-block-post-title {
font-size: clamp(2rem, 3.4vw, 3rem);
line-height: 1.06;
margin-block-end: clamp(1rem, 2vw, 1.5rem);
/* Der Titel war mit 760 px schmaler als sein „constrained"-Container und
wurde deshalb zentriert – gemessen x = 333, während jede Überschrift
darunter bei 73 stand.
Behoben ist das im Template, nicht hier: `wp:post-title` trägt jetzt
`align: wide` und damit dieselbe Breitenstufe wie `wp:post-content`.
Ein bloßes `margin-left: 0` hätte ihn auf x = 24 geschoben, also an den
Fensterrand statt an die Inhaltskante – ausprobiert und wieder
zurückgenommen. **Die Kante kommt aus der Breitenstufe, nicht aus dem
Außenabstand.** */
}
/* ===========================================================================
42. Aufmacher über die volle Breite, mit Video (v2.20.0)
Von Jasmine gewünscht: „Vielleicht hier einfach großflächig über die ganze
Breite ein Video setzen … um Tobias zu vermitteln: hier passiert etwas."
Bis v2.19 stand der Aufmacher zweispaltig in 1280 px: Text links, Bild
rechts. Jetzt eine durchgehende Fläche, der Text darüber.
--------------------------------------------------------------------------- */
.nrv-hero-voll {
position: relative;
isolation: isolate;
min-height: min(76vh, 640px);
display: flex;
align-items: flex-end;
padding: 0;
overflow: hidden;
background: var(--wp--preset--color--navy);
}
/* **z-index -2, nicht -1.** Der Verlauf liegt als `::before` ebenfalls im
Hintergrund; bei gleichem Wert entscheidet die Reihenfolge im Dokument,
und die Figur steht hinter dem Pseudo-Element – das Bild lag damit über
dem Verlauf, und die weiße Schrift stand ungeschützt über dem Himmel.
Eine Stufe tiefer stapelt es richtig. */
.nrv-hero-voll .nrv-hero-buehne {
position: absolute;
inset: 0;
margin: 0;
height: 100%;
z-index: -2;
}
.nrv-hero-voll .nrv-hero-buehne > img,
.nrv-hero-voll .nrv-hero-buehne > video {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* Der Verlauf trägt den Kontrast der weißen Schrift, und er muss gerechnet
werden: Das Prüfskript liest `background-color`, findet dort die Grundfarbe
des Heros und meldet brav 18,9:1 – gemessen wird also etwas anderes als das,
was man sieht. Derselbe Messfehler wie bei den Aufmachern von „Über uns"
und „Erfolge" (v2.10.3).
Nachgerechnet für den ungünstigsten Fall, weißer Himmel mit Sonne hinter
der Label-Zeile: Der Text läuft von 54 % bis 9 % über der Unterkante. Bei
der ersten Fassung (0,82 bei 45 %) stand dort rechnerisch 0,696 Deckung –
Luminanz 0,309 gegen Weiß, also **2,9:1 und damit durchgefallen**. Die
Kurve hält jetzt bis 58 % mindestens 0,86: Luminanz 0,149, Kontrast
**5,3:1**. Die Haltepunkte stehen deshalb so eng. */
.nrv-hero-voll::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
/* Deutlich heller als bis v2.32.0 (0,93 / 0,86 / 0,44 / 0,20) – von Bene
beanstandet: Der Verlauf nahm dem Video das Bild. Die Haltepunkte sind
gegen die Textzone gerechnet (20–54 % über der Unterkante) und über acht
Zeitpunkte der Schleife nachgemessen, siehe CLAUDE.md. */
background: linear-gradient(
to top,
rgba(14, 42, 79, 0.78) 0%,
rgba(14, 42, 79, 0.68) 55%,
rgba(14, 42, 79, 0.26) 80%,
rgba(14, 42, 79, 0.05) 100%
);
}
/* Auf schmalen Schirmen trägt derselbe Verlauf nicht: Der Aufmacher ist dort
460 statt 640 px hoch, der Textblock nimmt also relativ mehr Höhe ein und
reicht bis **72,7 %** über die Unterkante statt bis 54 %. Genau dort läuft
die Kurve oben schon aus – gemessen 0,38 Deckung, Label 3,26:1 und Titel
3,75:1, beide durchgefallen.
Die Haltepunkte sind deshalb nach oben gezogen. Es ist kein Verlust an
Bild: Unter 721 px lädt ohnehin kein Video, dort steht das Standbild.
**Ein Verlauf, der an einer Breite trägt, trägt nicht an jeder** – seine
Haltepunkte sind Prozent der Höhe, die Textzone aber wächst beim
Schmalerwerden mit dem Umbruch. Gegengerechnet gehört jede Breite, an der
der Aufmacher seine Höhe ändert. */
@media (max-width: 720px) {
.nrv-hero-voll::before {
background: linear-gradient(
to top,
rgba(14, 42, 79, 0.80) 0%,
rgba(14, 42, 79, 0.70) 75%,
rgba(14, 42, 79, 0.30) 92%,
rgba(14, 42, 79, 0.10) 100%
);
}
}
/* Der Inhalt sitzt in den unteren 55 % der Fläche – dort hält der Verlauf
mindestens 0,82 Deckung. Das Padding oben war mit 96 px so groß, dass der
Titel in die helle Zone über dem Horizont rutschte und über einer Sonne
stand; gemessen ragte der Block zudem 25 px unten heraus. */
/* Die Breitenbegrenzung sitzt am Container, nicht an den Kindern. Vorher war
die Gruppe „constrained" mit contentSize 1280: WordPress gibt dann JEDEM
Kind `max-width: 1280px` und `margin-inline: auto`. Titel und Vorspann
tragen aber eine eigene, kleinere `max-width` (16ch und 52ch) – und was
schmaler ist als der Container, wird zentriert. Gemessen stand der Titel
bei 1440 px um 177 px eingerückt, der Vorspann um 73.
Die Kinder einzeln auf `margin-inline: 0` zu zwingen behebt das nur bei
einer Breite: Bei 1900 px lief es genau andersherum – Label und Knopf
folgten der 1280er-Spur auf x=303, Titel und Vorspann klebten am Padding
bei x=80. **Eine Ausrichtung, die an einer Fensterbreite stimmt, ist noch
keine Ausrichtung.** Mit `layout: default` erzeugt WordPress gar keine
Regel mehr, und die Begrenzung steht hier an einer Stelle. */
.nrv-hero-voll .nrv-hero-inhalt {
width: 100%;
max-width: calc(1280px + 2 * clamp(1.5rem, 5vw, 5rem));
margin-inline: auto;
padding: clamp(1.5rem, 3vw, 2.5rem) clamp(1.5rem, 5vw, 5rem) clamp(2.5rem, 4vw, 3.5rem);
color: var(--wp--preset--color--weiss);
}
.nrv-hero-voll .nrv-hero-inhalt > * { margin-block: 0; }
.nrv-hero-voll .nrv-label { color: var(--wp--preset--color--weiss); opacity: 0.86; }
/* Titel und Vorspann stehen linksbündig unter der Marke – von Bene
gewünscht. Dass sie es nicht taten, lag am „constrained"-Layout der
Gruppe; die Begrenzung sitzt jetzt am Container (siehe dort), und beide
behalten hier nur ihre Zeilenlänge. */
.nrv-hero.nrv-hero-voll .nrv-hero-titel {
color: var(--wp--preset--color--weiss);
font-size: clamp(2.25rem, 4.2vw, 3.5rem);
line-height: 1.08;
margin-block: 0.5rem 0.875rem;
max-width: 16ch;
}
.nrv-hero.nrv-hero-voll .nrv-hero-lead {
color: var(--wp--preset--color--weiss);
font-size: clamp(1rem, 1.2vw, 1.125rem);
line-height: 1.6;
max-width: 52ch;
margin-block-end: 1.5rem;
}
.nrv-hero.nrv-hero-voll .nrv-label {
color: var(--wp--preset--color--weiss);
margin-block: 0;
}
/* Das hervorgehobene Wort im Titel („unsere *DNA*") trägt aus Abschnitt 1
eine eigene Farbregel in Tinte – auf der hellen Fläche des alten
zweispaltigen Aufmachers richtig, auf der dunklen Videofläche unsichtbar.
Derselbe Fall wie „Route planen" im dunklen Fußbereich (v2.2.1): Eine
Klasse, die anderswo definiert ist, folgt dem Farbwechsel nicht von
selbst. Drei Klassen im Selektor, damit sie den Sammelselektor schlägt. */
.nrv-hero.nrv-hero-voll .nrv-hero-titel em {
color: var(--wp--preset--color--weiss);
}
/* Umgekehrt zum Knopf auf Cremegrund: Auf dunkler Fläche ist der helle Knopf
der stärkere. Dieselbe Umkehr wie beim Login in der Servicezeile. */
.nrv-hero-voll .nrv-hero-cta .wp-block-button__link {
background-color: var(--wp--preset--color--weiss);
color: var(--wp--preset--color--navy);
}
.nrv-hero-voll .nrv-hero-cta .wp-block-button__link:hover,
.nrv-hero-voll .nrv-hero-cta .wp-block-button__link:focus-visible {
background-color: var(--wp--preset--color--weiss);
color: var(--wp--preset--color--navy);
}
/* Hier stand eine Regel, die das Video bei reduzierter Bewegung auf
`display: none` setzte und der Bühne `background-size: cover` gab – ohne
`background-image`. Gemessen blieb davon eine leere Cremefläche: Das
Standbild ist das `poster` des Videos und verschwindet mit ihm. Die
Entscheidung fällt jetzt in `navigation.js`, das die Quelle nur bei
genug Breite, ohne reduzierte Bewegung und ohne Datensparmodus einhängt;
sonst bleibt das Poster stehen (v2.32.0). */
@media (max-width: 720px) {
.nrv-hero-voll { min-height: min(68vh, 460px); }
.nrv-hero-voll .nrv-hero-titel { max-width: none; }
}
/* ===========================================================================
43. Teamübersicht (v2.20.0)
Sieben Mannschaften auf `/nrv-teams/`. Die Zahl steht fest, also steht auch
die Spaltenzahl fest – `auto-fit` hat bei der H.E.A.T-Crew (v2.16.6) und
bei den Nutzen-Modulen (v2.19.6) jeweils eine Spalte zu wenig angelegt und
eine halb leere Reihe hinterlassen. Drei Spalten gehen bei sieben Karten
mit 3 + 3 + 1 auf; die letzte Karte ist die im Aufbau und steht damit
sichtbar für sich.
--------------------------------------------------------------------------- */
.nrv-teamraster {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 1px;
background: var(--wp--preset--color--linie);
border: 1px solid var(--wp--preset--color--linie);
margin-block: 0 clamp(2.5rem, 5vw, 4rem);
}
.nrv-teamkarte {
background: var(--wp--preset--color--weiss);
padding: clamp(1.5rem, 2.5vw, 2rem);
display: flex;
flex-direction: column;
gap: 0.5rem;
margin-block: 0;
}
.nrv-teamkarte > * { margin-block: 0; }
.nrv-teamkarte-titel {
font-family: var(--wp--preset--font-family--cormorant-garamond);
font-size: clamp(1.375rem, 2vw, 1.75rem);
font-weight: 600;
line-height: 1.15;
}
.nrv-teamkarte-titel a {
text-decoration: none;
border-bottom: 1px solid transparent;
}
.nrv-teamkarte-titel a:hover,
.nrv-teamkarte-titel a:focus-visible {
border-bottom-color: var(--wp--preset--color--navy);
}
.nrv-teamkarte p:not(.nrv-label):not(.nrv-cta) {
font-size: 1rem;
line-height: 1.6;
color: var(--wp--preset--color--grau);
}
/* Das Projekt im Aufbau wird nicht ausgegraut – gedämpfter Text auf
gedämpftem Grund fiele unter 4,5:1. Es trägt stattdessen eine feine
Schraffur als Fläche und behält vollen Textkontrast. */
.nrv-teamkarte-aufbau {
background-image: repeating-linear-gradient(
135deg,
var(--wp--preset--color--weiss) 0 10px,
var(--wp--preset--color--flaeche) 10px 20px
);
}
@media (max-width: 1000px) {
.nrv-teamraster { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
.nrv-teamraster { grid-template-columns: minmax(0, 1fr); }
}
/* ===========================================================================
44. Shop-Startseite: zwei Wege als Bildkarten (v2.21.0)
Jasmine: „Claude-Vorlage mit Shop-Startseite, dann Landingpage Zhik x
Frisch und Landingpage Shop Geschäftsstelle, finde ich aufgeräumter. Die
Shop-items aus der Geschäftsstelle überfrachten die Shop-Seite gerade."
Der Artboard „Shop · Startseite" zeigt zwei gleich große Karten
nebeneinander. Zwei Elemente, also zwei feste Spalten – `auto-fit` hat an
drei Stellen (H.E.A.T-Crew, Nutzen-Module, Teamraster) jeweils eine Spalte
zu wenig angelegt.
--------------------------------------------------------------------------- */
.nrv-shop-wege {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: clamp(1.5rem, 3vw, 2.5rem);
margin-block: 0 clamp(2.5rem, 5vw, 4rem);
}
.nrv-shop-karte {
display: flex;
flex-direction: column;
gap: 0;
margin-block: 0;
background: var(--wp--preset--color--weiss);
border: 1px solid var(--wp--preset--color--linie);
}
.nrv-shop-karte > * { margin-block: 0; }
.nrv-shop-karte-bild {
margin: 0;
overflow: hidden;
}
.nrv-shop-karte-bild img {
display: block;
width: 100%;
aspect-ratio: 3 / 2;
object-fit: cover;
}
.nrv-shop-karte-kopf {
padding: clamp(1.25rem, 2vw, 1.75rem) clamp(1.25rem, 2vw, 1.75rem) 0;
gap: 1rem;
align-items: baseline;
}
.nrv-shop-karte-kopf > * { margin-block: 0; }
.nrv-shop-karte-wo {
font-size: 0.8125rem;
color: var(--wp--preset--color--grau);
text-align: end;
}
.nrv-shop-karte-titel {
font-family: var(--wp--preset--font-family--cormorant-garamond);
font-size: clamp(1.75rem, 2.6vw, 2.375rem);
font-weight: 500;
line-height: 1.1;
padding: 0.5rem clamp(1.25rem, 2vw, 1.75rem) 0;
}
.nrv-shop-karte > p:not(.nrv-cta) {
padding: 0.75rem clamp(1.25rem, 2vw, 1.75rem) 0;
font-size: 1rem;
line-height: 1.6;
}
.nrv-shop-karte > .nrv-cta {
padding: 1.25rem clamp(1.25rem, 2vw, 1.75rem) clamp(1.25rem, 2vw, 1.75rem);
margin-block-start: auto;
}
/* Das Produktfoto ist freigestellt auf Weiß – als Kartenbild im 3:2-Rahmen
würde `cover` den Stander anschneiden. Deshalb hier `contain` mit Luft,
anders als bei einem Motivfoto. */
.nrv-shop-karte-bild img[src*="stander"],
.nrv-shop-karte-bild img[src*="jubilaeum"] {
object-fit: contain;
padding: clamp(1rem, 2vw, 2rem);
background: var(--wp--preset--color--weiss);
}
@media (max-width: 760px) {
.nrv-shop-wege { grid-template-columns: minmax(0, 1fr); }
}
/* ===========================================================================
45. Partnerclubs: Weltkarte und Regionen (v2.22.0)
--------------------------------------------------------------------------- */
.nrv-partnerkarte { margin-block: clamp(1.5rem, 3vw, 2.5rem); }
.nrv-karte-flaeche {
position: relative;
background: var(--wp--preset--color--weiss);
border: 1px solid var(--wp--preset--color--linie);
overflow: hidden;
}
.nrv-karte-flaeche > img {
display: block;
width: 100%;
height: auto;
}
/* Die Punkte sitzen in Prozent – damit bleiben sie beim Skalieren an ihrer
Stelle. 10 px sind auf dem Telefon die Untergrenze für etwas, das man noch
als Markierung erkennt; größer würde die Ostseeküste zu einem Klumpen. */
.nrv-karte-punkt {
position: absolute;
width: 10px;
height: 10px;
margin: -5px 0 0 -5px;
border-radius: 50%;
background: var(--wp--preset--color--navy);
border: 2px solid var(--wp--preset--color--weiss);
box-sizing: border-box;
}
.nrv-karte-bild-text {
font-size: 0.9375rem;
color: var(--wp--preset--color--grau);
margin-block: 0.75rem 0;
}
.nrv-karte-regionen {
display: flex;
flex-wrap: wrap;
gap: 0.5rem 1.5rem;
margin-block: clamp(1.5rem, 3vw, 2.5rem) 0;
padding-block: 1rem;
border-block: 1px solid var(--wp--preset--color--linie);
}
.nrv-karte-regionen a {
font-family: var(--wp--preset--font-family--manrope);
font-size: 0.8125rem;
letter-spacing: 0.08em;
text-transform: uppercase;
text-decoration: none;
border-bottom: 1px solid transparent;
padding-block: 0.25rem;
}
.nrv-karte-regionen a:hover,
.nrv-karte-regionen a:focus-visible { border-bottom-color: var(--wp--preset--color--navy); }
.nrv-karte-regionen a span { color: var(--wp--preset--color--grau); }
/* Die Region ist seit v2.40.0 ein ``-Aufklapper (Vorschlag Jasmine).
Der Browser bringt die Mechanik mit: ohne JavaScript, mit Tastatur, und
die Seitensuche findet auch Text in zugeklappten Abschnitten. */
.nrv-karte-region { margin-block: clamp(1.25rem, 2.5vw, 2rem) 0; scroll-margin-top: 140px; }
.nrv-karte-region > summary {
display: flex;
align-items: baseline;
gap: 0.75rem;
font-family: var(--wp--preset--font-family--cormorant-garamond);
font-size: clamp(1.5rem, 2.2vw, 2rem);
font-weight: 500;
margin-block: 0 1rem;
padding-block: 0.5rem;
border-bottom: 1px solid var(--wp--preset--color--linie);
cursor: pointer;
/* Die eigene Markierung ersetzt das Dreieck des Browsers – es sitzt je
nach Browser anders und lässt sich nicht einfärben. */
list-style: none;
}
.nrv-karte-region > summary::-webkit-details-marker { display: none; }
/* Das Zeichen steht hinter dem Namen, nicht davor: Vorangestellt rückt es
die Überschrift ein, und die Regionen stünden nicht mehr auf der Kante
der übrigen Abschnitte – derselbe Fall wie beim CTA-Pfeil (v2.19.6). */
.nrv-karte-region > summary::after {
content: "";
width: 0.5em;
height: 0.5em;
margin-inline-start: auto;
border-right: 2px solid var(--wp--preset--color--navy);
border-bottom: 2px solid var(--wp--preset--color--navy);
transform: rotate(45deg);
transform-origin: center;
transition: transform 0.15s ease;
align-self: center;
}
.nrv-karte-region[open] > summary::after { transform: rotate(-135deg); }
/* Die Sprungnavigation ist jetzt der Hauptweg in eine Region – sie braucht
Fingergröße. Gemessen waren es 30 px. */
.nrv-karte-regionen a {
min-height: 44px;
display: inline-flex;
align-items: center;
}
.nrv-karte-region > summary:focus-visible {
outline: 2px solid var(--wp--preset--color--navy);
outline-offset: 3px;
}
.nrv-karte-zahl { color: var(--wp--preset--color--grau); font-size: 0.6em; }
/* Der Clubname ist der Verweis auf sein Datenblatt. Die Zeile ist damit
Klickfläche – deshalb die 44 px, nicht nur der Text. */
.nrv-karte-clublink {
display: flex;
justify-content: space-between;
gap: 0.75rem;
width: 100%;
min-height: 44px;
align-items: center;
text-decoration: none;
color: inherit;
}
.nrv-karte-clublink:hover,
.nrv-karte-clublink:focus-visible {
text-decoration: underline;
text-underline-offset: 0.2em;
}
/* „(PDF)" sagt vor dem Klick, dass ein Download folgt – wie in der
Dateiliste (v1.21.0). */
.nrv-karte-clublink .nrv-karte-land::after {
content: " (PDF)";
color: var(--wp--preset--color--grau);
font-size: 0.85em;
}
@media (prefers-reduced-motion: reduce) {
.nrv-karte-region > summary::after { transition: none; }
}
/* Drei Spalten: 45 Clubs in Europa wären einspaltig eine sehr lange Liste –
genau das, was Jasmine mit „anstatt alles untereinander zu schreiben"
meint. Die Spalten füllen sich senkrecht, also bleibt die alphabetische
Reihenfolge spaltenweise lesbar. */
.nrv-karte-clubliste {
/* `.entry-content :where(ul, ol)` begrenzt Listen auf 66ch für die
Zeilenlänge im Fließtext – gemessen 689 px. Eine dreispaltige Clubliste
ist kein Fließtext: Die Spalten blieben bei 203 px, und fast jeder
Clubname brach auf zwei Zeilen um. Dieselbe Falle wie beim Hero-Titel
mit seinen 18ch (v2.35.1). */
max-width: none;
columns: 3;
column-gap: clamp(1.5rem, 3vw, 2.5rem);
list-style: none;
margin: 0;
padding: 0;
}
.nrv-karte-clubliste li {
break-inside: avoid;
/* Gleiche Zeilenhöhe für alle: Einträge MIT Datenblatt tragen die 44-px-
Klickfläche und waren 58 px hoch, die 13 ohne nur 36 – in einer
dreispaltigen Liste fällt der Sprung als Unruhe auf, obwohl er nur
bedeutet, dass dort kein PDF liegt. */
display: flex;
align-items: center;
min-height: 44px;
padding-block: 0.4rem;
border-bottom: 1px solid var(--wp--preset--color--linie);
font-size: 0.9375rem;
line-height: 1.45;
display: flex;
justify-content: space-between;
gap: 0.75rem;
}
.nrv-karte-land {
color: var(--wp--preset--color--grau);
font-size: 0.8125rem;
white-space: nowrap;
padding-top: 0.15em;
}
@media (max-width: 900px) {
.nrv-karte-clubliste { columns: 2; }
}
@media (max-width: 600px) {
.nrv-karte-clubliste { columns: 1; }
.nrv-karte-punkt { width: 8px; height: 8px; margin: -4px 0 0 -4px; border-width: 1px; }
}
/* ===========================================================================
46. Der Kopf auf dem Telefon (v2.24.0)
Von Bene gemeldet: „Mobil funktioniert noch nicht sehr viel?"
Gemessen bei 375 × 812: Der Kopf nahm **259 px** ein, ein knappes Drittel
der Fensterhöhe. Davon 137 px allein die Servicezeile, weil Suchfeld,
„Mitglied werden" und Login dort **untereinander** standen – eine Folge des
Umbruchs, den der Knopf in v2.22.5 nötig gemacht hat.
Der Artboard „Mobil · Seite mit mitlaufender Leiste" setzt dagegen eine
einzige Zeile von **76 px**: Wappen und Schriftzug links, Menü-Symbol
rechts, keine Servicezeile.
Vollständig übernehmen lässt sich das nicht: Der Navigationsblock von
WordPress nimmt kein Suchfeld auf, und „Mitglied werden" ist der Knopf,
auf den Jasmines Briefing besteht. Beides im geöffneten Menü zu verstecken
hieße, es auf dem Telefon praktisch zu streichen.
Umgesetzt sind deshalb zwei Zeilen statt vier: der Kopf einzeilig nach dem
Artboard, darüber eine Servicezeile, die ebenfalls in eine Zeile passt.
--------------------------------------------------------------------------- */
@media (max-width: 780px) {
/* --- Kopfzeile: Marke links, Menü rechts, wie im Artboard ---
**Das Flex gehört an `.nrv-kopf`, nicht an `.nrv-kopf-mitte`.** Die
Navigation ist dessen Geschwister, nicht sein Kind – der Kopf hat drei
Kinder: Marke-Hülle, Trenner, Navigation. Mein erster Versuch setzte
`display: flex` eine Ebene zu tief, und der Menü-Knopf stand weiter
unter der Marke statt daneben. */
/* **Zwei Klassen im Selektor.** `.nrv-kopf` allein verliert gegen
WordPress' generierte Layout-Regel für den Group-Block – gemessen stand
dort weiterhin `display: block`, und der Menü-Knopf blieb unter der
Marke. Derselbe Merksatz wie bei den Sozialsymbolen und dem Spenden-
Modul, jetzt zum fünften Mal: Jede eigene `display`-Regel auf einem
WordPress-Block braucht mindestens zwei Klassen. */
.nrv-kopf.wp-block-group {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
flex-wrap: nowrap;
}
/* **Die auto-Margins müssen weg.** `.nrv-kopf` ist ein „constrained"-
Container; WordPress liefert dafür
`> :where(…) { margin-left: auto !important; margin-right: auto !important }`.
Bei Flex-Items saugen diese Margins den freien Raum auf – statt an den
Rändern standen Marke und Menü-Knopf mittig beieinander (gemessen bei
716 px: Stander bei 152 statt 24). `justify-content` ändert daran
nichts, weil die Margins zuerst bedient werden.
Dieselbe Falle wie bei den Produktkacheln des Shops (v2.13.3), dort mit
umgekehrtem Vorzeichen: Da verhinderten sie das Strecken. */
.nrv-kopf.wp-block-group > * {
margin-inline: 0 !important;
}
.nrv-kopf .nrv-kopf-mitte {
flex: 0 1 auto;
min-width: 0;
min-height: 0;
}
.nrv-kopf .nrv-marke {
justify-content: flex-start;
padding-block: 0.625rem;
flex: 0 1 auto;
min-width: 0;
}
/* Über die **Höhe** steuern, nicht über die Breite: Bei einem Verhältnis
von 3,68 : 1 ergibt eine Breitenangabe auf dem Telefon eine Marke, die
entweder die halbe Zeile frisst oder unleserlich wird. */
.nrv-kopf .nrv-marke .wp-block-site-logo img {
width: auto;
height: clamp(42px, 13vw, 56px);
max-width: 100%;
}
/* Der Menü-Knopf steht in der Zeile, nicht absolut daneben. Damit
bestimmt die Marke die Höhe und nichts überlappt. */
.nrv-kopf > .wp-block-navigation {
position: static;
inset: auto;
display: flex;
align-items: center;
flex: 0 0 auto;
margin: 0;
min-height: 0;
}
/* Die Linie gehört unter die zweizeilige Fassung, nicht zwischen Marke und
Menü – in einer Zeile hätte sie nichts zu trennen. */
.nrv-kopf-trenner {
display: none;
}
/* --- Servicezeile: eine Zeile statt drei --- */
.nrv-servicezeile {
border-bottom: 1px solid var(--wp--preset--color--linie);
}
.nrv-service-zeile {
gap: 0.5rem;
}
.nrv-service-rechts {
width: 100%;
flex-wrap: nowrap !important;
justify-content: flex-end;
gap: 0.5rem;
row-gap: 0;
}
.nrv-service-rechts > .nrv-kopf-cta {
flex: 0 0 auto;
}
.nrv-service-rechts > .nrv-kopf-cta .wp-block-button,
.nrv-service-rechts > .nrv-kopf-cta .wp-block-button__link {
width: auto;
}
/* Gerechnet für 375 px: Rand 2 × 16 lässt 343 px. Suchfeld 110, Login 58,
Knopf 140, zwei Fugen à 8 – zusammen 324. Die erste Fassung kam auf
363 px, und das Suchfeld rutschte mit `left: -36` aus dem Bild. */
/* 0,75 rem = 12 px ist die Untergrenze des Designsystems für
Beschriftungen. Ich hatte hier zwischenzeitlich 0,6875 rem (11 px)
gesetzt, um die Zeile zu füllen – das ist genau die Stelle, an der ein
Maß nicht verhandelbar ist. Lieber das Suchfeld schmaler. */
.nrv-service-rechts > .nrv-kopf-cta .wp-block-button__link {
min-height: 44px;
padding: 0 0.75rem;
font-size: 0.75rem;
gap: 0.375rem;
}
.nrv-servicezeile .nrv-suche {
width: min(88px, 24vw);
flex: 0 1 auto;
}
.nrv-servicezeile .nrv-suche input {
font-size: 16px; /* darunter zoomt Safari beim Antippen die Seite heran */
padding-inline: 0.5rem;
}
/* Die 44 px standen seit v2.24.7 als Vorgabe im Kommentar darunter – gesetzt
waren sie nie. Gemessen: Feld 48 × 33 px, Knopf 40 × 33. Das ist kleiner
als die Fläche, die ein Finger trifft, und es fällt beim Ansehen nicht
auf, weil die Zeile optisch stimmt. Gefunden hat es `mobil-pruefen.js`. */
.nrv-servicezeile .nrv-suche .wp-block-search__inside-wrapper,
.nrv-servicezeile .nrv-suche input,
.nrv-servicezeile .nrv-suche .wp-block-search__button {
min-height: 44px;
}
.nrv-servicezeile .nrv-suche .wp-block-search__button {
min-width: 44px;
}
/* Der Stander im kompakten Kopf ist 40 × 40 px – als einziger Weg zurück
zur Startseite gehört er auf Fingergröße. Das Bild bleibt 40 px, die
Fläche wächst über den Innenabstand. */
.nrv-marke-stander {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 44px;
min-height: 44px;
}
/* Der Platzhalter „Suchen" wird bei dieser Feldbreite nach zwei Buchstaben
abgeschnitten – „Su" sieht nach Fehler aus. Die Lupe im Feld trägt die
Bedeutung; das Feld behält sein `aria-label`, Screenreader verlieren
also nichts. */
/* Derselbe Selektor wie die Regel weiter oben, die den Platzhalter auf
`text-leise` setzt – mit `input` statt `.wp-block-search__input` wäre
meine Regel um eine Klasse schwächer und bliebe wirkungslos. Gemessen
stand dort weiterhin rgb(85, 103, 127). */
.nrv-servicezeile .nrv-suche .wp-block-search__input::placeholder {
color: transparent;
}
.nrv-service-login a {
font-size: 0.75rem;
letter-spacing: 0.04em;
white-space: nowrap;
}
}
/* Unter 360 px gehen Suchfeld, Knopf und Login nicht mehr nebeneinander:
Bei 320 px stehen 288 px zur Verfügung, gebraucht werden 296 – gemessen
ragte das Suchfeld 24 px nach links heraus. Dort bricht die Zeile um.
Das kostet eine Zeile Höhe, aber nur auf den schmalsten Geräten; enger
zu setzen würde die Klickflächen unter die 44 px drücken, die ein Finger
braucht. */
@media (max-width: 359px) {
.nrv-service-rechts {
flex-wrap: wrap !important;
justify-content: space-between;
row-gap: 0.5rem;
}
.nrv-servicezeile .nrv-suche {
width: min(150px, 46vw);
}
}
/* ===========================================================================
47. Mehr Luft auf dem ersten Bildschirm der Newsseite (v2.28.0)
Von Bene gemeldet: „Die News-Seite ist immer noch etwas klobig. Plus:
Dadurch sieht man auf dem ersten Screen wenig."
Gemessen bei 1440 × 900, also auf dem ersten Bildschirm:
| Element | beginnt bei | Höhe |
|--------------------|------------:|-----:|
| Kopf | 0 | 312 |
| „Aktuelles / NRV Magazin" | 336 | 96 |
| Rubrikenleiste (zwei Zeilen) | 452 | 97 |
| Lead-Bild | 597 | 462 |
| **erster Beitragstitel** | **1102** | — |
505 px Vorspann, und der Titel des Aufmachers stand **unterhalb** des
Bildschirms. Man sah den Kopf, eine Überschrift, eine Rubrikenliste und
ein angeschnittenes Bild – keinen einzigen Beitrag.
Drei Eingriffe, keiner davon kürzt Inhalt:
--------------------------------------------------------------------------- */
/* 47.1 Der Aufmacher steht nebeneinander statt gestapelt.
Der Artboard „News · Übersicht" setzt den Lead-Beitrag als Raster
`8fr 4fr` mit Text und Bild **nebeneinander**. Bei uns lag das Bild über
dem Text: 821 × 462 px, der Titel erst darunter. Nebeneinander rückt er um
rund 380 px nach oben und steht neben dem Bild im Blick.
Bild links, Text rechts – wie der Aufmacher der Startseite, den Jasmine
als stimmig bezeichnet hat. */
/* Label, Titel, Auszug und Datum sind **Geschwister**, kein Textblock – der
Query-Loop gibt sie flach aus. Jedes bekommt im Raster eine eigene Zeile;
das Bild stand deshalb allein in Zeile 1 und der Titel rutschte in Zeile 3,
also wieder unter das Bild. Gemessen: Bild bei y = 548, Titel bei 805.
Vier explizite Zeilen, und das Bild spannt über alle. **`1 / -1` braucht
genau das** – in einem Raster mit automatisch angelegten Zeilen gibt es
keine Linie `-1`, derselbe Fall wie beim Spenden-Modul (v2.8.0). */
/* `2fr 1fr` seit v3.63.0 – gemessen setzt der Artboard 821 / 411 px bei
1280 px Rasterbreite. Solange der Lead in einer 821-px-Spalte stand,
war `1fr 1fr` die richtige Annäherung; über die volle Breite ist es das
Raster des Entwurfs selbst. */
.nrv-magazin-lead > ul > li,
.nrv-magazin-lead .wp-block-post {
display: grid;
grid-template-columns: 2fr 1fr;
grid-template-rows: repeat(4, auto);
gap: 0 clamp(1.5rem, 2.5vw, 2.5rem);
align-content: center;
}
.nrv-magazin-lead .nrv-magazin-lead-bild {
grid-column: 1;
grid-row: 1 / -1;
align-self: center;
margin-block: 0;
}
/* 16:9 wie im Artboard („Hauptaufmacher · Bild 16:9"). Der Grund für die
frühere 3:2-Korrektur ist mit v3.63.0 entfallen: In der halbierten Spalte
von 410 px wäre ein 16:9-Bild nur 225 px hoch gewesen; über die 821 px
des Entwurfsrasters sind es 462 px. */
.nrv-magazin-lead .nrv-magazin-lead-bild img {
aspect-ratio: 16 / 9;
object-fit: cover;
}
.nrv-magazin-lead > ul > li > *:not(.nrv-magazin-lead-bild),
.nrv-magazin-lead .wp-block-post > *:not(.nrv-magazin-lead-bild) {
grid-column: 2;
}
/* Der Textteil war auf die Bildbreite gesetzt; neben dem Bild braucht er
die Spaltenbreite. */
.nrv-magazin-lead .nrv-label { margin-block: 0 0.375rem; }
/* 47.2 Die Rubrikenleiste in eine Zeile.
Dreizehn Rubriken brauchen bei 1280 px zwei Zeilen und damit 97 px. Auf
dem Telefon scrollt die Leiste bereits waagerecht (v2.15.3); dasselbe gilt
jetzt überall. Das spart knapp 50 px und hält die Liste vollständig –
kürzen hieße, Rubriken zu verstecken. */
/* **Ohne sichtbaren Scrollbalken.** `scrollbar-width: thin` zeigt auf
macOS, wenn dort „Scrollbalken immer einblenden" eingestellt ist, einen
dauerhaften grauen Riegel quer unter der Leiste – das sieht aus wie ein
Fehler und war das erste, was Bene auffiel. Dass es rechts weitergeht,
zeigt stattdessen der Verlauf am Rand.
Die Leiste bleibt mit der Tastatur erreichbar: `tabindex` am Container
wäre hier falsch (sie enthält nur Verweise), aber der Fokus wandert beim
Durchtabben durch die Rubriken und scrollt die Leiste von selbst mit. */
.nrv-rubriken-liste {
flex-wrap: nowrap;
overflow-x: auto;
scrollbar-width: none;
-ms-overflow-style: none;
padding-bottom: 0.25rem;
-webkit-overflow-scrolling: touch;
}
.nrv-rubriken-liste::-webkit-scrollbar {
display: none;
}
.nrv-rubriken-liste li { flex: 0 0 auto; }
/* Dass es rechts weitergeht, muss man sehen. Gemessen bei 1440 px: Die
Leiste braucht 1.677 px bei 1.280 verfügbar, zwei von dreizehn Rubriken
stehen außerhalb. **397 px davon ist ein einziger Eintrag** – „Gelebte
Inklusion auf der Regattabahn". Ohne ihn passte die Leiste exakt; das
Kürzen dieses Rubriknamens ist Redaktionsarbeit und steht als offener
Punkt.
Der Verlauf liegt am Container, nicht an der scrollenden Liste – sonst
wanderte er beim Scrollen mit. */
.nrv-rubriken {
position: relative;
}
.nrv-rubriken::after {
content: "";
position: absolute;
inset-block: 1px;
right: 0;
width: 3rem;
pointer-events: none;
background: linear-gradient(
to right,
rgba(255, 255, 255, 0),
var(--wp--preset--color--weiss) 85%
);
}
/* 47.3 Weniger Vorspann über dem Inhalt. */
.nrv-magazin-kopf {
margin-block: 0 0.875rem;
}
.nrv-rubriken {
margin-block: 0 clamp(1.5rem, 2.5vw, 2rem);
padding-block: 0.75rem;
}
@media (max-width: 860px) {
/* Unter 860 px ist die halbe Spalte zu schmal für Bild und Text
nebeneinander – dort wieder gestapelt. */
.nrv-magazin-lead > ul > li,
.nrv-magazin-lead .wp-block-post {
grid-template-columns: minmax(0, 1fr);
grid-template-rows: none;
}
.nrv-magazin-lead .nrv-magazin-lead-bild { grid-row: auto; }
.nrv-magazin-lead .nrv-magazin-lead-bild,
.nrv-magazin-lead > ul > li > *:not(.nrv-magazin-lead-bild),
.nrv-magazin-lead .wp-block-post > *:not(.nrv-magazin-lead-bild) {
grid-column: 1;
}
.nrv-magazin-lead .nrv-magazin-lead-bild img { aspect-ratio: 16 / 9; }
}
/* Die Art des Archivs über dem Titel – gesetzt wie der Eyebrow „Aktuelles"
über „NRV Magazin", damit beide Seiten gleich beginnen. */
.nrv-archiv-art {
margin-block: 0 0.25rem;
}
.nrv-archiv-art + .wp-block-query-title {
margin-block-start: 0;
}
/* Der Ausschnitt des Inklusionsbildes steht seit dem kompakten Modul als
`object-position` am `![]()
` im Markup – der Slot ist dort breiter als
zuvor (0,53 : 1 waren es im hohen Modul), und die Position gehört zum
Bild, nicht zu seiner dritten Stelle im Raster. Ein `:nth-child(3)`
greift daneben, sobald jemand die Reihenfolge im Editor ändert. */
/* ===========================================================================
48. Blättern (v2.39.0)
Die Seitenzahlen liefen bis hierher auf dem WordPress-Standard – also ohne
jede eigene Regel. Gemessen bei 375 px: **8 × 17 px** je Ziffer, die „…"
bei 10 px. Das ist deutlich kleiner als die 44 px, die ein Finger trifft,
und betrifft jede geblätterte Liste: Suche, `/news/` ab Seite 2, alle
Rubriken- und Stammdaten-Archive.
Gefunden hat es `mobil-pruefen.js` – beim Ansehen fällt es nicht auf, weil
die Zeile optisch in Ordnung wirkt. Man merkt es erst beim Danebentippen.
=========================================================================== */
/* Der Selektor nennt den Block, nicht unsere Klasse: `nrv-blaettern` steht
nur in `search.html`. Auf `/news/page/2/` und in den Rubriken-Archiven
kommt die Navigation aus `index.html` ohne diese Klasse – dort blieben die
8 × 17 px stehen, obwohl die Suche längst stimmte. Beim Prüfen EINER Seite
wäre das durchgegangen. */
.wp-block-query-pagination-numbers {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 4px;
}
.wp-block-query-pagination .page-numbers {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 44px;
min-height: 44px;
padding-inline: 6px;
text-decoration: none;
border: 1px solid transparent;
}
.wp-block-query-pagination a.page-numbers:hover,
.wp-block-query-pagination a.page-numbers:focus-visible {
border-color: var(--wp--preset--color--linie);
background: var(--wp--preset--color--weiss);
}
/* Die laufende Seite wird nicht nur fett, sondern bekommt eine Fläche. Eine
reine Schriftstärke ist bei dieser Mitgliedschaft kein verlässlicher
Unterschied – dieselbe Entscheidung wie bei der Rubrikenleiste (v2.15.3). */
.wp-block-query-pagination .page-numbers.current {
background: var(--wp--preset--color--navy);
color: var(--wp--preset--color--weiss);
font-weight: 700;
}
/* Die Auslassung ist keine Schaltfläche – sie braucht keine Klickfläche und
soll auch keine vortäuschen. */
.wp-block-query-pagination .page-numbers.dots {
min-width: 0;
padding-inline: 2px;
}
/* „Neuere Beiträge" und „Weiter" sind eigene Elemente neben den Zahlen und
waren mit 23 px Höhe ebenso zu flach – gemessen 103 × 23 und 44 × 23. */
.wp-block-query-pagination-previous,
.wp-block-query-pagination-next {
display: inline-flex;
align-items: center;
min-height: 44px;
}
/* ===========================================================================
49. Der mobile Kopf nach dem Entwurf (v2.43.0)
Von Bene beanstandet: „Wir haben eine klare Vorgabe im Canvas, ignorieren
sie aber. Warum?" – zu Recht.
Meine Begründung von v2.9.7 lautete: „Der mobile Artboard blendet die
Servicezeile ganz aus und legt Suche, Login und Kontakt ins geöffnete
Menü. Das kann der Navigationsblock von WordPress nicht – er nimmt kein
Suchfeld auf." **Diese Begründung hält nicht.**
Der Artboard legt kein Suchfeld ins Menü, sondern einen **Textlink**
(„Mitglieder-Login · Kontakt · Suche · EN"). Ein Link ist kein Formular –
den nimmt jede Navigation auf. Und Login und „Mitglied werden" liegen im
Entwurf überhaupt nicht im Menü, sondern in einer **mitlaufenden Leiste am
unteren Rand**, die mit dem Navigationsblock nichts zu tun hat.
Aus einer echten, aber eng begrenzten Einschränkung (ein Suchkasten im
Menü ginge nicht) habe ich den Schluss gezogen, die ganze Vorgabe zu
verwerfen. **Derselbe Denkfehler wie bei „Mitglied werden" (v2.22.4):
Eine Anforderung, die an einem Detail scheitert, rechtfertigt keine
Abweichung im Ganzen.**
| | vorher | Entwurf |
|---|---|---|
| Kopf | 128 px | **76 px** |
| Servicezeile | 63 px sichtbar | keine |
| Marke | Stander allein | Wappen + Schriftzug |
| Leiste unten | keine | „Mitglied werden" + Login |
=========================================================================== */
@media (max-width: 720px) {
/* Die Servicezeile entfällt. Suche und Login wandern ins Menü (siehe
`nrv-menue-dienste`), „Mitglied werden" in die Leiste unten. */
.nrv-servicezeile { display: none; }
/* Kopf: Marke links, Menü rechts, 76 px wie im Entwurf. */
.nrv-kopf.wp-block-group {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
min-height: 76px;
padding-block: 0;
}
.nrv-kopf-mitte {
flex: 0 1 auto;
min-width: 0;
}
.nrv-marke {
display: flex;
align-items: center;
gap: 12px;
justify-content: flex-start;
}
/* Der Entwurf zeigt Wappen UND Schriftzug nebeneinander. Unsere
Wort-Bild-Marke stapelt beides übereinander (828 × 225) – bei 48 px
Höhe wäre der Schriftzug 13 px hoch und unlesbar. Deshalb mobil der
Stander plus ein gesetzter Schriftzug, wie im Artboard. */
.nrv-kopf .wp-block-site-logo { display: none; }
/* Der Stander steht links vom Schriftzug, wie im Artboard. Im Markup
folgt er ihm, weil er für den kompakten Desktop-Kopf dort hingehört –
`order` dreht es, ohne die Vorlesereihenfolge zu verschlechtern: Beide
sind Teil desselben Verweises zur Startseite. */
.nrv-marke-stander {
display: inline-flex;
order: -1;
min-width: 0;
min-height: 0;
}
.nrv-marke-stander img {
height: 44px;
width: auto;
}
.nrv-marke-schriftzug {
display: block;
margin: 0;
font-family: var(--wp--preset--font-family--cormorant-garamond);
font-size: 1.0625rem;
font-weight: 500;
line-height: 1.12;
letter-spacing: 0.01em;
text-transform: uppercase;
}
.nrv-marke-schriftzug a {
color: var(--wp--preset--color--navy);
text-decoration: none;
}
/* Die Leiste am unteren Rand. `fixed`, nicht `sticky`: Sie soll immer
stehen, nicht erst am Ende des Dokuments. */
.nrv-mobilleiste {
position: fixed;
inset-inline: 0;
bottom: 0;
z-index: 90;
display: flex;
gap: 10px;
padding: 12px 20px calc(12px + env(safe-area-inset-bottom, 16px));
background: color-mix(in srgb, var(--wp--preset--color--weiss) 97%, transparent);
border-top: 1px solid var(--wp--preset--color--linie);
box-shadow: 0 -6px 24px rgba(14, 42, 79, 0.08);
}
.nrv-mobilleiste-cta {
flex: 1 1 auto;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
min-height: 52px;
padding-inline: 20px;
background: var(--wp--preset--color--navy);
color: var(--wp--preset--color--weiss);
text-decoration: none;
font-size: 0.9375rem;
font-weight: 600;
border-radius: 0;
}
.nrv-mobilleiste-login {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
justify-content: center;
width: 52px;
min-height: 52px;
border: 1px solid var(--wp--preset--color--linie);
border-radius: 0;
color: var(--wp--preset--color--navy);
}
.nrv-mobilleiste-login:hover,
.nrv-mobilleiste-login:focus-visible {
border-color: var(--wp--preset--color--navy);
}
/* Die Leiste verdeckt sonst das Seitenende – vor allem den Fußbereich. */
body { padding-bottom: 92px; }
}
/* Über 720 px gibt es die Leiste nicht: Dort stehen Login und „Mitglied
werden" in der Servicezeile, wie der Desktop-Entwurf es zeigt. */
@media (min-width: 721px) {
.nrv-mobilleiste { display: none; }
.nrv-marke-schriftzug { display: none; }
}
/* Die Dienste-Zeile am Ende des geöffneten Menüs (v2.43.1), nach dem
Artboard „Mobil · Menü geöffnet". Nur im Overlay sichtbar – auf dem
Desktop stehen Login und Suche in der Servicezeile. */
.nrv-menue-dienste { display: none; }
.wp-block-navigation__responsive-container.is-menu-open .nrv-menue-dienste {
display: flex;
flex-wrap: wrap;
gap: 4px 24px;
padding-block: 20px;
font-size: 0.8125rem;
font-weight: 500;
}
.nrv-menue-dienste a {
padding-block: 10px;
min-height: 44px;
display: inline-flex;
align-items: center;
color: var(--wp--preset--color--navy);
text-decoration: none;
}
.nrv-menue-dienste a:hover,
.nrv-menue-dienste a:focus-visible {
text-decoration: underline;
text-underline-offset: 0.2em;
}
/* Im Overlay folgt das Untermenü dem `aria-expanded` seines Schalters.
Der Verbinder ist `~`, nicht `+`: Zwischen Button und Untermenü steht ein
`