/*
Theme Name: Gruneberg Beschichtungen
Theme URI: https://beschichtungen-jangruneberg.de
Author: WEITERFORM | Niko Kulisch
Author URI: https://www.weiterform.de
Description: Block-Theme für Jan Gruneberg – Beschichtungen, Leipzig. Corporate Design aus dem Firmenlogo: Olivgrün #6B8E23, Anthrazit #1E1C19, warmes Off-White #EDEBE4. Typografie IBM Plex (lokal eingebunden, keine Google-CDN-Verbindung). Alle Seiteninhalte bestehen aus Gutenberg-Core-Blöcken und bleiben ohne dieses Theme lesbar.
Requires at least: 6.5
Tested up to: 6.8
Requires PHP: 7.4
Version: 1.8.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: gruneberg
Tags: block-theme, full-site-editing, business, one-column, custom-colors, custom-menu, editor-style
*/
/* ============================================================
Ergänzungen zu theme.json
Nur das, was sich nicht sinnvoll im Block einstellen lässt.
Farben, Abstände und Schriftgrößen stehen bewusst NICHT hier,
sondern im jeweiligen Block — damit der Kunde sie in der
Seitenleiste findet und ändern kann.
============================================================ */
:root {
--jg-oliv: #6B8E23;
--jg-oliv-dunkel: #52691C;
--jg-anthrazit: #1E1C19;
--jg-grau: #55524B;
--jg-linie: rgba(30, 28, 25, 0.14);
--jg-bernstein: #D9A72C;
}
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
* { animation: none !important; transition: none !important; }
}
body { -webkit-font-smoothing: antialiased; }
/* Sichtbarer Tastaturfokus — Barrierefreiheit
Doppelring: dunkler Kern plus heller Halo. Ein einfarbiger Ring wäre auf
mindestens einem unserer Hintergründe unsichtbar — Olivgrün auf Olivgrün
im CTA-Band ergibt Kontrast 1:1. Die Kombination hält auf Sand, Weiß,
Anthrazit, Stahlblau und Oliv gleichermaßen. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
summary:focus-visible,
details:focus-visible {
outline: 3px solid var(--jg-anthrazit);
outline-offset: 2px;
box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.95);
border-radius: 2px;
}
/* ---------- Lange deutsche Wörter umbrechen ----------
Ohne diese Regel schiebt eine Überschrift wie „Allgemeine
Geschäftsbedingungen" oder „Datenschutzerklärung" auf einem 375-px-Display
die ganze Seite waagerecht auf — dann lässt sich das Layout seitlich
wegschieben. Gemessen am 10.09.2026: AGB 382 px statt 360 px.
hyphens greift, weil WordPress im -Tag lang="de-DE" setzt. */
h1, h2, h3, h4, h5, h6,
.wp-block-post-title,
.wp-block-heading {
overflow-wrap: break-word;
hyphens: auto;
}
p, li, dd, dt, td, th, figcaption, .wp-block-button__link {
overflow-wrap: break-word;
}
/* ---------- Kicker: kleines Label über Überschriften ---------- */
.jg-kicker {
font-family: 'IBM Plex Mono', ui-monospace, monospace;
letter-spacing: 0.13em;
text-transform: uppercase;
color: var(--jg-oliv-dunkel);
}
.jg-kicker-hell { color: var(--jg-bernstein); }
/* ---------- Normbezeichnungen und Nummerierungen ---------- */
.jg-norm,
.jg-nummer {
font-family: 'IBM Plex Mono', ui-monospace, monospace;
letter-spacing: 0.05em;
}
.jg-nummer { text-transform: uppercase; }
/* Normleiste: Trennlinien zwischen den Spalten */
@media (min-width: 782px) {
.jg-normleiste .wp-block-column + .wp-block-column {
border-left: 1px solid rgba(255, 255, 255, 0.16);
padding-left: 1.6rem;
}
}
/* ---------- Karten ----------
.jg-karte sitzt auf den Spalten der Leistungsraster.
.is-style-karte kommt aus dem Blockstil „Karte" (functions.php) und macht
dieselbe Optik für jede Gruppe verfügbar, die der Kunde selbst anlegt. */
.jg-karte,
.wp-block-group.is-style-karte {
overflow: hidden;
transition: transform .25s ease, box-shadow .25s ease;
}
.wp-block-group.is-style-karte {
background: #fff;
border: 1px solid #DEDBD2;
border-radius: 2px;
}
.jg-karte:hover,
.wp-block-group.is-style-karte:hover {
transform: translateY(-3px);
box-shadow: 0 12px 30px rgba(30, 28, 25, 0.10);
}
.jg-karte .wp-block-image,
.jg-karte .wp-block-image img { margin: 0; display: block; width: 100%; }
.jg-karte .wp-block-image { border-radius: 0; }
.jg-karte .wp-block-image img { border-radius: 0; }
/* Karten in einer Reihe werden von wp-block-columns auf gleiche Höhe gestreckt.
Ohne diese Regel hängt der Link „Zur Leistung →" bei der kürzeren Karte
irgendwo in der Mitte statt am Fuß. */
.jg-karte { display: flex; flex-direction: column; }
.jg-karte > .wp-block-group { display: flex; flex-direction: column; flex: 1; }
.jg-karte .jg-mehr { margin-top: auto; padding-top: 0.6rem; }
.jg-mehr a {
color: var(--jg-oliv-dunkel);
text-decoration: none;
border-bottom: 1px solid var(--jg-oliv);
padding-bottom: 2px;
}
.jg-mehr a:hover { color: var(--jg-anthrazit); border-color: var(--jg-anthrazit); }
/* ---------- Checkliste mit Haken ---------- */
.jg-haken { list-style: none; padding-left: 0; }
.jg-haken li {
position: relative;
padding-left: 1.5rem;
margin-bottom: 0.5rem;
line-height: 1.55;
}
.jg-haken li::before {
content: "✓";
position: absolute; left: 0; top: 0;
color: var(--jg-oliv-dunkel);
font-weight: 700;
}
/* auf dunklem Grund */
.has-anthrazit-background-color .jg-haken li::before,
.has-stahl-background-color .jg-haken li::before { color: var(--jg-bernstein); }
/* ---------- Ablauf-Schritte ---------- */
.jg-schritt { border-top: 2px solid var(--jg-oliv); padding-top: 1.2rem; }
.jg-schritt-nr {
font-family: 'IBM Plex Mono', ui-monospace, monospace;
letter-spacing: 0.1em;
color: var(--jg-oliv-dunkel);
}
/* ---------- FAQ-Akkordeon ---------- */
.jg-faq {
border-bottom: 1px solid var(--jg-linie);
padding: 1.1rem 0;
}
.jg-faq summary {
cursor: pointer;
font-family: 'IBM Plex Serif', Georgia, serif;
font-weight: 600;
font-size: 1.02rem;
color: var(--jg-anthrazit);
list-style: none;
position: relative;
padding-right: 2.2rem;
}
.jg-faq summary::-webkit-details-marker { display: none; }
.jg-faq summary::after {
content: "+";
position: absolute; right: 0; top: -0.12em;
font-family: 'IBM Plex Mono', monospace;
font-size: 1.5rem; line-height: 1;
color: var(--jg-oliv);
}
.jg-faq[open] summary::after { content: "–"; }
.jg-faq > :not(summary) {
margin-top: 0.9rem;
font-size: 0.95rem;
line-height: 1.72;
color: var(--jg-grau);
max-width: 68ch;
}
/* ---------- Galerie ---------- */
.wp-block-gallery.has-nested-images figure.wp-block-image img { border-radius: 2px; }
.wp-block-gallery.has-nested-images figure.wp-block-image figcaption {
background: linear-gradient(0deg, rgba(20,19,16,.72) 0%, rgba(20,19,16,0) 100%);
font-family: 'IBM Plex Mono', ui-monospace, monospace;
font-size: 0.7rem;
letter-spacing: 0.03em;
}
/* ---------- Rechtstexte: ruhiger Lesefluss ---------- */
.jg-rechtstext { max-width: 72ch; }
.jg-rechtstext h2 { margin-top: 2.6rem; }
.jg-rechtstext h3 { margin-top: 1.8rem; }
.jg-rechtstext p,
.jg-rechtstext li { font-size: 0.95rem; line-height: 1.78; color: var(--jg-grau); }
/* ---------- Vollbreite Abschnitte stossen Kante an Kante ----------
WordPress setzt zwischen Geschwisterbloecken --wp--style--block-gap. Bei uns
sind das 1.25rem = 20 px. Zwischen zwei farbigen Vollbreit-Abschnitten wird
daraus ein 20 px breiter Streifen des Seitenhintergrunds - die Seite sieht
gestreift aus. Gemessen am 10.09.2026 auf der Startseite: 7 solcher Streifen,
unter anderem ueber und unter dem gruenen Telefonband.
Die Abschnitte bringen ihren Abstand als eigenes Padding mit, sie brauchen
den Blockabstand nicht. */
.entry-content > .alignfull + .alignfull,
.wp-block-post-content > .alignfull + .alignfull {
margin-block-start: 0;
}
/* Dieselbe Fuge sitzt noch zweimal weiter aussen: zwischen Kopfbereich und
Inhalt und zwischen Inhalt und Fusszeile. Live gemessen am 10.09.2026:
je 20 px heller Streifen, unter anderem direkt unter dem gruenen
Telefonband. Kopf- und Fussbereich bringen ihren Abstand als eigenes
Padding mit. */
.wp-site-blocks > * + * {
margin-block-start: 0;
}
/* ---------- Logo im Kopfbereich ----------
Bewusst ein festes Bild statt wp:site-logo: Das Site-Logo haengt an einer
Medien-ID, die beim Import noch nicht existiert - der Kopf blieb deshalb
zweimal ohne Logo. Als Bildblock steht es sofort nach der Installation da
und laesst sich im Editor genauso austauschen. */
.jg-kopf-logo { margin: 0; line-height: 0; }
.jg-kopf-logo img { height: 48px; width: auto; display: block; }
/* ---------- Logo in der Fusszeile ----------
Das Originallogo, unveraendert, auf hellem Grund. Kein Kasten, keine
Umfaerbung. Warum der Fussbereich dafuer hell geworden ist, steht weiter
unten bei ".jg-footer". */
.jg-fuss-logo { margin: 0 0 1.1rem; max-width: 170px; }
.jg-fuss-logo img { width: 100%; height: auto; display: block; }
/* Der Claim laeuft ueber die ganze Inhaltsbreite, damit er auf eine Zeile
passt - aber er bleibt im 1180er Container. Vorher stand er auf
max-width:none und begann dadurch an der Fensterkante, also deutlich links
vom Logo darueber. Jetzt fangen beide an derselben Kante an. */
.jg-fuss-claim { margin-left: 0; margin-right: auto; }
/* Und das Logo linksbuendig in seiner Spalte, nicht mittig. */
.jg-fuss-logo { margin-left: 0; margin-right: auto; }
/* ---------- Titelbild-Slider ----------
Ohne JavaScript stehen die Folien untereinander - alles bleibt lesbar.
Erst die Klasse jg-slider-bereit, die assets/js/slider.js vergibt, legt sie
uebereinander. Deshalb steht hier nichts, was ohne diese Klasse etwas
versteckt.
Die Leiste liegt auf dem unteren Drittel des Bildes. Sie ist nicht einfach
halbdurchsichtig, sondern ein Verlauf: unten dichter, oben offener. Eine
gleichmaessig durchsichtige Flaeche traegt weisse Schrift nur so lange, wie
das Motiv dunkel ist - bei einer hellen Halle waere sie weg. */
.jg-slider { position: relative; }
.jg-slider-bereit { display: grid; }
.jg-slider-bereit > .jg-slide { grid-area: 1 / 1; }
.jg-slider-bereit > .jg-slide {
opacity: 0;
visibility: hidden;
transition: opacity .7s ease;
}
.jg-slider-bereit > .jg-slide.jg-slide-an {
opacity: 1;
visibility: visible;
}
@media (prefers-reduced-motion: reduce) {
.jg-slider-bereit > .jg-slide { transition: none; }
}
/* Die Leiste laeuft von Fensterkante zu Fensterkante, ihr Inhalt bleibt auf
1180 px. Eine Leiste mit Luecken links und rechts sieht aus wie ein
vergessener Kasten, nicht wie eine Leiste. */
.jg-slide .wp-block-cover__inner-container { width: 100%; max-width: none; }
.jg-slider-leiste {
max-width: none;
background: linear-gradient(
to top,
rgba(30, 28, 25, 0.94) 0%,
rgba(30, 28, 25, 0.86) 55%,
rgba(30, 28, 25, 0.62) 100%
);
backdrop-filter: blur(3px);
border-top: 1px solid rgba(255, 255, 255, 0.12);
}
/* Pfeile und Punkte */
.jg-slider-pfeil {
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 3;
width: 46px;
height: 46px;
display: flex;
align-items: center;
justify-content: center;
background: rgba(30, 28, 25, 0.5);
color: #fff;
border: 1px solid rgba(255, 255, 255, 0.3);
border-radius: 2px;
font-size: 26px;
line-height: 1;
cursor: pointer;
transition: background .18s ease, border-color .18s ease;
}
.jg-slider-pfeil:hover,
.jg-slider-pfeil:focus-visible {
background: var(--jg-oliv);
border-color: var(--jg-oliv);
}
.jg-slider-vor { left: 1.2rem; }
.jg-slider-nach { right: 1.2rem; }
/* Die Punkte liegen auf dem Foto. Auf einer hellen Halle waeren weisse
Ringe unsichtbar, auf einer dunklen Tiefgarage dunkle. Deshalb bekommen
sie eine eigene, leicht abgedunkelte Flaeche - dann stimmt der Kontrast
unabhaengig vom Motiv. */
.jg-slider-punkte {
position: absolute;
z-index: 3;
right: 2rem;
top: 1.4rem;
display: flex;
align-items: center;
gap: 0.55rem;
background: rgba(30, 28, 25, 0.5);
border: 1px solid rgba(255, 255, 255, 0.22);
border-radius: 2px;
padding: 0.5rem 0.7rem;
backdrop-filter: blur(3px);
}
.jg-slider-punkt {
width: 11px;
height: 11px;
padding: 0;
border-radius: 50%;
border: 1px solid rgba(255, 255, 255, 0.75);
background: transparent;
cursor: pointer;
transition: background .18s ease, transform .18s ease;
}
.jg-slider-punkt.an {
background: var(--jg-oliv);
border-color: var(--jg-oliv);
transform: scale(1.15);
}
.jg-slider-pause {
margin-left: 0.35rem;
width: 24px;
height: 24px;
display: flex;
align-items: center;
justify-content: center;
background: transparent;
color: #fff;
border: 1px solid rgba(255, 255, 255, 0.45);
border-radius: 2px;
font-size: 10px;
line-height: 1;
cursor: pointer;
}
.jg-slider-pause:hover,
.jg-slider-pause:focus-visible { background: var(--jg-oliv); border-color: var(--jg-oliv); }
/* Auf dem Telefon ist es eng. Gemessen bei 375x812: Der Inhalt der Leiste
brauchte zunaechst 419 px von 552 px Bildhoehe - vom Foto blieben 133 px,
und die Knoepfe endeten 5 px ueber der Falz. Deshalb hier durchgehend
kleiner und knapper. Die Texte selbst bleiben unveraendert. */
@media (max-width: 781px) {
/* 66vh statt mehr: Bei 72vh endeten die Knoepfe bei y=690 und damit unter
der Falz eines Telefons (rund 660). Das Foto bekommt dadurch weniger
Hoehe - aber ein Knopf, den man erst suchen muss, ist teurer als ein
paar Pixel Bild. */
.jg-slide { min-height: 66vh !important; }
.jg-slider-leiste {
padding: 1.15rem 1.2rem 1.25rem !important;
}
.jg-slider-leiste .jg-kicker {
font-size: 0.62rem !important;
margin-bottom: 0.5rem !important;
}
.jg-slider-leiste h1,
.jg-slider-leiste h2 {
font-size: clamp(1.42rem, 5.8vw, 1.75rem);
margin-bottom: 0.5rem !important;
}
.jg-slider-leiste p:not(.jg-kicker) {
font-size: 0.88rem !important;
line-height: 1.45 !important;
margin-bottom: 0.95rem !important;
}
.jg-slider-leiste .wp-block-button__link {
padding: 0.75rem 1.2rem;
font-size: 0.82rem;
}
/* Pfeile weg: Auf dem Telefon wischt man, und sie laegen auf der Leiste. */
.jg-slider-pfeil { display: none; }
.jg-slider-punkte { right: 1.2rem; top: 1rem; }
}
/* ---------- Rueckruf-Formular ----------
Erzeugt von inc/formular.php. Im Editor steht dort nur ein HTML-Block mit
.
WICHTIG - color-scheme: Ohne diese Zeile zeichnet ein Browser im dunklen
Systemmodus die Formularfelder selbst dunkel: dunkler Kasten, helle Schrift,
heller Rahmen. Auf unserer hellen Flaeche ergibt das ein Formular, das
aussieht wie aus einem anderen Programm. Mit color-scheme: light bleiben
Felder, Auswahlkaestchen und Bildlaufleisten hell - unabhaengig davon, was
der Besucher eingestellt hat. Zusaetzlich stehen alle Farben ausdruecklich
da, damit nichts aus einer Voreinstellung des Browsers kommt. */
.jg-formular {
color-scheme: light;
accent-color: var(--jg-oliv);
display: grid;
gap: 1.15rem;
color: var(--jg-anthrazit);
}
.jg-formular .jg-feld {
display: grid;
gap: 0.4rem;
margin: 0;
}
.jg-formular label {
font-family: 'IBM Plex Sans', system-ui, sans-serif;
font-size: 0.8rem;
font-weight: 600;
line-height: 1.3;
color: var(--jg-anthrazit);
letter-spacing: 0.01em;
}
.jg-formular input[type="text"],
.jg-formular input[type="email"],
.jg-formular input[type="tel"],
.jg-formular textarea {
font-family: inherit;
font-size: 0.95rem;
line-height: 1.5;
color: var(--jg-anthrazit);
background-color: #fff;
border: 1px solid #cbc7bd;
border-radius: 2px;
padding: 0.68rem 0.85rem;
width: 100%;
max-width: 100%;
box-sizing: border-box;
display: block;
appearance: none;
-webkit-appearance: none;
transition: border-color .15s ease, box-shadow .15s ease;
}
.jg-formular input::placeholder,
.jg-formular textarea::placeholder { color: #8a867c; opacity: 1; }
.jg-formular input:hover,
.jg-formular textarea:hover { border-color: #a9a396; }
.jg-formular input:focus,
.jg-formular textarea:focus {
border-color: var(--jg-oliv);
box-shadow: 0 0 0 3px rgba(107, 142, 35, 0.2);
outline: none;
}
/* Die Nachricht ist das Feld, in dem wirklich geschrieben wird - sie bekommt
sichtbar mehr Platz als die einzeiligen Angaben darueber. */
.jg-formular textarea {
resize: vertical;
min-height: 10.5rem;
}
.jg-pflicht { color: var(--jg-oliv-dunkel); font-weight: 700; }
/* Einwilligung: Kaestchen und Text auf einer Grundlinie. */
.jg-formular .jg-einwilligung {
grid-template-columns: auto 1fr;
align-items: start;
gap: 0.65rem;
margin-top: 0.15rem;
}
.jg-formular .jg-einwilligung input[type="checkbox"] {
width: 1.05rem;
height: 1.05rem;
margin: 0.18rem 0 0;
accent-color: var(--jg-oliv);
flex: none;
}
.jg-formular .jg-einwilligung label {
font-weight: 400;
font-size: 0.84rem;
line-height: 1.55;
color: var(--jg-grau);
}
.jg-formular .jg-einwilligung a { color: var(--jg-oliv-dunkel); }
.jg-formular .jg-pflichthinweis {
margin: 0;
font-size: 0.78rem;
line-height: 1.5;
color: var(--jg-grau);
}
.jg-formular .jg-absenden { margin: 0.35rem 0 0; }
.jg-formular button[type="submit"] {
font-family: inherit;
background-color: var(--jg-oliv);
color: #fff;
border: 1px solid var(--jg-oliv);
border-radius: 2px;
padding: 0.95rem 1.9rem;
font-size: 0.875rem;
font-weight: 600;
letter-spacing: 0.01em;
cursor: pointer;
appearance: none;
-webkit-appearance: none;
transition: background-color .2s ease, border-color .2s ease;
}
.jg-formular button[type="submit"]:hover {
background-color: var(--jg-oliv-dunkel);
border-color: var(--jg-oliv-dunkel);
}
/* Honigtopf. Nicht display:none - manche Bots fuellen nur Felder aus, die im
Layout stehen. Stattdessen aus dem Bild geschoben und fuer Vorleseprogramme
ueber aria-hidden am Elternelement ausgeblendet.
Am 10.09.2026 war dieses Feld auf der Live-Seite sichtbar, weil diese Regel
beim Umbau des Titelbild-CSS versehentlich mitgeloescht worden war. */
.jg-formular .jg-honig,
.jg-honig {
position: absolute !important;
width: 1px !important;
height: 1px !important;
padding: 0 !important;
margin: -1px !important;
overflow: hidden !important;
clip: rect(0 0 0 0) !important;
clip-path: inset(50%) !important;
white-space: nowrap !important;
border: 0 !important;
}
.jg-formular-hinweis {
background-color: #FBF3DC;
border-left: 3px solid var(--jg-bernstein);
padding: 0.9rem 1.1rem;
font-size: 0.88rem;
line-height: 1.6;
color: #6A5A21;
margin-bottom: 1.2rem;
}
.jg-formular-danke {
background-color: #fff;
border: 1px solid #DEDBD2;
border-left: 3px solid var(--jg-oliv);
border-radius: 2px;
padding: 1.7rem 1.9rem;
color: var(--jg-anthrazit);
}
.jg-formular-danke p { margin: 0 0 0.6rem; }
.jg-formular-danke p:last-child { margin-bottom: 0; font-size: 0.9rem; color: var(--jg-grau); }
@media (max-width: 781px) {
.jg-formular button[type="submit"] { width: 100%; }
.jg-formular textarea { min-height: 8.5rem; }
}
/* ---------- Bilder vergroessern ----------
Erzeugt von assets/js/lightbox.js. Die Kernfunktion von WordPress ist in
theme.json abgeschaltet, weil sie auf diesem Hosting nicht ausloest -
die Begruendung steht im Kopf der Skriptdatei. */
.jg-lupe {
position: fixed;
inset: 0;
z-index: 9000;
display: flex;
align-items: center;
justify-content: center;
padding: 3.5rem 1.5rem;
background: rgba(30, 28, 25, 0.93);
/* Sichtbar ist der Grundzustand, das Einblenden macht eine Animation.
Umgekehrt waere es gefaehrlich: Liefe der Uebergang nicht - abgeschaltete
Animationen, ein Tab der gerade nicht gezeichnet wird -, dann laege eine
unsichtbare Flaeche ueber der Seite und niemand kaeme mehr weiter.
So ist der schlimmste Fall: Sie ist sofort da statt sanft. */
opacity: 1;
animation: jg-lupe-ein .2s ease;
}
.jg-lupe-zumachen {
opacity: 0;
transition: opacity .18s ease;
}
@keyframes jg-lupe-ein {
from { opacity: 0; }
to { opacity: 1; }
}
.jg-lupe-bild {
max-width: 100%;
max-height: 100%;
width: auto;
height: auto;
border-radius: 2px;
box-shadow: 0 24px 70px rgba(0, 0, 0, 0.55);
}
.jg-lupe-zu {
position: absolute;
top: 1.2rem;
right: 1.2rem;
width: 46px;
height: 46px;
display: flex;
align-items: center;
justify-content: center;
background-color: var(--jg-oliv);
color: #fff;
border: 0;
border-radius: 2px;
font-size: 28px;
line-height: 1;
cursor: pointer;
transition: background-color .18s ease;
}
.jg-lupe-zu:hover,
.jg-lupe-zu:focus-visible { background-color: var(--jg-oliv-dunkel); }
/* Zeigen, dass sich das Bild vergroessern laesst - aber nur dort, wo es geht. */
.entry-content .wp-block-image img,
.entry-content .wp-block-gallery img { cursor: zoom-in; }
.entry-content .jg-slide img,
.entry-content a img { cursor: pointer; }
@media (prefers-reduced-motion: reduce) {
.jg-lupe { animation: none; }
.jg-lupe-zumachen { transition: none; }
}
/* ---------- Telefonband ----------
Der Kunde wollte es "groesser, klarer, sichtbarer, aggressiver". Also:
mehr Hoehe, groessere Schrift, ein Knopf, der wie ein Knopf aussieht,
und die Telefonnummer in der Groesse, in der man sie vom Sofa aus liest.
Der Knopf bleibt anthrazit gefuellt - weisser Text auf dem Olivgruen
erreicht nur 3,8:1, der helle Umriss sogar nur 2,4:1. */
.jg-telefonband h2 {
font-size: clamp(1.35rem, 2.4vw, 1.85rem);
line-height: 1.2;
letter-spacing: -0.01em;
}
.jg-telefonband .wp-block-button__link {
font-size: clamp(1.05rem, 1.9vw, 1.35rem);
font-weight: 700;
letter-spacing: 0.01em;
padding: 1.05rem 2.2rem;
border-radius: 2px;
box-shadow: 0 6px 20px rgba(30, 28, 25, 0.28);
transition: transform .18s ease, box-shadow .18s ease;
}
.jg-telefonband .wp-block-button__link:hover {
transform: translateY(-2px);
box-shadow: 0 10px 26px rgba(30, 28, 25, 0.36);
}
@media (max-width: 781px) {
.jg-telefonband h2 { font-size: 1.3rem; }
.jg-telefonband .wp-block-button__link { width: 100%; text-align: center; font-size: 1.15rem; }
}
/* ---------- Knoepfe ----------
Eine kleine, gleiche Bewegung fuer alle Knoepfe der Seite: anheben,
Schatten, Farbwechsel. Bewusst dezent - 2 Pixel und 180 ms. Mehr wirkt
bei einem Handwerksbetrieb schnell nach Spielerei, weniger merkt niemand.
transform und box-shadow loesen kein Neuberechnen des Layouts aus, es
springt also nichts.
Der Pfeil bei "Zur Leistung" ruckt beim Ueberfahren ein Stueck nach
rechts - dieselbe Idee, nur ohne Flaeche. */
.wp-element-button,
.wp-block-button__link,
.jg-formular button[type="submit"] {
transition:
background-color .18s ease,
border-color .18s ease,
color .18s ease,
transform .18s ease,
box-shadow .18s ease;
will-change: transform;
}
.wp-element-button:hover,
.wp-block-button__link:hover,
.jg-formular button[type="submit"]:hover,
.wp-element-button:focus-visible,
.wp-block-button__link:focus-visible {
transform: translateY(-2px);
box-shadow: 0 6px 18px rgba(30, 28, 25, 0.22);
}
.wp-element-button:active,
.wp-block-button__link:active,
.jg-formular button[type="submit"]:active {
transform: translateY(0);
box-shadow: 0 2px 6px rgba(30, 28, 25, 0.2);
}
/* Textlinks im Karten-Stil: Der Pfeil wandert, die Linie waechst. */
.jg-mehr a {
display: inline-block;
transition: color .18s ease, border-color .18s ease;
}
.jg-mehr a::after {
content: '';
display: inline-block;
width: 0;
transition: width .18s ease;
}
.jg-mehr a:hover { transform: none; }
/* Kontaktzeilen und Fusszeilenlinks bekommen dieselbe ruhige Ueberblendung. */
.jg-kontaktzeile a,
.jg-footer a {
transition: color .18s ease, border-color .18s ease;
}
@media (prefers-reduced-motion: reduce) {
.wp-element-button,
.wp-block-button__link,
.jg-formular button[type="submit"] {
transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}
.wp-element-button:hover,
.wp-block-button__link:hover,
.jg-formular button[type="submit"]:hover {
transform: none;
box-shadow: none;
}
}
/* ---------- Kontaktbereich ----------
Er wirkte aufgeblasen: Die linke Spalte war halb so hoch wie das Formular
daneben, unten links blieb eine grosse leere Flaeche. Zwei Griffe dagegen -
die linke Spalte traegt jetzt Gewicht (grosse Rufnummern statt einer
Adresszeile), und beide Spalten stehen enger. */
/* Die linke Spalte ist kuerzer als das Formular - das ist bei einem
Formular normal und laesst sich nicht wegbauen, ohne Text zu erfinden.
Zentriert verteilt sich der Rest auf oben und unten, statt als ein Block
unten links stehenzubleiben. */
.jg-kontaktbereich .wp-block-columns { align-items: center; }
.jg-kontakt-ruf {
font-family: 'IBM Plex Serif', Georgia, serif;
font-size: clamp(1.35rem, 2.2vw, 1.75rem);
font-weight: 600;
line-height: 1.45;
letter-spacing: -0.01em;
}
.jg-kontakt-ruf a {
color: #fff;
text-decoration: none;
border-bottom: 2px solid var(--jg-oliv);
padding-bottom: 1px;
transition: color .18s ease, border-color .18s ease;
}
.jg-kontakt-ruf a:hover,
.jg-kontakt-ruf a:focus-visible {
color: var(--jg-bernstein);
border-bottom-color: var(--jg-bernstein);
}
.jg-kontakt-mail a {
color: var(--jg-bernstein);
text-decoration: underline;
text-underline-offset: 3px;
text-decoration-thickness: 1px;
word-break: break-word;
}
.jg-kontakt-mail a:hover { color: #fff; }
/* Die Anschrift ist Beiwerk, kein Aufruf zum Handeln - deshalb klein und
abgesetzt, mit einer Trennlinie darueber. */
.jg-kontakt-adresse {
border-top: 1px solid rgba(255, 255, 255, 0.14);
padding-top: 1.1rem;
max-width: 22rem;
}
/* Formular enger: Der Abstand zwischen den Feldern war auf die halbe Seite
verteilt. */
.jg-kontaktbereich .jg-formular { gap: 0.85rem; }
.jg-kontaktbereich .jg-formular textarea { min-height: 8.5rem; }
/* ---------- Leistungs-Karussell ----------
Der Streifen wandert von allein und laeuft endlos: assets/js/karussell.js
klont die Karten einmal und springt am Ende eines Durchlaufs unsichtbar
zurueck. Beim Ueberfahren haelt er an.
Ohne JavaScript steht er still und laesst sich von Hand schieben - es
versteckt sich nichts.
Alle Karten sind gleich gross: gleiche Breite ueber flex-basis, gleiche
Hoehe ueber align-items: stretch, und die Beschreibung ist auf drei Zeilen
begrenzt. Ohne diese Begrenzung bestimmt der laengste Text die Hoehe aller
Karten, und darunter steht bei den kurzen eine Leerflaeche. */
.jg-karussell { position: relative; }
.jg-karussell-spur {
display: flex;
flex-wrap: nowrap;
align-items: stretch;
gap: 1.4rem;
overflow-x: auto;
padding-bottom: 0.4rem;
/* Keine Bildlaufleiste: Der Streifen bewegt sich von selbst, eine Leiste
waere nur ein Strich unter den Karten. */
scrollbar-width: none;
-ms-overflow-style: none;
}
.jg-karussell-spur::-webkit-scrollbar { display: none; }
/* Waehrend der Schleife kein Einrasten - sonst ruckelt die Bewegung gegen
die Rastpunkte. Steht die Schleife still (kein JavaScript), rastet es. */
.jg-karussell:not(.jg-karussell-bereit) .jg-karussell-spur {
scroll-snap-type: x mandatory;
}
.jg-karussell:not(.jg-karussell-bereit) .jg-karussell-karte {
scroll-snap-align: start;
}
.jg-karussell-karte {
flex: 0 0 320px;
width: 320px;
max-width: 320px;
display: flex;
flex-direction: column;
}
/* Bild in fester Buehne: Der Ausschnitt bleibt gleich, nur der Inhalt
waechst beim Ueberfahren. Ohne overflow: hidden liefe das Bild ueber die
Kartenkante hinaus. */
.jg-karussell-karte > .wp-block-image {
overflow: hidden;
border-radius: 2px 2px 0 0;
flex: none;
}
.jg-karussell-karte > .wp-block-image img {
display: block;
width: 100%;
aspect-ratio: 16 / 9;
object-fit: cover;
transition: transform .45s ease;
}
.jg-karussell-karte:hover > .wp-block-image img,
.jg-karussell-karte:focus-within > .wp-block-image img {
transform: scale(1.07);
}
/* Textteil fuellt den Rest, der Verweis sitzt unten - dadurch stehen die
Verweise aller Karten auf einer Linie. */
.jg-karussell-karte > .wp-block-group {
display: flex;
flex-direction: column;
flex: 1;
}
.jg-karussell-karte .jg-mehr { margin-top: auto; padding-top: 0.7rem; }
/* Beschreibung auf drei Zeilen. Der Rest steht auf der Leistungsseite. */
.jg-karussell-karte .wp-block-group > p:not(.jg-nummer):not(.jg-mehr) {
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
/* Ueberschrift auf zwei Zeilen, damit eine lange Ueberschrift nicht die
Hoehe aller Karten bestimmt. */
.jg-karussell-karte h3 {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
min-height: 2.5em;
}
/* Pfeile */
.jg-karussell-pfeil {
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 3;
width: 42px;
height: 42px;
display: flex;
align-items: center;
justify-content: center;
background-color: #fff;
color: var(--jg-anthrazit);
border: 1px solid #DEDBD2;
border-radius: 2px;
font-size: 24px;
line-height: 1;
cursor: pointer;
box-shadow: 0 4px 14px rgba(30, 28, 25, 0.14);
transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}
.jg-karussell-pfeil:hover,
.jg-karussell-pfeil:focus-visible {
background-color: var(--jg-oliv);
border-color: var(--jg-oliv);
color: #fff;
}
.jg-karussell-zurueck { left: -21px; }
.jg-karussell-vor { right: -21px; }
@media (max-width: 1240px) {
.jg-karussell-zurueck { left: 0.4rem; }
.jg-karussell-vor { right: 0.4rem; }
}
@media (max-width: 781px) {
.jg-karussell-karte { flex-basis: 78%; width: 78%; max-width: 78%; }
.jg-karussell-pfeil { display: none; }
}
/* Wer weniger Bewegung eingestellt hat, bekommt einen stehenden Streifen mit
Einrasten - und die Pfeile bleiben. */
@media (prefers-reduced-motion: reduce) {
.jg-karussell-spur { scroll-snap-type: x mandatory; scroll-behavior: auto; }
.jg-karussell-karte { scroll-snap-align: start; }
.jg-karussell-karte > .wp-block-image img { transition: none; }
.jg-karussell-karte:hover > .wp-block-image img { transform: none; }
}
/* ---------- Kopfbereich ----------
WICHTIG: position:sticky muss auf dem Wrapper sitzen, den WordPress um
den Template-Part legt (), nicht
auf .jg-header. Ein sticky-Element kann sich nur innerhalb seines
Containing Block bewegen — und der wäre hier genauso hoch wie das
Element selbst. Der Kopf würde einfach wegscrollen. */
.wp-site-blocks > header.wp-block-template-part,
header.wp-block-template-part:has(> .jg-header) {
position: sticky; top: 0; z-index: 100;
}
.admin-bar .wp-site-blocks > header.wp-block-template-part,
.admin-bar header.wp-block-template-part:has(> .jg-header) { top: 32px; }
@media (max-width: 782px) {
.admin-bar .wp-site-blocks > header.wp-block-template-part,
.admin-bar header.wp-block-template-part:has(> .jg-header) { top: 46px; }
}
/* ⚠ HIER KEIN backdrop-filter, KEIN transform, KEIN filter.
Diese drei Eigenschaften machen ein Element zum Bezugsrahmen fuer
position:fixed. Das Mobilmenue des Navigations-Blocks ist genau das:
position:fixed mit inset:0, also "so gross wie das Fenster". Steht hier ein
backdrop-filter, heisst "so gross wie das Fenster" ploetzlich "so gross wie
der Kopfbereich" - und das Menue oeffnet sich in einen 126 Pixel hohen
Streifen. Am 10.09.2026 auf der Live-Seite gemessen: 390x126 statt 390x844.
Der Knopf funktionierte, das Menue auch; man sah es nur nicht.
Nachgewiesen, indem backdrop-filter im Browser entfernt wurde: sofort
390x844 mit allen elf Menuepunkten.
Die Unschaerfe war ohnehin kaum zu sehen - der Grund ist zu 94 Prozent
deckend. Jetzt ist er es ganz. */
.jg-header {
background: var(--wp--preset--color--sand, #EDEBE4);
border-bottom: 1px solid var(--jg-linie);
}
/* Anker nicht unter den klebenden Kopf schieben */
[id] { scroll-margin-top: 90px; }
.jg-header .wp-block-navigation .wp-block-navigation-item__content {
border-bottom: 2px solid transparent;
padding-bottom: 3px;
}
/* Der Punkt, auf dem man gerade steht, bleibt unterstrichen - in derselben
Farbe wie beim Ueberfahren. Die Klassen vergibt gruneberg_menue_aktiv()
in functions.php; WordPress selbst vergibt sie bei benutzerdefinierten
Menuelinks nicht.
current-menu-ancestor greift, wenn man auf einer Unterseite steht: Dann
bleibt auch "Leistungen" markiert. */
.jg-header .wp-block-navigation .wp-block-navigation-item__content:hover,
.jg-header .wp-block-navigation .wp-block-navigation-item__content:focus-visible,
.jg-header .wp-block-navigation .current-menu-item > .wp-block-navigation-item__content,
.jg-header .wp-block-navigation .current-menu-ancestor > .wp-block-navigation-item__content,
.jg-header .wp-block-navigation .current-menu-item > a,
.jg-header .wp-block-navigation .current-menu-ancestor > a {
border-bottom-color: var(--jg-oliv);
}
.jg-header .wp-block-navigation .current-menu-item > .wp-block-navigation-item__content,
.jg-header .wp-block-navigation .current-menu-ancestor > .wp-block-navigation-item__content {
font-weight: 600;
}
/* Im aufgeklappten Untermenue keine Unterstreichung - dort waere sie ein
Fremdkoerper zwischen den Zeilen. */
.jg-header .wp-block-navigation .wp-block-navigation-submenu .wp-block-navigation-item__content {
border-bottom: 0;
}
.jg-header .wp-block-site-logo img { height: 48px; width: auto; }
/* ---------- Fußbereich ----------
Der Fußbereich ist hell (Sand-hell), seit dem 10.09.2026.
Warum: Das Firmenlogo ist ein SCHWARZER Farbeimer. Auf dem alten dunklen
Fußbereich war er unsichtbar. Zwei Auswege haben wir probiert, der Kunde
hat beide abgelehnt — erst den hellen Kasten unter dem Logo ("sieht
scheiße aus"), dann eine aufgehellte Fassung des Logos ("Logo unten sieht
in weis nicht schön aus"). Beide Male lag es daran, dass wir das Logo an
den Hintergrund angepasst haben statt umgekehrt.
Jetzt steht dort das Originallogo, unverändert, auf hellem Grund. Keine
Umfärbung, kein Kasten. Getrennt wird der Fußbereich vom Inhalt durch die
Linie oben — das grüne Telefonband darüber setzt den Abschluss.
Die Datei logo-jan-gruneberg-hell.png und _logo-hell-erzeugen.ps1 werden
dadurch nicht mehr gebraucht. Sie bleiben liegen, falls doch noch einmal
eine dunkle Fläche ein Logo braucht. */
/* Eine kräftige Kante statt einer Haarlinie. Der Fußbereich ist nur wenig
heller als die Seite; ohne diese Kante beginnt er einfach irgendwo, und
genau das war die Rückmeldung: „durch den hellen Hintergrund leicht zu
überlesen". Drei Pixel Olivgrün setzen den Schlusspunkt. */
.jg-footer {
border-top: 3px solid var(--jg-oliv);
}
/* Alle vier Spalten beginnen auf einer Linie. Vorher stand das Logo allein in
einer hohen Spalte, der Claim schwebte darunter im Nichts, und die drei
Linklisten fingen auf einer anderen Höhe an — das war das „zu viele
verschiedene Höhen und Ebenen". */
.jg-footer-raster { align-items: flex-start; }
.jg-fuss-liste {
list-style: none;
padding-left: 0;
margin: 0;
}
.jg-fuss-liste li { margin: 0; }
/* Die Kontaktzeile lag auf dunklem Grund und hatte deshalb eine helle
Unterstreichung — auf hellem Grund ist die unsichtbar. */
.jg-kontaktzeile a {
color: var(--jg-anthrazit);
text-decoration: none;
border-bottom: 1px solid var(--jg-oliv);
padding-bottom: 1px;
}
.jg-kontaktzeile a:hover,
.jg-kontaktzeile a:focus-visible {
color: var(--jg-oliv-dunkel);
border-color: var(--jg-oliv-dunkel);
}
/* Unten eine Zeile statt drei Ebenen: Urheberzeile links, Rechtslinks rechts. */
.jg-footer-unten {
align-items: center;
row-gap: 0.5rem;
}
@media (max-width: 781px) {
.jg-footer-unten { flex-direction: column; align-items: flex-start; }
}
.jg-footer a {
color: var(--jg-oliv-dunkel);
text-decoration: underline;
text-underline-offset: 2px;
text-decoration-thickness: 1px;
}
.jg-footer a:hover { color: var(--jg-anthrazit); }
.jg-footer .wp-block-navigation { justify-content: flex-start; }
/* Urheberzeile: bewusst zurückhaltender als die Rechtslinks darüber.
Der Link bleibt ein normaler, folgbarer Link — kein rel="nofollow". */
.jg-footer .jg-urheber { margin: 0; }
.jg-footer .jg-urheber a {
color: var(--jg-grau);
text-decoration: underline;
text-underline-offset: 2px;
letter-spacing: 0.03em;
}
.jg-footer .jg-urheber a:hover { color: var(--jg-oliv-dunkel); }
/* ---------- Bildunterschrift auf dunklem Grund ---------- */
.has-anthrazit-background-color figcaption,
.has-stahl-background-color figcaption,
.has-anthrazit-weich-background-color figcaption { color: #C9D2D4 !important; }
/* ---------- Kontaktzeile ---------- */
.jg-kontaktzeile a { color: inherit; text-decoration: none; border-bottom: 1px solid rgba(237,235,228,.35); }
.jg-kontaktzeile a:hover { border-color: var(--jg-bernstein); color: #fff; }
/* ---------- Entwurfstexte ----------
Rein organisatorische Markierung für Blöcke, deren Text noch
keine Kundenfreigabe hat. Wirkt sich NICHT auf die Darstellung aus.
Zum Prüfen im Browser die nächste Zeile einkommentieren. */
/* .jg-entwurf-text { outline: 2px dashed #D9A72C; outline-offset: -6px; } */
/* ---------- Dezentes Einblenden beim Scrollen ----------
Das CSS versteckt von sich aus NICHTS. Die Klasse jg-anim vergibt allein
assets/js/einblenden.js. Ohne JavaScript bleibt die Seite vollstaendig
lesbar, und im Editor sieht der Kunde nie unsichtbare Bloecke.
Bewegt werden nur opacity und transform - beide loesen kein Neuberechnen
des Layouts aus, es entsteht also kein Springen (CLS bleibt 0).
14 px Versatz, 520 ms, ausklingend. Weniger waere nicht wahrnehmbar,
mehr wirkt bei einem Handwerksbetrieb schnell nach Werbeagentur. */
.jg-anim {
opacity: 0;
transform: translateY(14px);
}
html.jg-anim-an .jg-anim {
transition:
opacity .52s cubic-bezier(.22, .61, .36, 1) var(--jg-anim-verzug, 0ms),
transform .52s cubic-bezier(.22, .61, .36, 1) var(--jg-anim-verzug, 0ms);
will-change: opacity, transform;
}
.jg-anim.jg-sichtbar {
opacity: 1;
transform: none;
will-change: auto;
}
@media (prefers-reduced-motion: reduce) {
.jg-anim,
html.jg-anim-an .jg-anim {
opacity: 1;
transform: none;
transition: none;
}
}
/* ---------- Mobil ---------- */
@media (max-width: 781px) {
.jg-normleiste .wp-block-column { text-align: left; }
.jg-header .wp-block-site-logo img { height: 38px; }
.jg-kopf-logo img { height: 38px; }
}
/* ============================================================
Bilder: Rahmen, Schatten, leichtes Wachsen beim Ueberfahren
Kundenwunsch vom 10.09.2026, ausdruecklich "auf allen Seiten".
============================================================
Bewegt wird der FIGURE, nicht das img. Wuerde das Bild im Rahmen wachsen,
liefe es unter dem Rahmen hervor - und der Schatten bliebe stehen.
Ausgenommen sind vier Faelle, jeder aus einem Grund:
- Logos im Kopf und Fuss: Ein Kasten um ein Logo hat der Kunde zweimal
abgelehnt.
- Das fremde Logo der BUSINESS HELDEN: darf laut Anschreiben nicht
veraendert werden, und ein Rahmen ist eine Veraenderung.
- Karten und Karussellkarten: Die bewegen sich schon selbst. Zwei
Bewegungen uebereinander wirken zappelig.
- Titelbild-Folien: Das sind Cover-Bloecke, keine Bildbloecke - sie werden
von diesen Regeln ohnehin nicht getroffen. */
.entry-content .wp-block-image:not(.jg-fremdlogo),
.wp-block-post-content .wp-block-image:not(.jg-fremdlogo) {
border-radius: 2px;
overflow: hidden;
border: 1px solid var(--jg-linie);
box-shadow: 0 2px 10px rgba(30, 28, 25, 0.08);
transition: transform .3s ease, box-shadow .3s ease;
will-change: transform;
}
/* Die Ausnahmen: Rahmen und Schatten wieder weg. */
.jg-kopf-logo,
.jg-fuss-logo,
.jg-fremdlogo,
.jg-karte .wp-block-image,
.jg-karussell-karte .wp-block-image,
.entry-content .jg-fremdlogo,
.wp-block-post-content .jg-fremdlogo {
border: 0 !important;
box-shadow: none !important;
transform: none !important;
overflow: visible;
}
.entry-content .wp-block-image:not(.jg-fremdlogo):hover,
.wp-block-post-content .wp-block-image:not(.jg-fremdlogo):hover {
transform: translateY(-2px) scale(1.012);
box-shadow: 0 10px 28px rgba(30, 28, 25, 0.16);
}
/* Galeriebilder liegen im Raster; dort haelt die Kachel den Ausschnitt und
die Bildunterschrift liegt darueber. Deshalb bewegt sich hier die Kachel. */
.wp-block-gallery.has-nested-images figure.wp-block-image {
border: 1px solid var(--jg-linie);
box-shadow: 0 2px 10px rgba(30, 28, 25, 0.08);
transition: transform .3s ease, box-shadow .3s ease;
}
.wp-block-gallery.has-nested-images figure.wp-block-image:hover {
transform: translateY(-2px) scale(1.012);
box-shadow: 0 10px 28px rgba(30, 28, 25, 0.16);
z-index: 2;
}
/* Der Hinweis unter den Schnittzeichnungen. Er gehoert zur Zeichnung, nicht
zum Abschnitt - deshalb schmal und direkt darunter. */
.jg-skizzenhinweis {
max-width: 42ch;
margin-left: auto;
margin-right: auto;
}
@media (prefers-reduced-motion: reduce) {
.entry-content .wp-block-image,
.wp-block-post-content .wp-block-image,
.wp-block-gallery.has-nested-images figure.wp-block-image {
transition: none;
}
.entry-content .wp-block-image:hover,
.wp-block-post-content .wp-block-image:hover,
.wp-block-gallery.has-nested-images figure.wp-block-image:hover {
transform: none;
}
}
/* ============================================================
Dezente Musterung im Hintergrund (nur am Bildschirm)
Kundenwunsch vom 10.09.2026.
============================================================
Zwei sehr flache Ebenen, beide aus CSS-Verlaeufen - keine Bilddatei, kein
zusaetzlicher Ladevorgang:
1. ein feines Raster aus Punkten (24 px), Deckkraft rund 3 Prozent
2. ein sehr weicher Lichtschein oben links
Bewusst so schwach, dass man es erst sieht, wenn man darauf achtet. Eine
Musterung, die auffaellt, macht Text schwerer lesbar - und Text ist hier
die Hauptsache. Deshalb liegt sie auch nur auf dem Seitenhintergrund und
nie unter einem farbigen Abschnitt.
Ab 782 px aufwaerts. Auf dem Telefon bringt sie nichts und kostet nur
Rechenzeit beim Scrollen. */
@media (min-width: 782px) {
body {
/* Auf dem Hintergrund des Body, nicht in einem Pseudo-Element: Ein
Pseudo-Element muesste ueber der Seite liegen und braeuchte dann an
jeder Stelle eine Stapel-Korrektur, damit der Inhalt darueber bleibt.
Ein Hintergrundbild liegt von sich aus unter allem Inhalt und ueber
der Hintergrundfarbe - genau da, wo es hingehoert. */
background-image:
radial-gradient(circle at 1px 1px, rgba(30, 28, 25, 0.055) 1px, transparent 0),
radial-gradient(ellipse 900px 520px at 12% 0%, rgba(107, 142, 35, 0.06), transparent 70%);
background-size: 24px 24px, 100% 900px;
background-repeat: repeat, no-repeat;
background-attachment: fixed, fixed;
}
}
/* ============================================================
Der hereinhüpfende Farbeimer (assets/js/eimer.js)
============================================================
Das CSS versteckt von sich aus NICHTS. Ohne das Skript gibt es weder Ebene
noch Kleckse, und das Logo steht schlicht an seinem Platz. */
.jg-eimer-ebene {
position: fixed;
inset: 0;
z-index: 300;
pointer-events: none;
}
.jg-klecks {
opacity: 0;
position: absolute;
display: block;
background: var(--jg-oliv);
/* Vier verschiedene Eckradien: So sieht es nach Farbe aus und nicht nach
einem Kreis. */
border-radius: 62% 38% 55% 45% / 48% 62% 38% 52%;
box-shadow: 0 1px 2px rgba(30, 28, 25, 0.18);
}
/* Der kleine Spritzer neben jedem Klecks. */
.jg-klecks::after {
content: "";
position: absolute;
right: -46%;
bottom: -18%;
width: 42%;
height: 42%;
background: inherit;
border-radius: 58% 42% 46% 54% / 52% 46% 54% 48%;
opacity: 0.85;
}
@media (prefers-reduced-motion: reduce) {
.jg-eimer-ebene { display: none; }
}
/* Das Logo bleibt unsichtbar, bis die Animation es übernimmt.
Die Klasse setzt der Vorspann in functions.php, noch bevor irgendetwas
gezeichnet wird — sonst steht der Eimer für einen Augenblick an seinem Platz
und springt dann nach links außen. Genau das hat der Kunde am 11.09.2026
gesehen. Ohne JavaScript wird die Klasse nie gesetzt, dann versteckt diese
Regel auch nichts. */
html.jg-eimer-start .jg-kopf-logo img { visibility: hidden; }