/* Theme Name: Natura Theme URI: https://www.natura-flooring.de/ Author: AI-Erlernt Author URI: https://ai-erlernt.de Description: Block-Theme fuer Natura Flooring (Grosshandel Boden, Garten, Wand). Heller warmer Grundton, Natura-Dunkelgruen als Marken-Anker, Lato lokal eingebettet. Version: 4.3.2 Requires at least: 6.5 Tested up to: 7.0 Requires PHP: 7.4 License: GPL-2.0-or-later License URI: https://www.gnu.org/licenses/gpl-2.0.html Text Domain: natura */ /* ============================================================ * 0 - MARKENWERTE UND ALTLASTEN-BRUECKE * * Die Palette in theme.json ist auf neun Rollen reduziert. Aeltere * Slugs (mist-white, forest-deep, nat-ink, brand-green ...) leben noch * im Markup einzelner Seiten und in den Plugin-Stylesheets. Sie werden * hier auf die neuen Rollen umgebogen, damit nichts unformatiert * zurueckbleibt. Neues Markup benutzt ausschliesslich die neun Rollen. * ============================================================ */ :root { --nat-base: #FFFFFF; --nat-surface: #F5F4EF; --nat-sage: #EDF1E4; --nat-ink: #1E231C; --nat-ink-soft: #5B6157; --nat-line: #DFDDD3; --nat-accent: #384A32; --nat-accent-2: #79A32E; --nat-on-dark: #F1F4EA; /* Hellgruen als TEXT: #79A32E liegt auf Weiss bei 2,96:1 und auf Warmgrau bei 2,68:1 (Durchsicht 14.09.2026, B-1). Eyebrow, Fokusring und Kleintexte nehmen deshalb diese dunklere Stufe: 5,9 auf Weiss, 5,3 auf Warmgrau, 5,1 auf Sage. Flaechen und Linien bleiben bei --nat-accent-2. */ --nat-accent-2-text: #4F6E1C; --nat-line-dark: rgba(241, 244, 234, 0.22); --nat-radius: 4px; --nat-sec-y: clamp(3.25rem, 6.5vw, 5.75rem); --nat-shadow: 0 18px 40px -28px rgba(30, 35, 28, 0.45); /* DIE SEITENSCHIENE (Abschnitt 2a). Aussenrand und Innenbreite stehen genau hier - jede Sektion der Seite rechnet damit. */ --nat-gutter: clamp(1.25rem, 4vw, 2.5rem); --nat-rail: 1400px; --nat-rail-pad: max(var(--nat-gutter), calc(50vw - var(--nat-rail) / 2)); /* Von reveal.js mit der echten Kopfzeilenhoehe ueberschrieben. */ --nat-header-h: 4.5rem; /* Bruecke: alte Preset-Variablen auf die neuen Rollen */ --wp--preset--color--mist-white: var(--nat-surface); --wp--preset--color--paper-pure: var(--nat-base); --wp--preset--color--paper: var(--nat-surface); --wp--preset--color--sage-mist: var(--nat-sage); --wp--preset--color--bone-green: var(--nat-on-dark); --wp--preset--color--sage-line: var(--nat-line); --wp--preset--color--subtle: var(--nat-line); --wp--preset--color--nat-ink: var(--nat-ink); --wp--preset--color--contrast: var(--nat-ink); --wp--preset--color--nat-ink-soft: var(--nat-ink-soft); --wp--preset--color--muted: var(--nat-ink-soft); --wp--preset--color--brand-green: var(--nat-accent); --wp--preset--color--brand-green-deep: var(--nat-accent); --wp--preset--color--natura: var(--nat-accent); --wp--preset--color--brand-green-bright: var(--nat-accent-2); --wp--preset--color--timber: var(--nat-accent-2); --wp--preset--color--forest-deep: var(--nat-accent); --wp--preset--color--forest-deep-2: #46603D; --wp--preset--color--accent-contrast: var(--nat-base); } /* Alte Utility-Klassen aus dem Bestandsmarkup weiter bedienen. */ .has-mist-white-background-color { background-color: var(--nat-surface) !important; } .has-paper-pure-background-color { background-color: var(--nat-base) !important; } .has-sage-mist-background-color { background-color: var(--nat-sage) !important; } .has-forest-deep-background-color { background-color: var(--nat-accent) !important; } .has-nat-ink-color { color: var(--nat-ink) !important; } .has-nat-ink-soft-color { color: var(--nat-ink-soft) !important; } .has-brand-green-color, .has-brand-green-deep-color { color: var(--nat-accent) !important; } .has-brand-green-bright-color { color: var(--nat-accent-2) !important; } .has-mist-white-color, .has-bone-green-color { color: var(--nat-on-dark) !important; } .has-sage-line-color { color: var(--nat-line) !important; } /* ============================================================ * 1 - GRUNDLAGEN * ============================================================ */ * { -webkit-tap-highlight-color: rgba(56, 74, 50, 0.12); } /* Metrik-Ersatz fuer Lato, solange die woff2 laedt (Durchsicht 14.09.2026, T-1): Arial wird auf Latos Masse getrimmt, damit der Wechsel zur echten Schrift keine Zeilen verschiebt (CLS Desktop lag bei 0,21 bis 0,66, Ursache laut Lighthouse allein der Font-Wechsel). Werte nach Latos Metriken (unitsPerEm 2000, Ascender 1974, Descender 426) bezogen auf Arial. */ @font-face { font-family: "Lato Fallback"; src: local("Arial"), local("Helvetica"), local("Liberation Sans"); size-adjust: 97.4%; ascent-override: 101.3%; descent-override: 21.9%; line-gap-override: 0%; } body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; } /* Das Lesemass steckt in der Inhaltsspalte (contentSize 680 px), nicht im einzelnen Absatz. Ein zusaetzliches max-width am Absatz wuerde ihn schmaler machen als die Ueberschrift darueber - und damit wieder zwei Achsen erzeugen. */ .nat h2 + p, .nat h3 + p, .nat h4 + p { margin-top: 0.5rem; } /* EINE Lesekante. Vorher wechselte die Seite viermal je Bildschirm zwischen zentriert und linksbuendig - und auf dem Telefon war ohnehin alles links. Damit hatte dieselbe Seite zwei Kompositionen. */ .nat :is(h1, h2, h3, h4, p, li).has-text-align-center { text-align: left; } .nat .has-text-align-center p { margin-left: 0; margin-right: 0; } img { max-width: 100%; height: auto; } :where(a):focus-visible, :where(button):focus-visible, :where(summary):focus-visible, :where(input, textarea, select):focus-visible { outline: 2px solid var(--nat-accent-2-text); outline-offset: 2px; border-radius: 2px; } /* Sprungmarken landen nicht unter der mitlaufenden Kopfzeile. */ :target { scroll-margin-top: 6rem; } html { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } /* ============================================================ * 2 - SEKTIONSRHYTHMUS * * Eine Sektion = eine volle Breite mit eigenem Grund. Der Wechsel * zwischen Weiss und Warmgrau ist die Gliederungssprache; Dunkelgruen * ist der Anker und kommt hoechstens einmal pro Seite vor. * ============================================================ */ /* Die Sektionen liegen im eingeschraenkten Inhaltsbereich und muessen auf die volle Fensterbreite ausbrechen. Ohne diese Regel steht die ganze Seite in einer schmalen Mittelspalte. */ main .alignfull, .wp-block-post-content > .alignfull { margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); width: 100vw; max-width: 100vw; } .nat-sec { padding-top: var(--nat-sec-y); padding-bottom: var(--nat-sec-y); } /* Sektionen stossen ohne Spalt aneinander (Kundenwunsch Runde 9, 10.08.2026: "die weissen Balken sollen raus"). Ursache der Balken: WordPress legt auf jedes Kind des Inhaltsbereichs den Blockabstand aus theme.json (blockGap 1,35 rem = 21,6 px) als `margin-block-start`. Zwischen zwei randlosen Sektionen entstand daraus ein 22-px-Streifen, durch den der weisse Seitengrund schien - auf JEDER Seite, zwischen JEDER Sektion. Die Sektionen tragen ihren Abstand selbst als Polsterung (`--nat-sec-y`), der Blockabstand ist hier also falsch am Platz. Bewusst an `.alignfull` gehaengt: alle Sektionen dieser Seite sind randlos, der Blockabstand INNERHALB einer Sektion bleibt unangetastet. Derselbe Blockabstand sitzt eine Ebene hoeher noch einmal: `.wp-site-blocks` legt ihn auf Kopfbereich, Inhalt und Fussbereich. Das war der weisse Streifen direkt unter der Navigation und der zwischen Seitenende und Fussbereich. */ main .wp-block-post-content > .alignfull, main .wp-block-post-content > .nat-sec, main .wp-block-post-content > .nat-page-hero, .wp-site-blocks > header, .wp-site-blocks > main, .wp-site-blocks > footer { margin-block-start: 0; margin-block-end: 0; } .nat-sec--tight { padding-top: clamp(2rem, 4vw, 3rem); padding-bottom: clamp(2rem, 4vw, 3rem); } /* Sektionsgrenzen sind Kanten, keine Uebergaenge (Kundenwunsch Runde 5: "keine Blendings, sondern klar deutliche Unterteilungen"). Regel: JEDE Sektion, die auf eine andere folgt, bekommt eine sichtbare Trennlinie oben. Kein Farbverlauf, keine Maske, kein Schlagschatten. */ .nat-sec + .nat-sec { border-top: 1px solid var(--nat-line); } /* Auf dem dunklen Grund traegt die helle Linie die Kante. */ .nat-sec + .nat-sec.has-accent-background-color, .nat-sec.has-accent-background-color + .nat-sec { border-top-color: var(--nat-line-dark); } .nat-sec { position: relative; } /* ============================================================ * 2a - DIE SEITENSCHIENE * * Vorher hatte dieselbe Seite vier linke Kanten: Fliesstext klebte am * Fensterrand (Wurzelabstand, 1520 px breit), Kopfbereiche standen auf der * Breitstufe (1400 px), das Schaufenster auf einer eigenen 1360-px-Marke und * Rechtstexte in einer 680-px-Mittelspalte. Der Grund war die alte Regel * `.nat-sec > * { max-width: 100% }` - sie hat die Inhaltsbreite aus * theme.json ueberschrieben, ohne einen Ersatz anzubieten. * * Jetzt traegt die SEKTION die Schiene (als Polsterung), nicht das einzelne * Kind. Damit beginnt alles - Kopfbereich, Schaufenster, Ueberschrift, * Fliesstext, Formular - auf derselben linken Kante, und der Text bekommt * trotzdem ein Lesemass, ohne dazu in die Mitte zu rutschen. * ============================================================ */ main .wp-block-post-content > .alignfull, main .nat-sec, main .nat-page-hero { padding-inline: var(--nat-rail-pad); } /* Die Kinder haengen an der linken Schienenkante. WordPress setzt hier sonst `margin-left/right: auto !important` (Layout "constrained") und wuerde jedes Kind einzeln zentrieren - das erzeugte genau die zweite Achse. Auch als "volle Breite" markierte Bloecke INNERHALB einer Sektion (etwa der Schaufenster-Block auf den Kategorieseiten) gehoeren auf die Schiene: die Sektion selbst ist bereits randlos, der Einzug ist Absicht. Ohne diese Zeilen zogen sie sich um den Wurzelabstand nach links aus der Flucht. */ main .wp-block-post-content > .alignfull > *, main .nat-sec > *, main .nat-page-hero > * { max-width: 100%; width: auto; margin-inline: 0 !important; } /* Lesemass: Fliesstext wird nicht breiter als rund 72 Zeichen - er bleibt aber linksbuendig auf der Schiene, statt als schmale Saeule zu zentrieren. Ausgenommen sind Zeilen, die bewusst ueber die volle Breite laufen. */ main .nat-sec > :is(p, ul, ol, dl), main .nat-page-hero > :is(p, ul, ol, dl), main .wp-block-post-content > .alignfull > :is(p, ul, ol, dl) { max-width: 72ch; } main :is(.nat-sec, .nat-page-hero) > :is(.ae-eyebrow, .nat-eyebrow, .nat-meta, .nat-stat__num, .nat-stat__label) { max-width: none; } /* Dunkler Anker */ .nat-dark, .nat-sec.has-accent-background-color { background-color: var(--nat-accent); color: var(--nat-on-dark); } .nat-dark :is(h1, h2, h3, h4, p, li, span, strong, dt, dd) { color: var(--nat-on-dark); } .nat-dark a:not(.wp-block-button__link) { color: #FFFFFF; text-decoration-color: rgba(255, 255, 255, 0.5); } .nat-dark a:not(.wp-block-button__link):hover { color: var(--nat-accent-2); } .nat-dark hr, .nat-dark .nat-rule { border-color: var(--nat-line-dark); } /* ============================================================ * 3 - TYPOGRAFIE-BAUSTEINE * ============================================================ */ /* Eyebrow: sitzt auf derselben Achse wie die Ueberschrift darunter. */ .ae-eyebrow, .nat-eyebrow { display: flex; align-items: center; gap: 0.6rem; margin: 0 0 0.85rem; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--nat-accent-2-text); max-width: none !important; } .ae-eyebrow::before, .nat-eyebrow::before { content: ""; flex: 0 0 auto; width: 26px; height: 2px; background: var(--nat-accent-2); } .has-text-align-center > .ae-eyebrow, .has-text-align-center .nat-eyebrow, .ae-eyebrow.has-text-align-center, .nat-eyebrow.has-text-align-center { justify-content: center; } /* Auf dem dunklen Anker liegt Hellgruen bei 3,2:1, Knochenweiss bei 8,6:1. */ .nat-dark .ae-eyebrow, .nat-dark .nat-eyebrow { color: var(--nat-on-dark); } /* Vorspann unter der Seitenueberschrift */ .nat-lead { font-size: var(--wp--preset--font-size--large); line-height: 1.55; color: var(--nat-ink-soft); } .nat-dark .nat-lead { color: var(--nat-on-dark); opacity: 0.88; } /* Technische Datenzeile / Meta */ .nat-meta { font-size: 0.875rem; line-height: 1.45; color: var(--nat-ink-soft); max-width: none; } /* Bestandsklasse aus Runde 1 - jetzt nur noch Feinschliff, keine eigene Schriftfamilie und keine Inline-Groessen mehr noetig. */ .nat-display { letter-spacing: -0.018em; } /* Bestandsmarkup traegt teils harte Schriftgroessen im style-Attribut. Die werden verworfen - aber eine Ueberschrift faellt dabei NICHT auf Fliesstextgroesse zurueck, sondern auf ihre Stufe aus theme.json. Genau das ist auf den Rechtstextseiten passiert: die H1 "Impressum" stand dort in Absatzgroesse. */ .nat :is(p, span, div, li).nat-display[style*="font-size"] { font-size: inherit !important; } .nat h1.nat-display[style*="font-size"] { font-size: var(--wp--preset--font-size--xxx-large) !important; } .nat h2.nat-display[style*="font-size"] { font-size: var(--wp--preset--font-size--xx-large) !important; } .nat h3.nat-display[style*="font-size"] { font-size: var(--wp--preset--font-size--x-large) !important; } .nat h4.nat-display[style*="font-size"] { font-size: var(--wp--preset--font-size--large) !important; } .nat-rule { border: 0; border-top: 1px solid var(--nat-line); margin: 0; } /* ============================================================ * 3a - KNOEPFE * * Befund aus V2a: gefuellte und umrandete Knoepfe waren unterschiedlich * gross, ohne dass im Markup etwas dazu stand. Ursache ist ein reiner * Reihenfolge-Gleichstand. theme.json gibt das gefuellte Mass in rem aus * * :root :where(.wp-block-button__link) { padding: 0.95rem 1.75rem } * * der Core-Blockstil setzt die Umriss-Variante in em dagegen * * :root :where(.wp-block-button.is-style-outline > .wp-block-button__link) * { border: 2px solid currentColor; padding: 0.667em 1.333em } * * Beide Selektoren haben Spezifitaet 0,1,0 - :where() zaehlt null. Das * Core-Stylesheet wird nach den globalen Stilen ausgegeben und gewinnt * deshalb: bei 17 px Schrift war der Umriss-Knopf 4 px niedriger und * 7 px schmaler als der gefuellte. * * Der .nat-Praefix hier hat Spezifitaet 0,3,0 und entscheidet die Sache * eindeutig statt ueber die Reihenfolge. * ============================================================ */ /* Umriss-Knopf auf exakt dieselben Aussenmasse wie der gefuellte. Die 2-px-Kante wird von der Polsterung abgezogen, sonst waere der Knopf am Ende 4 px hoeher statt gleich hoch. */ .nat .wp-block-button.is-style-outline > .wp-block-button__link { padding: calc(0.95rem - 2px) calc(1.75rem - 2px); border-width: 2px; font-size: var(--wp--preset--font-size--medium); border-radius: var(--nat-radius); color: var(--nat-accent); } /* Auf dunklem Grund wuerde Dunkelgruen auf Dunkelgruen verschwinden. */ .nat .nat-dark .wp-block-button.is-style-outline > .wp-block-button__link, .nat-dark .wp-block-button.is-style-outline > .wp-block-button__link { color: var(--nat-on-dark); } /* .nat-cta war bis V2a eine tote Klasse ohne eine einzige Regel. Sie ist jetzt der Marker der Haupt-Handlungsaufforderungen und sorgt dafuer, dass zwei Knoepfe nebeneinander wirklich gleich breit sind und nicht nur gleich gepolstert. */ .nat .nat-cta .wp-block-button__link { display: inline-flex; align-items: center; justify-content: center; min-width: 16rem; text-align: center; } /* ============================================================ * 4 - KOPFZEILE * ============================================================ */ header.wp-block-template-part, .wp-site-blocks > header { position: sticky; top: 0; z-index: 90; } .nat-siteheader { background: rgba(255, 255, 255, 0.94); -webkit-backdrop-filter: saturate(140%) blur(10px); backdrop-filter: saturate(140%) blur(10px); border-bottom: 1px solid var(--nat-line); transition: box-shadow 0.25s ease; } .nat-siteheader__logo { margin: 0; } .nat-siteheader__logo img { display: block; width: auto; height: clamp(30px, 3.4vw, 40px); } .nat-siteheader .wp-block-navigation { font-size: 0.95rem; letter-spacing: 0.005em; } .nat-siteheader .wp-block-navigation a { color: var(--nat-ink); text-decoration: none; padding-block: 0.45rem; border-bottom: 2px solid transparent; } .nat-siteheader .wp-block-navigation a:hover, .nat-siteheader .wp-block-navigation .current-menu-item > a, .nat-siteheader .wp-block-navigation .current-menu-ancestor > a { color: var(--nat-accent); border-bottom-color: var(--nat-accent-2); } .nat-siteheader .wp-block-navigation__submenu-container { border: 1px solid var(--nat-line); border-radius: var(--nat-radius); box-shadow: var(--nat-shadow); padding-block: 0.4rem; min-width: 15rem; } .nat-siteheader .wp-block-navigation__submenu-container a { border-bottom: 0; padding-block: 0.55rem; } .nat-siteheader .wp-block-navigation__submenu-container a:hover { background: var(--nat-sage); } /* ============================================================ * 5 - SEITENKOPF (HERO) * * Zwei Auspraegungen: mit Bild (Standard fuer Sortimentsseiten) und * ohne Bild (Rechtstexte, FAQ). Beide sind bewusst halbhoch - kein * Fullscreen, kein Scroller (Protokoll 08.07.2026, Abschnitt 3). * ============================================================ */ .nat-page-hero { background-color: var(--nat-surface); padding-top: clamp(2rem, 3.6vw, 3rem); padding-bottom: clamp(2rem, 3.6vw, 3rem); border-bottom: 1px solid var(--nat-line); } .nat-page-hero h1 { margin-top: 0; } .nat-page-hero > .wp-block-columns { align-items: center; } /* Der Kopfbereich ist bewusst halbhoch: darunter soll sofort das Schaufenster liegen, nicht erst nach einem Bildschirm Text (Kundenwunsch Runde 5). */ .nat-page-hero .nat-hero-media img { max-height: 340px; } /* Startseite: derselbe halbe Kopfbereich. Das Kennzahlenband soll noch auf den ersten Bildschirm passen - die Kante darunter ist dann sichtbar. */ .nat-home-hero { padding-top: clamp(2rem, 3.6vw, 3rem); padding-bottom: clamp(2rem, 3.6vw, 3rem); } .nat-home-hero__img { margin: 0; } .nat-home-hero__img img { display: block; width: 100%; max-height: 340px; aspect-ratio: 16 / 10; object-fit: cover; border-radius: var(--nat-radius); } /* Die Sektion mit dem Schaufenster rueckt naeher an den Kopfbereich - das Schaufenster ist der Grund, warum der Besucher hier ist. Die Lesekante der Sektion bleibt links (siehe Abschnitt 1): zentriert wird ausschliesslich das Schaufenster selbst, nicht die Ueberschrift darueber. */ .nat-sec:has(.ae-shf--direct) { padding-top: clamp(1.75rem, 3vw, 2.5rem); } /* Das Schaufenster steht auf derselben linken Kante wie der Rest der Seite (Abschnitt 2a). Frueher war seine Buehne als einziger Bereich zentriert - im gedockten Zwei-Spalten-Betrieb waere das doppelt falsch. */ .nat-sec:has(.ae-shf--direct) .ae-shf__stage { text-align: left; } .nat-hero-media { margin: 0; border-radius: var(--nat-radius); overflow: hidden; background: var(--nat-sage); } .nat-hero-media img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; } .nat-hero-media--tall img { aspect-ratio: 4 / 3; } /* Steckzaun-Hero (Runde 16b, 19.09.2026): Hochformat-Ambientebild im halbhohen Kopf. Mittiger Beschnitt kappte die Zaunoberkante; 44 % zeigt den Zaun von oben bis zum Sockel, angeschnitten werden die Blumen unten. */ .nat-hero-media--zaun img { object-position: 50% 44%; } .nat-hero-actions { display: flex; flex-wrap: wrap; gap: 0.75rem 1rem; margin-top: 1.75rem; align-items: center; } /* ============================================================ * 6 - VERTRAUENSBAND * * Hell statt dunkel: das Band sitzt direkt unter dem Hero und wird * durch Haarlinien gegliedert, nicht durch eine Fremdflaeche. * ============================================================ */ .nat-trust-band { background-color: var(--nat-base); padding-top: clamp(1.75rem, 3.5vw, 2.75rem); padding-bottom: clamp(1.75rem, 3.5vw, 2.75rem); } /* Keine eigene Unterkante: seit die Sektionen ohne Spalt aneinanderstossen, traegt die Folgesektion die Trennlinie (`.nat-sec + .nat-sec`). Beides zusammen ergab eine doppelte, 2 px starke Linie. */ .nat-trust-band { border-bottom: 0; } /* Das Band trug aus der dunklen Fassung noch eine helle Textfarbe. */ .nat-trust-band.has-surface-color, .nat-trust-band.has-on-dark-color { color: var(--nat-ink) !important; } .nat-trust-grid, .nat-trust-band .nat-stat-grid { display: grid !important; grid-template-columns: repeat(4, 1fr); gap: 0; } .nat-trust-grid > *, .nat-trust-band .nat-stat-grid > * { flex-basis: auto !important; padding: 0.25rem clamp(1rem, 2.5vw, 2rem); border-left: 1px solid var(--nat-line); margin: 0; } .nat-trust-grid > *:first-child, .nat-trust-band .nat-stat-grid > *:first-child { border-left: 0; padding-left: 0; } /* Vier Kennzahlen nebeneinander sind ab Tablet die Grenze; auf dem Telefon quetscht das Raster die Zahlen ("Witt/en"). Deshalb zwei Spalten mit Zeilentrenner statt Spaltentrennern. */ @media (max-width: 900px) { .nat-trust-grid, .nat-trust-band .nat-stat-grid { grid-template-columns: repeat(2, 1fr); row-gap: 1.35rem; } .nat-trust-grid > *, .nat-trust-band .nat-stat-grid > * { padding-inline: clamp(0.75rem, 3vw, 1.5rem); } .nat-trust-grid > *:nth-child(odd), .nat-trust-band .nat-stat-grid > *:nth-child(odd) { border-left: 0; padding-left: 0; } } @media (max-width: 420px) { .nat-trust-grid, .nat-trust-band .nat-stat-grid { grid-template-columns: 1fr; row-gap: 1.1rem; } .nat-trust-grid > *, .nat-trust-band .nat-stat-grid > * { border-left: 0; padding-left: 0; padding-top: 1.1rem; border-top: 1px solid var(--nat-line); } .nat-trust-grid > *:first-child, .nat-trust-band .nat-stat-grid > *:first-child { border-top: 0; padding-top: 0.25rem; } } /* .nat-stat sitzt im Bestandsmarkup auf der SPALTE, nicht auf der Zahl - die Groesse gehoert deshalb an .nat-stat__num. */ .nat-stat { font-weight: 400; } .nat-stat__num, .nat-stat-value { display: block; margin: 0; font-weight: 900; font-size: clamp(1.9rem, 3.4vw, 2.9rem); line-height: 1; letter-spacing: -0.03em; color: var(--nat-accent); max-width: none; } .nat-stat__plus { color: var(--nat-accent-2); } .nat-stat__label, .nat-stat-label { display: block; margin: 0.55rem 0 0; font-size: 0.875rem !important; font-weight: 400; line-height: 1.35; color: var(--nat-ink-soft); max-width: 24ch; } .nat-dark .nat-stat__num { color: var(--nat-on-dark); } .nat-dark .nat-stat__label { color: var(--nat-on-dark); opacity: 0.8; } /* ============================================================ * 7 - KACHELN * * EINE Kachelsprache fuer alles, was anklickbar in eine Kategorie * oder auf eine Seite fuehrt. Frueher waren es vier. * ============================================================ */ .nat-grid { display: grid; gap: clamp(1.25rem, 2.2vw, 2rem); grid-template-columns: repeat(3, 1fr); } .nat-grid--2 { grid-template-columns: repeat(2, 1fr); } .nat-grid--4 { grid-template-columns: repeat(4, 1fr); } .nat-card { position: relative; display: flex; flex-direction: column; background: var(--nat-base); border: 1px solid var(--nat-line); border-radius: var(--nat-radius); overflow: hidden; transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease; } .nat-card:hover { transform: translateY(-3px); box-shadow: var(--nat-shadow); border-color: #C9CEBD; } .nat-card__media, .nat-card > .wp-block-image, .nat-card > figure { margin: 0; overflow: hidden; background: var(--nat-sage); } .nat-card__media img, .nat-card > .wp-block-image img, .nat-card > figure img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1); } .nat-card:hover .nat-card__media img, .nat-card:hover > .wp-block-image img { transform: scale(1.035); } /* Bestandsmarkup: Kachel = Spalte mit Bild plus losen Absaetzen (ohne eigenen Textkoerper). Die Polsterung muss dann hier entstehen. */ .nat-card > *:not(figure):not(.wp-block-image):not(.nat-card__body) { padding-inline: 1.15rem; margin-block: 0.1rem; max-width: none; } .nat-card > :is(figure, .wp-block-image) + *:not(.nat-card__body) { padding-top: 0.95rem; } .nat-card > *:not(figure):not(.wp-block-image):not(.nat-card__body):last-child { padding-bottom: 1.2rem; } .nat-card__body { display: flex; flex-direction: column; gap: 0.4rem; padding: 1.15rem 1.25rem 1.35rem; flex: 1 1 auto; } .nat-card__body :is(h2, h3, h4) { margin: 0; font-size: 1.25rem; line-height: 1.25; color: var(--nat-accent); text-decoration: none; } .nat-card__body p { margin: 0; font-size: 0.95rem; line-height: 1.55; color: var(--nat-ink-soft); max-width: none; } .nat-card__count { margin-top: auto; padding-top: 0.75rem; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--nat-accent-2); } /* Ganze Kachel klickbar, Titel bleibt der zugaengliche Link. */ .nat-card__link::after { content: ""; position: absolute; inset: 0; z-index: 1; } .nat-card a { text-decoration: none; } /* Textkachel ohne Bild (Zubehoergruppen, Serviceleistungen) */ .nat-card--plain .nat-card__body { padding-top: 1.35rem; } .nat-card--plain { background: var(--nat-surface); } .nat-dark .nat-card { background: rgba(255, 255, 255, 0.05); border-color: var(--nat-line-dark); } .nat-dark .nat-card__body :is(h2, h3, h4) { color: var(--nat-on-dark); } .nat-dark .nat-card__body p { color: var(--nat-on-dark); opacity: 0.82; } /* ============================================================ * 8 - FAQ * ============================================================ */ .nat-faq { border-top: 1px solid var(--nat-line); max-width: 46rem; } .nat-faq details { border-bottom: 1px solid var(--nat-line); } .nat-faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: flex-start; gap: 1.5rem; padding: 1.15rem 0.15rem; font-weight: 700; font-size: 1.0625rem; line-height: 1.45; color: var(--nat-accent); } .nat-faq summary::-webkit-details-marker { display: none; } /* Die Frage ist zugleich Ueberschrift (Excel Spalte P sieht

vor) und * Bedienelement des Akkordeons - sie erbt daher die Typografie der Zusammen- * fassung und bringt keine eigenen Abstaende mit. */ .nat-faq summary .nat-faq__q { margin: 0; font: inherit; color: inherit; letter-spacing: inherit; text-transform: none; } .nat-faq summary::after { content: "+"; flex: 0 0 auto; font-weight: 400; font-size: 1.5rem; line-height: 1.2; color: var(--nat-accent-2); transition: transform 0.28s ease; } .nat-faq details[open] summary::after { transform: rotate(45deg); } .nat-faq .nat-faq__a { padding: 0 0.15rem 1.35rem; color: var(--nat-ink-soft); max-width: 64ch; line-height: 1.65; } .nat-dark .nat-faq, .nat-dark .nat-faq details { border-color: var(--nat-line-dark); } .nat-dark .nat-faq summary { color: var(--nat-on-dark); } /* --- Block ae/faq (V2b) --------------------------------------------- Der Block gibt denselben Klassenvertrag aus wie das fruehere Roh-HTML (.nat-faq__item / .nat-faq__q / .nat-faq__a), deshalb greift alles oben unveraendert. Hier kommt nur dazu, was der Block neu mitbringt: Zwischenueberschriften, die Ein-/Ausklapp-Leiste und der Weg zur Gesamtuebersicht. Die Farbregeln stehen bewusst hier im Theme und nicht im Plugin - dieselbe Hausregel wie beim Schaufenster. */ /* Keine eigene Achse: der Abschnitt haengt wie alles andere an der Seitenschiene (Abschnitt 2a). Zentrieren waere hier die zweite Komposition, die das Theme ausdruecklich abgeschafft hat. */ .ae-faq .ae-faq__title { margin-bottom: 1.5rem; } .ae-faq .ae-faq__intro { margin: 0 0 1.5rem; max-width: 64ch; color: var(--nat-ink-soft); } /* Keine eigene Schriftgroesse: die Gruppenueberschrift der Vollliste ist dieselbe Sektionsueberschrift wie .ae-faq__title auf den Produktseiten und holt sich Schrift, Groesse und Laufweite ueber h2.nat-display aus der Typo-Achse. Hier bleiben nur Abstand und Farbe - der obere Abstand ist groesser als die alte 21-px-Fassung brauchte, sonst klebt die grosse Ueberschrift an der letzten Antwort der vorigen Gruppe. */ .ae-faq .ae-faq__gruppe { margin: 3.5rem 0 0.75rem; color: var(--nat-accent); } .ae-faq .ae-faq__gruppe:first-child { margin-top: 0; } /* Verdeckte Fragen. Die Wirkung haengt an data-js: ohne JavaScript setzt view.js das Attribut nicht, dann stehen ALLE Fragen offen. Wer ohne Skript unterwegs ist, sieht damit mehr statt weniger - und ein einfacher Crawler ebenfalls. Die Antworten stehen ohnehin im HTML. */ .ae-faq[data-js="an"] .nat-faq__item.is-beyond { display: none; } .ae-faq .is-hidden { display: none !important; } .ae-faq__mehr { display: flex; justify-content: flex-start; margin-top: 1.5rem; } .ae-faq__btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; min-height: 44px; padding: 0.55rem 1.35rem; border: 1px solid var(--nat-accent); border-radius: var(--nat-radius); background: transparent; color: var(--nat-accent); font: inherit; font-size: 0.9375rem; font-weight: 700; line-height: 1; cursor: pointer; transition: background-color 0.2s ease, color 0.2s ease, transform 0.16s ease; } .ae-faq__btn:hover { background: var(--nat-accent); color: var(--nat-base); } .ae-faq__btn:active { transform: scale(0.98); } .ae-faq__btn:focus-visible { outline: 2px solid var(--nat-accent); outline-offset: 3px; } .ae-faq .ae-faq__alle { margin-top: 1.25rem; } .nat-dark .ae-faq__btn { border-color: var(--nat-on-dark); color: var(--nat-on-dark); } .nat-dark .ae-faq__btn:hover { background: var(--nat-on-dark); color: var(--nat-accent); } /* ============================================================ * 9 - INFOZEILE / STANDORTKARTE * ============================================================ */ .nat-factbar { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.25rem, 2.5vw, 2.25rem); padding: clamp(1.4rem, 2.5vw, 2rem) clamp(1.4rem, 2.5vw, 2rem); background: var(--nat-sage); border-radius: var(--nat-radius); } .nat-factbar h3 { margin: 0 0 0.35rem; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--nat-accent-2); } .nat-factbar p { margin: 0; font-size: 1rem; line-height: 1.5; color: var(--nat-ink); max-width: none; } .nat-map__card { display: flex; align-items: center; gap: 0.9rem; text-decoration: none; color: inherit; padding: 1rem 1.1rem; border-radius: var(--nat-radius); border: 1px solid var(--nat-line); background: var(--nat-base); transition: transform 0.18s ease, box-shadow 0.2s ease; } .nat-map__card:hover { transform: translateY(-2px); box-shadow: var(--nat-shadow); } .nat-map__pin { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; background: var(--nat-accent); color: #fff; } .nat-map__text { display: flex; flex-direction: column; line-height: 1.35; } .nat-map__text strong { color: var(--nat-ink); } .nat-map__text span { font-size: 0.9rem; color: var(--nat-ink-soft); } .nat-map__cta { margin-left: auto; font-weight: 700; font-size: 0.9rem; color: var(--nat-accent); white-space: nowrap; } /* ============================================================ * 10 - DOWNLOADS * ============================================================ */ .nat-dl { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 2vw, 1.5rem); } /* Einzelner Download mitten im Fliesstext, z. B. je AGB-Block auf /agb/. Ohne diese Regel saesse die einzelne Kachel als schmales Drittel im Raster. */ .nat-dl--einzeln { grid-template-columns: minmax(0, 460px); margin-block: clamp(1rem, 2vw, 1.4rem); } .nat-dl__item { display: flex; align-items: flex-start; gap: 0.9rem; padding: 1.1rem 1.2rem; background: var(--nat-base); border: 1px solid var(--nat-line); border-radius: var(--nat-radius); text-decoration: none; color: inherit; transition: transform 0.18s ease, box-shadow 0.2s ease, border-color 0.2s ease; } .nat-dl__item:hover { transform: translateY(-2px); box-shadow: var(--nat-shadow); border-color: #C9CEBD; } /* Der Slot traegt seit 12.08.2026 das freigestellte Katalog-Cover statt des Woertchens PDF. Traegt er ausnahmsweise doch wieder Text, greifen Kasten und Schrift unveraendert - deshalb bleiben beide Regelsaetze stehen. */ .nat-dl__icon { flex: 0 0 auto; width: 72px; height: 72px; display: inline-flex; align-items: center; justify-content: center; border-radius: 3px; color: var(--nat-accent); font-size: 0.6875rem; font-weight: 900; letter-spacing: 0.04em; } .nat-dl__icon:not(:has(img)) { background: var(--nat-sage); } .nat-dl__icon img { width: 100%; height: 100%; object-fit: contain; display: block; } .nat-dl__text { display: flex; flex-direction: column; gap: 0.2rem; } .nat-dl__title { font-weight: 700; color: var(--nat-accent); line-height: 1.35; } .nat-dl__meta { font-size: 0.8125rem; color: var(--nat-ink-soft); } /* ============================================================ * 10b - NEWSLETTER (Block ae/newsletter) * ============================================================ * Die Felder gehoeren Natura, abgeschickt wird zu rapidmail. Deshalb steht * die Gestaltung hier im Theme und nicht im Plugin - dieselbe Hausregel wie * beim Schaufenster und beim FAQ-Block. * * Zwei Varianten mit demselben Vokabular: --voll steht auf hellem Grund und * setzt die Felder untereinander, --schlank steht im dunkelgruenen Fussbereich * und legt E-Mail und Knopf in eine Zeile. Was beide teilen, steht oben; was * die dunkle Leiste anders braucht, steht unten und nur dort. */ .nat-nl { max-width: 40rem; } /* Steht der Block direkt in einer Sektion, haelt die Seitenschiene (Abschnitt 2a) jedes Kind auf voller Breite - gewollt fuer Raster, falsch fuer Eingabe- felder. Ein Formular braucht sein Mass wie der Fliesstext sein Lesemass, deshalb dieselbe Spezifitaet wie dort und nicht ein !important. */ main .nat-sec > .nat-nl, main .nat-page-hero > .nat-nl, main .wp-block-post-content > .alignfull > .nat-nl { max-width: 40rem; } .nat-nl__heading { margin: 0 0 0.5rem; } .nat-nl__intro { margin: 0 0 1.5rem; color: var(--nat-ink-soft); max-width: 60ch; } .nat-nl__form { display: flex; flex-direction: column; gap: 1rem; align-items: stretch; } .nat-nl__row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; } .nat-nl__field { display: flex; flex-direction: column; gap: 0.4rem; min-width: 0; } .nat-nl__label { font-size: 0.875rem; font-weight: 700; color: var(--nat-accent); letter-spacing: 0.01em; } /* Im Fussbereich traegt das Feld seinen Namen im Platzhalter. Die Beschriftung bleibt trotzdem im Markup - sie verschwindet nur fuer das Auge, nicht fuer die Vorlesesoftware. */ .nat-nl__label--nur-vorlesen { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .nat-nl__input { width: 100%; /* Ohne border-box kommen Innenabstand und Kante auf die volle Breite obendrauf. Das Feld stand dadurch 11 px ueber den Schirmrand hinaus und liess auf dem Telefon JEDE Seite waagerecht rollen, weil die Leiste im Fussbereich ueberall steht (gefunden im Mobil-Prueflauf 12.08.2026). */ box-sizing: border-box; min-height: 3rem; padding: 0.75rem 0.9rem; border: 1px solid var(--nat-line); border-radius: var(--nat-radius); background: var(--nat-base); color: var(--nat-ink); font: inherit; } .nat-nl__input::placeholder { color: var(--nat-ink-soft); opacity: 1; } .nat-nl__input:focus-visible { outline: 2px solid var(--nat-accent-2-text); outline-offset: 1px; border-color: var(--nat-accent); } .nat-nl__btn { align-self: flex-start; box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0.95rem 1.75rem; border: 0; border-radius: var(--nat-radius); background: var(--nat-accent); color: var(--nat-base); font: inherit; font-weight: 700; line-height: 1; cursor: pointer; transition: background-color 0.2s ease, transform 0.16s ease; } .nat-nl__btn:hover { background: var(--nat-accent-2); } .nat-nl__btn:active { transform: scale( 0.98 ); } .nat-nl__btn:focus-visible { outline: 2px solid var(--nat-accent); outline-offset: 3px; } .nat-nl__hinweis { margin: 0; font-size: 0.8125rem; line-height: 1.5; color: var(--nat-ink-soft); max-width: 60ch; } .nat-nl__hinweis a { color: inherit; } /* Einwilligungssatz aus rapidmails Formular 1540 (16.09.2026). Steht ueber dem Knopf, weil das Absenden die Einwilligung ist; gleiche Groesse wie der Hinweis darunter, aber in Tinte statt weicher Tinte, damit er als Satz vor dem Klick gelesen wird. */ .nat-nl__einwilligung { margin: 0; font-size: 0.8125rem; line-height: 1.5; color: var(--nat-ink); max-width: 60ch; } /* --- Schlanke Leiste im Fussbereich -------------------------------------- Dunkler Grund, eine Zeile, ein Pflichtfeld. Ab der Handybreite bricht sie von selbst um, weil das Feld eine Mindestbreite behaelt. */ .nat-nl--schlank { max-width: none; } /* Derselbe Kopf wie ueber den Spalten Produkte, Service, Unternehmen. */ .nat-nl--schlank .nat-nl__heading { margin: 0 0 0.35rem; font-size: 0.85rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; } .nat-nl--schlank .nat-nl__intro { margin: 0 0 1rem; font-size: 0.95rem; } .nat-nl--schlank .nat-nl__form { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 0.75rem; } .nat-nl--schlank .nat-nl__field--mail { flex: 1 1 16rem; max-width: 26rem; } .nat-nl--schlank .nat-nl__btn { flex: 0 0 auto; align-self: auto; } .nat-nl--schlank .nat-nl__hinweis { flex: 1 1 100%; order: 2; } /* In der Zeile bleiben Feld und Knopf nebeneinander; Einwilligung und Hinweis ruecken per order unter die Zeile. */ .nat-nl--schlank .nat-nl__einwilligung { flex: 1 1 100%; order: 1; max-width: none; } .nat-sitefooter .nat-nl__heading, .nat-sitefooter .nat-nl__label { color: var(--nat-on-dark); } .nat-sitefooter .nat-nl__intro, .nat-sitefooter .nat-nl__hinweis { color: var(--nat-on-dark); opacity: 0.78; } .nat-sitefooter .nat-nl__einwilligung { color: var(--nat-on-dark); } .nat-sitefooter .nat-nl__input { background: var(--nat-base); border-color: transparent; color: var(--nat-ink); } /* Knopftext in Tinte statt Dunkelgruen: Dunkelgruen auf Hellgruen lag bei 3,2:1 (Durchsicht 14.09.2026, B-3), Tinte auf Hellgruen liegt bei 8,9:1. */ .nat-sitefooter .nat-nl__btn { background: var(--nat-accent-2); color: var(--nat-ink); } .nat-sitefooter .nat-nl__btn:hover { background: var(--nat-on-dark); } .nat-sitefooter .nat-nl__btn:focus-visible, .nat-sitefooter .nat-nl__input:focus-visible { outline-color: var(--nat-on-dark); } @media (max-width: 560px) { .nat-nl__row { grid-template-columns: 1fr; } .nat-nl--schlank .nat-nl__btn { width: 100%; } } /* ============================================================ * 10c - STELLENANGEBOTE (Liste aus HRlab, /jobs/) * ============================================================ * Dieselbe Kachelsprache wie die Downloads eine Sektion weiter oben: heller * Grund, feine Kante, Anheben beim Zeigen. Der Unterschied ist die Rolle - * eine Downloadkachel liefert eine Datei, diese hier fuehrt aus dem Haus, und * deshalb sitzt der Weg nach draussen als eigener Knopf rechts statt als * ganzflaechiger Link. */ .nat-jobs { list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; gap: 1rem; } /* Die Liste ist eine