/*
* Naturata — Gestaltungsebene
*
* Oliv #535d00 traegt die Seite: Aufmacher, Knoepfe, Verlinkungen,
* Abschnittsmarken. Das Blau aus dem Logo (#09255c) setzt Kontrapunkte —
* Zahlenband, eine der beiden Karten, Fusszeile. Zu viel davon nimmt
* der Seite die Waerme, deshalb bleibt es die Ausnahme, nicht die Regel.
* Limette ist der Akzent zu beiden.
* Tomate ist die einzige warme Ausnahme und kommt je Seite hoechstens
* einmal vor. Moehre und Aubergine bleiben in der Palette, damit die
* Redaktion sie hat — im Entwurf werden sie nicht mehr durchrotiert.
*
* Kontrastwerte (WCAG, gerechnet):
* Blau #09255c weiss darauf 14.7:1 Limette darauf 8.9:1
* Oliv #535d00 weiss darauf 7.1:1
* Tomate #b0392a weiss darauf 6.1:1
* Sandton #f2eddc Text darauf 12.6:1
* Limette #c8d200 NIE Text auf hell — nur Flaeche (1.66:1 auf Weiss)
* Text #232219 AUF Limette dagegen 9.4:1
*/
/* ==========================================================
0. Pinselstriche und Wellen als Datenquelle
Als SVG-Data-URI, damit sie keinen Request kosten und die
Unregelmaessigkeit im Pfad steckt, nicht in einer Textur.
========================================================== */
:root {
/* Pinselstrich: voller Koerper, ungleiche Enden, wellige Kanten.
Fuellt die Hoehe der viewBox weitgehend aus, damit er als
Farbflaeche hinter dem Text wirkt und nicht als Linie. */
--nt-pinsel-limette: url('data:image/svg+xml;utf8,');
--nt-pinsel-blau: url('data:image/svg+xml;utf8,');
--nt-pinsel-strich: url('data:image/svg+xml;utf8,');
/* Freier Pinselschwung als Deko-Form, nicht als Hintergrund. */
--nt-wischer: url('data:image/svg+xml;utf8,');
}
/* ==========================================================
1. Grundfarbe: Creme statt Weiss
========================================================== */
body {
background-color: var(--wp--preset--color--base);
}
/* Vollflaechige Farbfelder stossen direkt aneinander. Der
allgemeine Blockabstand von WordPress liess sonst einen
cremefarbenen Streifen zwischen Aufmacher und Aussagenband
stehen - sichtbar als heller Riss quer ueber die Seite. */
.nt-aufmacher,
.nt-aussagen,
.nt-zahlen,
.nt-satz {
margin-block-start: 0;
}
/* ==========================================================
2. Abschnittsuebergaenge — keine
Farbfelder stossen gerade aneinander. Welle, Pinselkante und
Schraege sind der Reihe nach gescheitert; die Schraege an
ihrer Geometrie, weil ein Dreieck auf null auslaeuft und die
Kante dort wieder gerade wirkt.
Gerade Linien sind die Grundordnung. Schraeg ist nur, was
fuer sich schraeg steht: Karten, Ziffern, Siegel.
Die Farbklassen bleiben, weil einzelne Bausteine sie noch
zur Einfaerbung nutzen.
========================================================== */
.nt-kante-creme { --nt-kante-farbe: var(--wp--preset--color--base); }
.nt-kante-sand { --nt-kante-farbe: var(--wp--preset--color--base-2); }
.nt-kante-oliv { --nt-kante-farbe: var(--wp--preset--color--primary); }
.nt-kante-blau { --nt-kante-farbe: var(--wp--preset--color--secondary); }
/* ==========================================================
2b. Gemuese als einzelne Zeichnungen
Ein gekacheltes Muster war der falsche Weg: es wiederholt
sich zwangslaeufig und liest sich dadurch als Tapete. Statt-
dessen stehen einzelne Zeichnungen an unregelmaessigen
Stellen — so wie im Satzband, wo es funktioniert hat.
========================================================== */
.nt-deko-feld {
position: relative;
overflow: hidden;
isolation: isolate;
}
.nt-deko {
position: absolute;
z-index: -1;
color: var(--wp--preset--color--primary);
opacity: 0.28;
pointer-events: none;
}
.nt-deko svg { width: 100%; height: auto; display: block; }
/* Drei Groessen, drei Lagen, drei Drehungen - gleich grosse
Zeichnungen an gleichen Stellen lesen sich als Raster. */
.nt-deko--a { left: 3%; bottom: 9%; width: min(11vw, 7rem); transform: rotate(-9deg); opacity: 0.3; }
.nt-deko--b { left: 13%; top: 16%; width: min(7vw, 4.5rem); transform: rotate(11deg); opacity: 0.22; }
.nt-deko--c { right: 5%; bottom: 12%; width: min(15vw, 9.5rem); transform: rotate(-5deg); opacity: 0.28; }
/* Die Markenillustration von Naturata: gestempelte Gemuese- und
Kraeutersilhouetten in drei Gruentoenen. Sie liegt im Bestand
(logo_collage_Hintergrund_144.png), war dort aber auf weissem
Grund - hier freigestellt als assets/bilder/collage-gemuese.png.
Das ist die eigentliche Handschrift der Marke, gedruckt statt
gezeichnet. Sie steht deshalb gross und ruhig im Hintergrund,
nicht als Symbol neben dem Text. */
.nt-collage {
position: absolute;
z-index: -1;
pointer-events: none;
background-image: url('../bilder/collage-gemuese.png');
background-size: contain;
background-repeat: no-repeat;
aspect-ratio: 1261 / 847;
}
/* Die Motive lagen zum Teil ueber der Abschnittskante und wurden
von overflow:hidden angeschnitten. Sie stehen jetzt vollstaendig
im Bild - eine angeschnittene Illustration liest sich als Fehler,
nicht als Absicht. */
.nt-collage--gross {
left: 1%;
bottom: 6%;
width: min(30vw, 24rem);
opacity: 0.15;
transform: rotate(-5deg);
}
.nt-collage--klein {
right: 2%;
top: 10%;
width: min(20vw, 15rem);
opacity: 0.13;
transform: rotate(7deg) scaleX(-1);
}
.nt-collage--band {
right: 1%;
bottom: 12%;
width: min(20vw, 15rem);
opacity: 0.12;
transform: rotate(-11deg);
}
.nt-collage--satz {
left: 1%;
top: 8%;
width: min(20vw, 15rem);
opacity: 0.14;
transform: rotate(4deg) scaleX(-1);
}
/* Im blauen Zahlenband braucht die Illustration mehr Deckkraft,
sonst verschwindet das Gruen im Dunkeln. */
.nt-collage--zahlen {
left: 1.5%;
bottom: 8%;
width: min(18vw, 14rem);
opacity: 0.26;
transform: rotate(6deg);
}
@media (max-width: 60rem) {
.nt-collage { display: none; }
}
/* Unter 60rem gibt es keinen Rand, an dem eine Zeichnung stehen
koennte, ohne dem Text in die Quere zu kommen. */
@media (max-width: 60rem) {
.nt-deko { display: none; }
}
/* ==========================================================
3. Aufmacher — Markenblau, zweigeteilt
Links die Botschaft, rechts der funktionale Teil. Vorher
stand alles untereinander und rechts hing nur das Siegel;
jetzt traegt die rechte Spalte den Postleitzahl-Check und
das Siegel sitzt als Marke darueber.
========================================================== */
.nt-aufmacher {
position: relative;
overflow: hidden;
background-color: var(--wp--preset--color--primary);
color: var(--wp--preset--color--weiss);
/* Weniger Luft oben: zusammen mit dem Innenabstand der
Kopfzeile stand sonst ein Leerraum von fast 130 Pixeln
zwischen Logo und Ueberschrift, und der Kopfbereich wirkte
dadurch hoeher als er ist. */
padding-top: clamp(2rem, 4vw, 3rem);
/* Die Postleitzahl-Karte stand fast auf der Unterkante. Sie
ist gekippt und wirft einen Schatten - beides braucht Luft,
sonst sieht es aus wie abgeschnitten. */
padding-bottom: clamp(2.5rem, 5vw, 3.5rem);
}
/* Zwei weiche Lichtflecken statt Raster — nimmt die Haerte raus. */
.nt-aufmacher::before {
content: "";
position: absolute;
inset: -20% -10% auto -10%;
height: 140%;
background:
radial-gradient(54% 64% at 12% 18%, rgba(22, 26, 0, 0.32), transparent 72%),
radial-gradient(42% 52% at 88% 72%, rgba(200, 210, 0, 0.16), transparent 72%);
pointer-events: none;
}
.nt-aufmacher > * {
position: relative;
}
.nt-aufmacher :is(h1, h2, h3) {
color: var(--wp--preset--color--weiss);
}
.nt-aufmacher__raster {
align-items: center;
gap: clamp(2rem, 5vw, 4rem);
}
.nt-aufmacher__titel {
font-family: var(--wp--preset--font-family--display);
font-size: clamp(2.4rem, 5.2vw, 4.5rem);
line-height: 0.94;
letter-spacing: -0.01em;
margin: 0 0 clamp(1rem, 2.5vw, 1.5rem);
text-wrap: balance;
}
.nt-aufmacher__titel .nt-aufmacher__jahr {
display: block;
color: var(--wp--preset--color--accent);
font-size: 1.1em;
line-height: 0.9;
margin-left: -0.04em;
transform: rotate(-1.2deg);
transform-origin: left center;
}
.nt-aufmacher__vorspann {
font-size: clamp(1.0625rem, 1.7vw, 1.3125rem);
line-height: 1.5;
max-width: 40ch;
margin: 0;
color: rgba(255, 255, 255, 0.94);
}
.nt-aufmacher__zeile {
display: flex;
flex-wrap: wrap;
gap: 0.9rem 1.1rem;
align-items: center;
margin: clamp(1.75rem, 3.5vw, 2.5rem) 0 0;
}
/* Auf dem Telefon laufen die Knoepfe ueber die volle Breite.
Recherche zur Bedienbarkeit (uxmovement.com, wpmudev.com,
growthsuite.net, Stand August 2026): fuer die Hauptaktion sind
durchgehend breite Knoepfe die Empfehlung, 48 bis 56 Pixel hoch.
Sie treffen beide Daumen, links wie rechts, und vergroessern die
Trefferflaeche deutlich. Eine rechtsbuendige, schmale Schaltflaeche
ist nur fuer Rechtshaender bequem. Volle Breite erfuellt den Wunsch
nach rechtsbuendig mit - der Knopf reicht bis an den rechten Rand -
und ist zugleich das, was die Empfehlungen nahelegen. */
@media (max-width: 47.9375rem) {
.nt-aufmacher__zeile {
flex-direction: column;
align-items: stretch;
gap: 0.75rem;
}
.nt-aufmacher__zeile .nt-knopf-hell,
.nt-aufmacher__zeile .nt-knopf-linie {
width: 100%;
min-height: 54px;
}
}
/* Rechte Spalte: Siegel und Postleitzahl-Karte greifen ineinander,
statt untereinander zu stehen. Der negative Aussenabstand zieht
die Karte unter das Siegel. */
.nt-aufmacher__nebe {
display: flex;
flex-direction: column;
align-items: stretch;
}
.nt-aufmacher__nebe .nt-stempel {
align-self: flex-end;
margin-right: clamp(0rem, 1vw, 0.5rem);
margin-bottom: 0.75rem;
position: relative;
z-index: 3;
}
/* PLZ-Karte: runde Ecken und Schatten, wirkt aufgelegt.
Die leichte Kippung ist im September 2026 entfallen. */
.nt-aufmacher .naturata-plz {
margin: 0;
padding: clamp(1.5rem, 3vw, 2rem);
border-radius: var(--wp--custom--border-radius--karte);
box-shadow: 0 24px 50px -24px rgba(0, 0, 0, 0.55);
}
/* ==========================================================
4. Erzeugerstempel
Die Ringe stehen jetzt so weit auseinander, dass die
Schrift dazwischen frei steht, siehe Kommentar am SVG.
========================================================== */
.nt-stempel {
width: clamp(7rem, 12vw, 10rem);
color: var(--wp--preset--color--accent);
transform: rotate(-7deg);
}
.nt-stempel svg { width: 100%; height: auto; display: block; }
@media (max-width: 47.9375rem) {
.nt-stempel { display: none; }
}
/* ==========================================================
5. Pinselstrich als Textauszeichnung
========================================================== */
/* Der Strich hinterlegt die Buchstaben VOLLSTAENDIG. Ein Band, das
nur die untere Haelfte bedeckt, liest sich immer als Durchstreicher —
das ist der Unterschied zwischen Textmarker und Streichung.
Gemessen in Sans Culottes: Grundlinie 0.43em ueber der Unterkante,
Versalhoehe 0.86em darueber. em statt Prozent, damit die Werte fuer
jede Schriftgroesse gelten.
Kontrast Text #232219 auf Limette #c8d200: 9.4:1. */
.nt-marker {
background-image: var(--nt-pinsel-limette);
background-repeat: no-repeat;
background-size: 100% 0.98em;
background-position: left calc(100% - 0.36em);
box-decoration-break: clone;
-webkit-box-decoration-break: clone;
padding-inline: 0.18em;
}
/* Im Farbfeld traegt der Marker dunklen Text, sonst faellt
weisser Text auf Limette auf 1.66:1. */
.nt-aufmacher .nt-marker,
.nt-zahlen .nt-marker,
.nt-karte .nt-marker {
color: var(--wp--preset--color--contrast);
}
/* Unterstreichung im Pinselduktus, knapp unter der Grundlinie
(0.43em), damit sie nicht in die Buchstaben schneidet. */
.nt-strich {
background-image: var(--nt-pinsel-limette);
background-repeat: no-repeat;
/* 0.2em waren rund 3.6 Pixel - auf Creme kaum zu sehen.
Limette hat gegen den hellen Grund wenig Kontrast, der
Strich muss deshalb Koerper haben, um als Auszeichnung
zu wirken. */
background-size: 100% 0.34em;
background-position: left calc(100% - 0.24em);
text-decoration: none;
padding-bottom: 0.18em;
transition: background-size var(--wp--custom--transition--basis);
}
.nt-strich:hover {
background-size: 100% 0.7em;
}
/* Freier Pinselschwung hinter einzelnen Woertern. */
.nt-wischer {
position: relative;
display: inline-block;
isolation: isolate;
}
.nt-wischer::before {
content: "";
position: absolute;
inset: -0.3em -0.45em -0.25em -0.45em;
background-color: var(--wp--preset--color--accent);
-webkit-mask-image: var(--nt-wischer);
mask-image: var(--nt-wischer);
-webkit-mask-size: 100% 100%;
mask-size: 100% 100%;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
z-index: -1;
}
/* ==========================================================
6. Zahlenband — Markenblau, Limette als einzige Ziffernfarbe
========================================================== */
.nt-zahlen {
position: relative;
isolation: isolate;
background: var(--wp--preset--color--secondary);
color: var(--wp--preset--color--weiss);
padding-block: clamp(2.5rem, 6vw, 4.5rem);
overflow: hidden;
}
.nt-zahlen__raster {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: clamp(1.75rem, 4vw, 3rem);
}
@media (min-width: 48rem) {
.nt-zahlen__raster { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
/* Jede Zahl leicht anders gekippt — bricht die Reihe auf. */
/* Die Zahlen standen bis 09/2026 leicht gekippt. Entfernt auf
Wunsch des Kunden: eine Abweichung von einem Grad liest sich
nicht als Handschrift, sondern als Fehler. */
.nt-zahlen__wert {
display: block;
font-family: var(--wp--preset--font-family--display);
font-size: clamp(2.5rem, 5.5vw, 4.25rem);
line-height: 0.92;
margin-bottom: 0.3rem;
font-variant-numeric: tabular-nums;
/* Einheitlich Limette. Die vorherige Rotation durch Moehre
und Limette las sich als Zufall, nicht als System. 8.9:1. */
color: var(--wp--preset--color--accent);
}
.nt-zahlen__text {
display: block;
font-size: var(--wp--preset--font-size--sm);
line-height: 1.35;
color: rgba(255, 255, 255, 0.9);
max-width: 22ch;
}
/* ==========================================================
7. Aussagenband — statt Laufband
Das scrollende Band war schnell, schwer zu lesen und der
Inhalt zog vorbei, bevor er ankam. Jetzt stehen dieselben
Angaben still, jede mit Pinselstrich ausgezeichnet.
========================================================== */
.nt-aussagen {
position: relative;
overflow: hidden;
isolation: isolate;
background: var(--wp--preset--color--base-2);
padding-top: clamp(2.25rem, 5vw, 3.25rem);
padding-bottom: clamp(3rem, 6.5vw, 4.5rem);
}
.nt-aussagen__reihe {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: clamp(1.5rem, 3vw, 2.5rem);
margin: 0;
padding: 0;
list-style: none;
}
@media (min-width: 54rem) {
.nt-aussagen__reihe { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.nt-aussagen__posten {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 0.45rem;
margin: 0;
}
/* Kippung entfernt, siehe Zahlenband. */
.nt-aussagen__wert {
display: block;
font-family: var(--wp--preset--font-family--display);
font-size: clamp(1.15rem, 2.1vw, 1.45rem);
line-height: 1.25;
color: var(--wp--preset--color--contrast);
}
.nt-aussagen__text {
font-size: var(--wp--preset--font-size--sm);
color: var(--wp--preset--color--muted);
line-height: 1.4;
max-width: 26ch;
}
/* ==========================================================
8. Abschnittsmarke
========================================================== */
/* display:block ist Absicht: als inline-flex war die Marke kein
Blockelement, die Layoutregel des Themes (max-width contentSize,
margin-inline auto) griff nicht, und sie stand am aeussersten
linken Rand waehrend die Ueberschrift daneben in der Textspalte
begann. Der Pinselstrich sitzt jetzt als inline-block davor. */
.nt-marke {
display: block;
font-family: var(--wp--preset--font-family--sans);
font-size: 0.8125rem;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--wp--preset--color--primary);
margin-block: 0 0.6rem;
}
/* Kleiner Pinselstrich statt geometrischer Punkt. */
.nt-marke::before {
content: "";
display: inline-block;
vertical-align: middle;
margin-right: 0.6rem;
margin-bottom: 0.12em;
width: 1.6rem;
height: 0.5rem;
background-color: var(--wp--preset--color--accent);
-webkit-mask-image: var(--nt-wischer);
mask-image: var(--nt-wischer);
-webkit-mask-size: 100% 100%;
mask-size: 100% 100%;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
}
/* ==========================================================
9. Werteliste
========================================================== */
.nt-werte {
display: grid;
gap: clamp(1.5rem, 3vw, 2.25rem);
counter-reset: nt-wert;
margin-top: clamp(2rem, 4vw, 3rem);
}
@media (min-width: 52rem) {
.nt-werte { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* Alle Kacheln gleich hoch, nicht nur die einer Zeile.
grid-auto-rows: 1fr zwingt jede Zeile auf dieselbe Hoehe,
sonst richtet sich jede nach ihrem laengsten Text.
Der frueher hier stehende Versatz der geraden Kacheln ist
raus (Rueckmeldung 11.09.2026). Gemeint war Rhythmus,
gelesen wurde es als ungleich gross. */
.nt-werte { grid-auto-rows: 1fr; }
}
.nt-wert {
position: relative;
padding: clamp(1.5rem, 3vw, 2rem) clamp(1.5rem, 3vw, 2rem) clamp(1.5rem, 3vw, 2rem) 4.5rem;
background: var(--wp--preset--color--weiss);
border-radius: var(--wp--custom--border-radius--karte);
box-shadow: 0 14px 34px -26px rgba(9, 37, 92, 0.5);
}
/* Kippung entfernt, siehe Zahlenband. */
.nt-wert::before {
counter-increment: nt-wert;
content: counter(nt-wert, decimal-leading-zero);
position: absolute;
left: clamp(1.1rem, 2vw, 1.5rem);
top: clamp(1.3rem, 2.6vw, 1.8rem);
font-family: var(--wp--preset--font-family--display);
font-size: 2.4rem;
line-height: 1;
/* Nur zwei Farben im Wechsel statt vier. Die Vierer-Rotation
las sich als Zufall, nicht als System. */
color: var(--wp--preset--color--primary);
}
.nt-wert:nth-child(even)::before { color: var(--wp--preset--color--secondary); }
.nt-wert h3 { margin: 0 0 0.4rem; font-size: var(--wp--preset--font-size--lg); }
.nt-wert p { margin: 0; color: var(--wp--preset--color--muted); }
/* ==========================================================
10. Satzband — Sand mit Linienzeichnung dahinter
========================================================== */
.nt-satz {
position: relative;
isolation: isolate;
background: var(--wp--preset--color--base-2);
padding-block: clamp(3rem, 7vw, 5.5rem);
overflow: hidden;
}
/* Die Deko-Zeichnung braucht overflow:hidden, die Pinselkante
darf davon nicht abgeschnitten werden - deshalb sitzt sie
innerhalb des Bandes und nicht darunter. */
.nt-satz.nt-kante-unten { padding-bottom: clamp(5rem, 10vw, 8rem); }
/* Ueberschrift und Unterzeile teilen sich einen Kasten.
Vorher waren beide eigene Kinder des zentrierten Layouts:
die kurze Ueberschrift wurde mittig gesetzt, die laengere
Unterzeile begann am linken Rand - sie standen versetzt. */
/* Auf die Inhaltsbreite der Seite, damit die linke Kante mit
allen anderen Abschnitten uebereinstimmt. Die Ueberschrift
bleibt darin schmal, sonst laeuft sie als eine lange Zeile. */
.nt-satz__inhalt {
max-width: var(--wp--style--global--content-size);
}
.nt-satz__text {
font-family: var(--wp--preset--font-family--display);
font-size: clamp(1.85rem, 4.2vw, 3.25rem);
line-height: 1.15;
max-width: 20ch;
margin: 0;
text-wrap: balance;
}
.nt-satz__quelle {
max-width: 46ch;
margin: clamp(1rem, 2vw, 1.5rem) 0 0;
font-size: var(--wp--preset--font-size--sm);
color: var(--wp--preset--color--muted);
}
/* Deko-Zeichnung rechts. Vorher ragte sie ueber den Rand hinaus
und wurde von overflow:hidden angeschnitten - vom Kohl war nur
noch ein Bogen zu sehen. Jetzt steht sie vollstaendig im Bild
und ist kraeftig genug, um als Gemuese erkennbar zu sein. */
/* Zwei Zeichnungen in verschiedenen Groessen statt einer Reihe
aus vier gleich grossen - die Reihe wirkte wie eine Icon-Leiste. */
.nt-satz__deko {
position: absolute;
right: clamp(1rem, 4vw, 3.5rem);
bottom: clamp(1rem, 3vw, 2.5rem);
color: var(--wp--preset--color--primary);
pointer-events: none;
display: flex;
align-items: flex-end;
gap: clamp(1rem, 3vw, 2.5rem);
}
.nt-satz__deko svg { width: 100%; height: auto; display: block; }
.nt-satz__deko-eins { display: block; width: min(15vw, 9rem); opacity: 0.38; transform: rotate(-6deg); }
.nt-satz__deko-zwei { display: block; width: min(9vw, 5.5rem); opacity: 0.28; transform: rotate(8deg); }
@media (max-width: 52rem) {
/* Auf schmalen Bildschirmen wuerde die Zeichnung unter den
Text laufen; dort steht sie unter der Unterzeile. */
.nt-satz__deko {
position: static;
margin-top: 2rem;
justify-content: flex-end;
}
.nt-satz__deko-eins { width: 6rem; }
.nt-satz__deko-zwei { width: 3.75rem; }
}
/* ==========================================================
11. Farbkarten
Drei Varianten statt fuenf: Blau traegt, Oliv steht daneben,
Tomate ist die einzige warme Ausnahme. Sand ist die helle
Variante fuer Faelle, in denen ein Farbfeld zu viel waere.
========================================================== */
.nt-karten {
display: grid;
gap: clamp(1.25rem, 2.5vw, 2rem);
grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 46rem) {
.nt-karten--zwei { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.nt-karte {
position: relative;
padding: clamp(1.75rem, 3.5vw, 2.5rem);
border-radius: var(--wp--custom--border-radius--gross);
overflow: hidden;
color: var(--wp--preset--color--weiss);
}
.nt-karte :is(h2, h3) { color: inherit; margin-top: 0; }
.nt-karte p { color: rgba(255, 255, 255, 0.92); }
.nt-karte a { color: var(--wp--preset--color--weiss); }
.nt-karte--blau { background: var(--wp--preset--color--secondary); }
.nt-karte--oliv { background: var(--wp--preset--color--primary); }
.nt-karte--tomate { background: var(--wp--preset--color--tomate); }
/* Helle Variante: dunkler Text auf Sandton, 12.6:1. */
.nt-karte--sand {
background: var(--wp--preset--color--base-2);
color: var(--wp--preset--color--contrast);
box-shadow: inset 0 0 0 1px rgba(9, 37, 92, 0.1);
}
.nt-karte--sand p { color: var(--wp--preset--color--muted); }
.nt-karte--sand a { color: var(--wp--preset--color--secondary); }
/* Runde Aufhellung als Tiefe, kein flaches Rechteck. */
.nt-karte::after {
content: "";
position: absolute;
right: -18%;
top: -32%;
width: 62%;
aspect-ratio: 1;
background: rgba(255, 255, 255, 0.10);
border-radius: 50%;
pointer-events: none;
}
.nt-karte--sand::after { background: rgba(9, 37, 92, 0.05); }
.nt-karte__deko {
position: absolute;
right: 1rem;
bottom: -0.5rem;
width: 6.5rem;
opacity: 0.3;
pointer-events: none;
color: currentColor;
}
.nt-karte__deko svg { width: 100%; height: auto; display: block; }
/* ==========================================================
12. Auftritt beim Laden
========================================================== */
@media (prefers-reduced-motion: no-preference) {
.nt-auftritt > * {
animation: nt-auf 640ms cubic-bezier(0.16, 1, 0.3, 1) both;
}
.nt-auftritt > *:nth-child(1) { animation-delay: 40ms; }
.nt-auftritt > *:nth-child(2) { animation-delay: 140ms; }
.nt-auftritt > *:nth-child(3) { animation-delay: 240ms; }
@keyframes nt-auf {
from { opacity: 0; transform: translateY(1rem); }
to { opacity: 1; transform: none; }
}
}
/* ==========================================================
13. Knoepfe und Verlinkungen
Beides war zu leise. Knoepfe haben jetzt entweder eine
Flaeche oder eine sichtbare Kante, Textlinks eine dezente
Hinterlegung — man sieht ohne Hover, dass es ein Ziel gibt.
========================================================== */
.nt-knopf-hell,
.nt-knopf-linie {
/* Ohne border-box zaehlen Innenabstand und 2px Rahmen zur
Breite dazu - bei width:100% laeuft der Knopf dann aus
seiner Zeile heraus. */
box-sizing: border-box;
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 52px;
padding: 0 1.75rem;
font-weight: 700;
text-decoration: none;
border-radius: var(--wp--custom--border-radius--pille);
transition: transform var(--wp--custom--transition--basis),
background-color var(--wp--custom--transition--basis),
border-color var(--wp--custom--transition--basis),
color var(--wp--custom--transition--basis);
}
/* Erste Wahl: volle Flaeche. Limette traegt hier dunklen Text
(9.4:1) und ist damit der auffaelligste Punkt der Seite. */
.nt-knopf-hell {
color: var(--wp--preset--color--contrast);
background: var(--wp--preset--color--accent);
border: 2px solid var(--wp--preset--color--accent);
}
.nt-knopf-hell:hover {
background: var(--wp--preset--color--weiss);
border-color: var(--wp--preset--color--weiss);
transform: translateY(-2px) rotate(-1deg);
}
/* Zweite Wahl: duenne Kante statt Flaeche, damit die Rangfolge
sichtbar bleibt und trotzdem klar ist, dass es ein Knopf ist. */
.nt-knopf-linie {
color: var(--wp--preset--color--weiss);
background: transparent;
border: 2px solid rgba(255, 255, 255, 0.55);
}
.nt-knopf-linie:hover {
border-color: var(--wp--preset--color--weiss);
background: rgba(255, 255, 255, 0.12);
transform: translateY(-2px) rotate(0.8deg);
}
/* Alles andere ist Pinselstrich. Die Kontur war als Ergaenzung
direkt neben einer Hauptaktion gedacht, nicht als zweite Sprache
fuer Weiterfuehrungen im Text — dort wirkte sie fremd. Deshalb
gibt es sie nur noch im Aufmacher.
Rangfolge auf der ganzen Seite:
gefuellt Hauptaktion (bestellen)
Kontur zweite Aktion direkt daneben, nur im Aufmacher
Pinselstrich jede Weiterfuehrung im Text */
.nt-karte a:not(.wp-element-button),
.nt-satz__quelle a {
text-decoration: none;
background-image: var(--nt-pinsel-strich);
background-repeat: no-repeat;
background-size: 100% 0.2em;
background-position: left calc(100% - 0.26em);
padding-bottom: 0.16em;
transition: background-size var(--wp--custom--transition--basis);
}
.nt-karte a:not(.wp-element-button):hover,
.nt-satz__quelle a:hover {
background-size: 100% 0.5em;
}
/* Fokus im Farbfeld: Blau waere auf Blau unsichtbar. */
.nt-aufmacher :is(a, button, input):focus-visible,
.nt-zahlen a:focus-visible,
.nt-karte:not(.nt-karte--sand) :is(a, button):focus-visible {
outline: 3px solid var(--wp--preset--color--accent);
outline-offset: 3px;
}
.nt-karte--sand :is(a, button):focus-visible {
outline: 3px solid var(--wp--preset--color--secondary);
outline-offset: 3px;
}
/* ==========================================================
14. Seitenkopf der Innenseiten
Ohne ihn beginnen Unterseiten mit nackter Ueberschrift auf
Creme - die Gestaltungsebene endete bisher an der Startseite.
========================================================== */
.nt-seitenkopf {
position: relative;
padding-top: clamp(2.75rem, 6vw, 4.5rem);
/* Der Pinselstrich unter der Ueberschrift sass fast auf der
Unterkante des Farbfelds. */
padding-bottom: clamp(2.25rem, 5vw, 3.5rem);
margin-block-start: 0;
}
.nt-seitenkopf .wp-block-post-title {
margin: 0;
max-width: 20ch;
text-wrap: balance;
}
/* Kleiner Pinselstrich unter der Ueberschrift statt einer Linie. */
.nt-seitenkopf .wp-block-post-title::after {
content: "";
display: block;
width: clamp(4rem, 9vw, 6.5rem);
height: 0.55rem;
margin-top: 0.9rem;
background-color: var(--wp--preset--color--accent);
-webkit-mask-image: var(--nt-wischer);
mask-image: var(--nt-wischer);
-webkit-mask-size: 100% 100%;
mask-size: 100% 100%;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
}
/* ==========================================================
15. Aufklappbarer Abschnitt
Die 72 Postleitzahlen stehen im Lieferservice hinter einem
Klick. Ohne Gestaltung sieht der Core-Block wie ein
Systemhinweis aus.
========================================================== */
.wp-block-details {
background: var(--wp--preset--color--weiss);
border: 1px solid rgba(9, 37, 92, 0.14);
border-radius: var(--wp--custom--border-radius--karte);
padding: 0.35rem 1.25rem;
}
.wp-block-details summary {
display: flex;
align-items: center;
gap: 0.6rem;
min-height: 48px;
font-weight: 700;
color: var(--wp--preset--color--secondary);
cursor: pointer;
list-style: none;
}
.wp-block-details summary::-webkit-details-marker { display: none; }
/* Eigener Pfeil, damit er die Markenfarbe traegt und sich dreht. */
.wp-block-details summary::before {
content: "";
width: 0.6rem;
height: 0.6rem;
flex: none;
border-right: 2px solid currentColor;
border-bottom: 2px solid currentColor;
transform: rotate(-45deg);
transition: transform var(--wp--custom--transition--basis);
}
.wp-block-details[open] summary::before {
transform: rotate(45deg);
}
.wp-block-details > *:not(summary) {
margin-bottom: 1.25rem;
}
/* ==========================================================
16. Bedienbarkeit auf dem Telefon
Recherche (uxmovement.com, wpmudev.com, growthsuite.net,
August 2026): Hauptaktionen als breite Knoepfe, 48-56px hoch,
im unteren Bildschirmdrittel. Weiterfuehrende Textlinks an
den rechten Rand — dort steht der Daumen ohnehin.
========================================================== */
/* Weiterfuehrungen mit Pinselstrich stehen immer rechts - auf
jedem Bildschirm, nicht nur auf dem Telefon. Sie schliessen
einen Abschnitt ab, und der Blick verlaesst ihn nach rechts. */
.nt-werte + p,
.naturata-aktionen__mehr,
.nt-karte p:last-child {
text-align: right;
}
@media (max-width: 47.9375rem) {
footer.wp-block-group .wp-block-list {
list-style: none;
padding-left: 0;
}
}
/* ==========================================================
17. Einheitliche Inhaltsbreite
Alle Abschnitte stehen auf der Breite der Kopfzeile - von der
linken Kante des Logos bis zur rechten Kante des Bestellknopfs.
Das ist die alignwide-Breite des Themes.
Damit Fliesstext nicht ueber 1100 Pixel laeuft, begrenzt eine
zweite Regel die Zeilenlaenge. Der Kasten bleibt breit, die
Zeile wird kurz - so stimmt die linke Kante ueberall und der
Text bleibt lesbar.
========================================================== */
/* Der Inhalt der Innenseiten laeuft im Flussfluss (layout: default),
nicht im eingeschraenkten Layout. Grund: das eingeschraenkte
Layout setzt jedem Kind margin-inline: auto mit !important -
ein Absatz mit begrenzter Zeilenlaenge stuende dann mittig im
breiten Kasten und begaenne nicht unter der Ueberschrift.
So beginnt jeder Absatz auf derselben Kante wie die Ueberschrift,
und die Zeilenlaenge bleibt trotzdem lesbar. */
.nt-seitenkopf .wp-block-post-title,
.nt-seiteninhalt > .wp-block-post-content {
max-width: var(--wp--style--global--wide-size);
margin-inline: auto;
}
/* Fliesstext laeuft ueber die volle Inhaltsbreite.
Vorher stand hier max-width: 68ch. Das hielt die Zeile
typografisch kurz, liess rechts neben jedem Absatz aber ein
breites leeres Feld stehen, waehrend Bilderreihen und
Aufzaehlungen daneben die volle Breite nutzten. Das las sich
wie ein Fehler, nicht wie Absicht.
Ansage Fabian, 11.09.2026. */
.nt-seiteninhalt .wp-block-post-content > :is(p, ul, ol, .wp-block-details) {
max-width: none;
}
.nt-seiteninhalt .wp-block-post-content > :is(h2, h3, h4) {
/* 24ch waren zu eng: "Im selben Haus: Natuerlich NATURATA"
hat 34 Zeichen und brach um, obwohl daneben 600 Pixel frei
waren. 34ch laesst solche Ueberschriften stehen und haelt
lange Saetze trotzdem kurz. */
max-width: 34ch;
}
/* Luft zwischen den Abschnitten. Die Seiten wirkten gedraengt,
weil zwischen Absatz und naechster Ueberschrift derselbe
Abstand stand wie zwischen zwei Absaetzen. Eine Ueberschrift
gehoert naeher an ihren Text als an den vorherigen Abschnitt. */
.nt-seiteninhalt .wp-block-post-content > * {
margin-block: 0 1.15rem;
}
.nt-seiteninhalt .wp-block-post-content > :is(h2, h3) {
margin-block: clamp(2.75rem, 5vw, 4rem) 0.85rem;
}
.nt-seiteninhalt .wp-block-post-content > :is(h2, h3):first-child {
margin-block-start: 0;
}
.nt-seiteninhalt .wp-block-post-content > :is(.wp-block-columns, .wp-block-group, .wp-block-details, .naturata-formular) {
margin-block: clamp(2rem, 4vw, 3rem);
}
/* ==========================================================
18. Abschnittsrhythmus
Die Abstaende zwischen den Baendern waren gewachsen, nicht
gesetzt: mal kam die Luft aus dem Innenabstand des Bandes,
mal aus dem Blockabstand dazwischen. Ergebnis waren
ungleiche Spruenge. Jetzt bringt jedes Band seinen eigenen
Innenabstand mit, der Blockabstand dazwischen ist null.
========================================================== */
.nt-aufmacher,
.nt-aussagen,
.nt-satz,
.nt-zahlen,
.nt-deko-feld,
.nt-aktionen-feld {
margin-block: 0;
}
.nt-deko-feld,
.nt-aktionen-feld {
padding-block: clamp(3.5rem, 7vw, 5.5rem);
}
.nt-satz {
padding-block: clamp(3.5rem, 7vw, 5.5rem);
}
.nt-zahlen {
padding-block: clamp(3rem, 6vw, 4.5rem);
}
/* ==========================================================
19. Farbe auf den Innenseiten
Die Unterseiten waren durchgehend cremefarben. Die
Markenillustration im Seitenkopf gibt jeder Seite einen
farbigen Anfang, ohne dass Redaktion etwas tun muss.
========================================================== */
.nt-seitenkopf {
overflow: hidden;
isolation: isolate;
}
.nt-seitenkopf::after {
content: "";
position: absolute;
right: 2%;
bottom: -10%;
z-index: -1;
width: min(22vw, 16rem);
aspect-ratio: 1261 / 847;
background-image: url('../bilder/collage-gemuese.png');
background-size: contain;
background-repeat: no-repeat;
opacity: 0.2;
transform: rotate(-6deg);
pointer-events: none;
}
@media (max-width: 60rem) {
.nt-seitenkopf::after { display: none; }
}
/* Hinweiskaesten auf Innenseiten: mehr Koerper, damit sie sich
vom Fliesstext absetzen. */
.nt-seiteninhalt .wp-block-group.is-style-hinweis {
padding: clamp(1.5rem, 3vw, 2.25rem);
border-left-width: 6px;
}
/* ==========================================================
20. Redaktionsfaehige Startseite
Die Startseite bestand aus acht Bloecken "Individuelles
HTML". Fuer die Gestaltung war das bequem, fuer die
Redaktion unbrauchbar: kein Satz liess sich ohne
HTML-Kenntnisse aendern. Alle Texte stehen jetzt in
normalen WordPress-Bloecken. Die Regeln hier uebersetzen
die frueheren handgeschriebenen Elemente auf das Markup,
das WordPress dafuer erzeugt.
========================================================== */
/* ---- Knoepfe im Aufmacher --------------------------------
Frueher . Jetzt der normale
Button-Block mit einer Blockvariante, damit Beschriftung
und Ziel ueber die Oberflaeche zu aendern sind.
Die Spezifitaet liegt bewusst ueber der von theme.json
(dort :root :where(...), also eine Klasse). */
.wp-block-button.is-style-nt-hell > .wp-block-button__link,
.wp-block-button.is-style-nt-linie > .wp-block-button__link {
box-sizing: border-box;
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 52px;
padding: 0 1.75rem;
font-weight: 700;
text-decoration: none;
border-radius: var(--wp--custom--border-radius--pille);
transition: transform var(--wp--custom--transition--basis),
background-color var(--wp--custom--transition--basis),
border-color var(--wp--custom--transition--basis),
color var(--wp--custom--transition--basis);
}
.wp-block-button.is-style-nt-hell > .wp-block-button__link {
color: var(--wp--preset--color--contrast);
background-color: var(--wp--preset--color--accent);
border: 2px solid var(--wp--preset--color--accent);
}
.wp-block-button.is-style-nt-hell > .wp-block-button__link:hover {
background-color: var(--wp--preset--color--weiss);
border-color: var(--wp--preset--color--weiss);
color: var(--wp--preset--color--contrast);
transform: translateY(-2px) rotate(-1deg);
}
.wp-block-button.is-style-nt-linie > .wp-block-button__link {
color: var(--wp--preset--color--weiss);
background-color: transparent;
border: 2px solid rgba(255, 255, 255, 0.55);
}
.wp-block-button.is-style-nt-linie > .wp-block-button__link:hover {
border-color: var(--wp--preset--color--weiss);
background-color: rgba(255, 255, 255, 0.12);
color: var(--wp--preset--color--weiss);
transform: translateY(-2px) rotate(0.8deg);
}
/* Die Knopfzeile im Aufmacher ist jetzt ein Buttons-Block. */
.nt-aufmacher .wp-block-buttons.nt-aufmacher__zeile {
gap: 0.9rem 1.1rem;
}
@media (max-width: 47.9375rem) {
/* Volle Breite auf dem Telefon - dieselbe Begruendung wie
oben bei .nt-aufmacher__zeile. */
.nt-aufmacher .wp-block-buttons.nt-aufmacher__zeile {
flex-direction: column;
align-items: stretch;
gap: 0.75rem;
}
.nt-aufmacher .wp-block-buttons.nt-aufmacher__zeile .wp-block-button {
width: 100%;
}
.nt-aufmacher .wp-block-buttons.nt-aufmacher__zeile .wp-block-button__link {
width: 100%;
min-height: 54px;
}
}
/* ---- Jahreszahl im Aufmacher -----------------------------
Frueher ein span in der Ueberschrift. Ein span mit eigener
Klasse laesst sich im Editor nicht zuverlaessig anfassen,
deshalb ist die Zeile jetzt ein eigener Absatz. Die Werte
sind dieselben, nur nicht mehr relativ zur Ueberschrift
gerechnet (1.1em von clamp(2.4rem, 5.2vw, 4.5rem)). */
.nt-aufmacher .nt-aufmacher__titel {
margin-bottom: 0;
}
p.nt-aufmacher__jahr,
.nt-aufmacher p.nt-aufmacher__jahr {
font-family: var(--wp--preset--font-family--display);
font-size: clamp(2.64rem, 5.72vw, 4.95rem);
line-height: 0.9;
letter-spacing: -0.01em;
color: var(--wp--preset--color--accent);
margin: 0 0 clamp(1rem, 2.5vw, 1.5rem);
margin-left: -0.04em;
transform: rotate(-1.2deg);
transform-origin: left center;
}
/* ---- Hintergrundzeichnung --------------------------------
Frueher ein leeres div im HTML-Block. Als Pseudoelement
des Abschnitts braucht die Redaktion es nicht mehr zu
sehen - und kann es auch nicht versehentlich loeschen.
Die Abschnitte tragen alle position:relative und
isolation:isolate, die Stapelung bleibt damit dieselbe. */
.nt-aussagen::after,
.nt-satz::after,
.nt-zahlen::after,
.nt-deko-gross::after,
.nt-deko-klein::after {
content: "";
position: absolute;
z-index: -1;
pointer-events: none;
background-image: url('../bilder/collage-gemuese.png');
background-size: contain;
background-repeat: no-repeat;
aspect-ratio: 1261 / 847;
}
.nt-deko-gross::after {
left: 1%;
bottom: 6%;
width: min(30vw, 24rem);
opacity: 0.15;
transform: rotate(-5deg);
}
.nt-deko-klein::after {
right: 2%;
top: 10%;
width: min(20vw, 15rem);
opacity: 0.13;
transform: rotate(7deg) scaleX(-1);
}
.nt-aussagen::after {
right: 1%;
bottom: 12%;
width: min(20vw, 15rem);
opacity: 0.12;
transform: rotate(-11deg);
}
.nt-satz::after {
left: 1%;
top: 8%;
width: min(20vw, 15rem);
opacity: 0.14;
transform: rotate(4deg) scaleX(-1);
}
.nt-zahlen::after {
left: 1.5%;
bottom: 8%;
width: min(18vw, 14rem);
opacity: 0.26;
transform: rotate(6deg);
}
@media (max-width: 60rem) {
.nt-aussagen::after,
.nt-satz::after,
.nt-zahlen::after,
.nt-deko-gross::after,
.nt-deko-klein::after { display: none; }
}
/* ---- Abstaende in den umgestellten Abschnitten -----------
WordPress legt auf Gruppen einen Blockabstand zwischen den
Kindern. In den Rastern unten steuert das Raster selbst die
Abstaende - der zusaetzliche Aussenabstand wuerde die
Ausrichtung verschieben. */
.nt-aussagen__reihe > *,
.nt-zahlen__raster > *,
.nt-werte > *,
.nt-karten > * {
margin-block: 0;
}
.nt-aussagen__posten > *,
.nt-zahlen__posten > * {
margin-block: 0;
}
/* Die Gruppen der Raster sind reine Layoutkaesten - ohne
diese Regel gaebe WordPress ihnen die Inhaltsbreite. */
.nt-aussagen__posten,
.nt-zahlen__posten,
.nt-wert,
.nt-karte {
max-width: none;
}
/* Innerhalb einer Karte bleibt der normale Blockabstand,
nur die erste und letzte Zeile stehen buendig. */
.nt-wert > *:first-child,
.nt-karte > *:first-child { margin-block-start: 0; }
.nt-wert > *:last-child,
.nt-karte > *:last-child { margin-block-end: 0; }
/* Der Wert im Aussagenband und im Zahlenband ist jetzt ein
Absatz statt eines span - die Groessen bleiben gleich. */
p.nt-aussagen__wert { margin: 0; }
p.nt-aussagen__text { margin: 0; }
p.nt-zahlen__wert { margin: 0 0 0.3rem; }
p.nt-zahlen__text { margin: 0; }
/* Die beiden Raster sitzen in einem alignwide-Kasten mit
normalem Fluss - sie sollen dessen ganze Breite nutzen und
nicht auf die Textspalte zusammenschrumpfen. */
.nt-werte,
.nt-karten {
max-width: none;
}
/* Weiterfuehrender Link unter den Wertekarten. Frueher als
inline-style am Absatz. */
.nt-weiterfuehrung {
margin-block: 3rem 0;
}
/* ==========================================================
21. Filialkacheln auf der Kontaktseite
Fuenf Kacheln nebeneinander werden auf dem Laptop zu
schmal fuer Strasse und Oeffnungszeiten. Drei und zwei
ist die ruhigere Aufteilung, Wunsch des Kunden vom
10.09.2026.
Die Spaltenzahl ueberschreibt die des Rasterlayouts von
WordPress, das sonst automatisch fuellt.
========================================================== */
@media (min-width: 46rem) {
.wp-block-group.nt-filialraster {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (min-width: 62rem) {
.wp-block-group.nt-filialraster {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
/* Verweis auf einen Nachbarn im selben Haus: Logo links,
Text rechts. Die Logospalte darf nicht schmaler werden als
200 Pixel, sonst ist der Claim im Zeichen nicht mehr zu
lesen. */
.nt-nachbar {
gap: clamp(1rem, 3vw, 2rem);
align-items: center;
}
.nt-nachbar .wp-block-image { margin: 0; }
.nt-nachbar .wp-block-image img { display: block; height: auto; }
@media (min-width: 46rem) {
.nt-nachbar > .wp-block-column:first-child { flex-basis: 200px !important; }
}
@media (max-width: 45.9375rem) {
/* Auf dem Telefon steht das Zeichen ueber dem Text und
bleibt klein, sonst schluckt es den halben Bildschirm. */
.nt-nachbar > .wp-block-column:first-child { max-width: 150px; }
}
/* ----------------------------------------------------------
Hochformatbilder im Text nicht ueber Bildschirmhoehe
Anlass: Lutz Groessel, 18.09.2026, Hof Darscheid. Ein Foto
im Hochformat (3:4) laeuft ueber die volle Textbreite von
760 px und wird damit ueber einen Meter hoch. Auf dem
Bildschirm sieht man dann nur noch Kuh.
Deshalb: nie hoeher als 70 Prozent des Fensters. Die Breite
schrumpft mit (width: auto), das Bild wird also verkleinert,
nicht beschnitten, und steht mittig.
Gilt nur, solange die Redaktion nichts selbst eingestellt
hat. Wer im Bildblock unter "Einstellungen" eine Breite
waehlt (dann traegt der Block .is-resized) oder das Bild
breit oder volle Breite stellt, bekommt genau das.
---------------------------------------------------------- */
.wp-block-post-content .wp-block-image:not(.alignwide):not(.alignfull):not(.is-resized):not(.nt-filialbild) img {
display: block;
width: auto;
max-width: 100%;
max-height: min(70vh, 40rem);
margin-inline: auto;
}
/* Auf dem Handy greift die Grenze oben nicht: Die schmale Breite
haelt ein Hochformat schon unter 70 Prozent, trotzdem fuellt es
den Bildschirm (342 x 456 px bei 390 px Breite). Rueckmeldung
Lutz Groessel nach dem Telefonat am 18.09.2026: mobil noch zu
gross. Deshalb hier eine feste Obergrenze, gut ein halber
Bildschirm. Verkleinert, nicht beschnitten: Automatisch
zuschneiden koennte bei Menschen die Koepfe treffen. Wer
beschneiden will, stellt im Bildblock das Seitenverhaeltnis ein. */
@media (max-width: 48rem) {
.wp-block-post-content .wp-block-image:not(.alignwide):not(.alignfull):not(.is-resized):not(.nt-filialbild) img {
max-height: min(55vh, 22rem);
}
}
.wp-block-post-content .wp-block-image:not(.alignwide):not(.alignfull):not(.is-resized):not(.nt-filialbild) figcaption {
text-align: center;
}
/* ----------------------------------------------------------
Lange Woerter auf sehr schmalen Bildschirmen
Deutsch hat Woerter wie "Verbraucherstreitbeilegung". In
Ueberschriftengroesse ist das allein breiter als ein Galaxy
Fold (280 px), die Seite liess sich dann seitlich schieben.
Gefunden 18.09.2026 im Impressum.
Sicherheitsnetz fuer allen Text: ein Wort, das nicht passt,
darf umbrechen, statt ueber den Rand zu laufen. Trifft nur
Woerter, die sonst ueberstehen wuerden.
Silbentrennung nur bei Ueberschriften und nur auf sehr
schmalen Schirmen. Am Rechner sollen Ueberschriften nicht
getrennt werden, dort ist Platz genug.
---------------------------------------------------------- */
body {
overflow-wrap: break-word;
}
@media (max-width: 24rem) {
:is(h1, h2, h3, h4) {
hyphens: auto;
}
}