/* ==========================================================================
Glückkalk — Dynamik (UHRIG Solutions, 01.10.2026)
Live seit 01.10.2026 (vorher Entwurf im lokalen Spiegel). Ideen aus buconcept-ausbau.de:
1. Vorteile: Kleeblätter entfalten sich Blatt für Blatt beim Scrollen,
dahinter zeichnet sich ein großes Kleeblatt als Umriss.
2. Wandaufbau: Tafel bleibt am PC stehen, die Wand wächst mit dem
Scrollrad; Zähler, Fortschritt, aktuelle Schicht hervorgehoben.
Grundzustand ohne Skript/ohne Bewegung: alles sichtbar.
========================================================================== */
/* ---- 1. Vorteile ------------------------------------------------------- */
.uh-vorteile-abschnitt { position: relative; overflow: hidden; }
.uh-vorteile-abschnitt .uh-innen { position: relative; }
.ek-gross { /* großes Kleeblatt als Umriss, hinten */
position: absolute; right: -60px; top: -40px; width: min(46vw, 560px); height: auto;
pointer-events: none; z-index: 0; opacity: .5;
}
.ek-gross path { fill: none; stroke: #68a541; stroke-width: 1.6; stroke-opacity: .55;
stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--ek-p, 1)); }
.uh-vorteile-abschnitt h2, .uh-vorteile-raster { position: relative; z-index: 1; }
.ek-klee { width: 34px; height: 34px; flex: none; overflow: visible; margin-top: 2px; }
.ek-blatt { transform-box: view-box; transform-origin: 130px 130px;
transition: transform .55s cubic-bezier(.34,1.6,.5,1), opacity .25s ease; }
.ek-mitte { transform-box: view-box; transform-origin: 130px 130px; transition: transform .4s ease; }
html.ek-bewegt .uh-vorteil-feld .ek-blatt { transform: scale(0) rotate(-40deg); opacity: 0; }
/* --ek-i = Platz in der Zeile (js/vorteile.js, 08.10.2026): die Felder einer
Zeile erscheinen nacheinander von links nach rechts, nicht gleichzeitig. */
.uh-vorteil-feld { --ek-v: calc(var(--ek-i, 0) * .22s); }
html.ek-bewegt .uh-vorteil-feld.ek-da .ek-blatt { transform: none; opacity: 1; transition-delay: var(--ek-v); }
html.ek-bewegt .uh-vorteil-feld.ek-da .ek-blatt:nth-of-type(2) { transition-delay: calc(var(--ek-v) + .09s); }
html.ek-bewegt .uh-vorteil-feld.ek-da .ek-blatt:nth-of-type(3) { transition-delay: calc(var(--ek-v) + .18s); }
html.ek-bewegt .uh-vorteil-feld.ek-da .ek-blatt:nth-of-type(4) { transition-delay: calc(var(--ek-v) + .27s); }
html.ek-bewegt .uh-vorteil-feld > div { opacity: 0; transform: translateY(18px);
transition: opacity .5s ease .25s, transform .6s cubic-bezier(.16,.84,.32,1) .25s; }
html.ek-bewegt .uh-vorteil-feld.ek-da > div { opacity: 1; transform: none; transition-delay: calc(var(--ek-v) + .25s); }
/* Trennlinie wächst mit, wenn ein Vorteil erscheint */
.uh-vorteil-feld { position: relative; }
html.ek-bewegt .uh-vorteil-feld::after { content: ''; position: absolute; left: 0; top: -1px;
height: 2px; width: 46px; background: #68a541; transform: scaleX(0); transform-origin: left;
transition: transform .7s cubic-bezier(.16,.84,.32,1) .1s; }
html.ek-bewegt .uh-vorteil-feld.ek-da::after { transform: none; transition-delay: calc(var(--ek-v) + .1s); }
/* Darüberfahren: Kleeblatt dreht sich einmal, wie im Wind */
@media (hover: hover) {
.uh-vorteil-feld:hover .ek-mitte { transform: rotate(90deg); transition-duration: .8s; }
.uh-vorteil-feld:hover strong { color: #8fd162; }
}
/* ---- 2. Wandaufbau ----------------------------------------------------- */
.ek-zaehler { display: flex; align-items: center; gap: 14px; margin: 14px 0 0;
font-size: 14px; color: #b9c2b4; }
.ek-zaehler b { color: #fff; font-weight: 700; }
.ek-zaehler .ek-name { color: #f5c400; font-weight: 600; }
.ek-balken { flex: 1; height: 3px; background: rgba(255,255,255,.1); position: relative; overflow: hidden; }
.ek-balken i { position: absolute; inset: 0; transform: scaleX(var(--ek-a, 1)); transform-origin: left;
background: linear-gradient(90deg, #68a541, #f5c400); transition: transform .35s ease; }
.uh-lage-zeile { transition: background .35s ease, box-shadow .35s ease, opacity .4s ease, transform .4s ease; }
.uh-lage-zeile.ek-jetzt { background: rgba(245,196,0,.07); box-shadow: inset 3px 0 0 #f5c400; }
.uh-lage-zeile.ek-jetzt strong { color: #f5c400 !important; }
.uh-aufbau-zeichnung .uh-ruf.ek-jetzt text { fill: #f5c400 !important; }
/* Klebende Bühne nur am breiten, hohen Bildschirm (Handy: Wischen wie bisher) */
html.ek-klebt .uh-aufbauten { position: sticky; top: calc(var(--uh-kopf-hoehe, 90px) + 16px); z-index: 2; }
html.ek-klebt .ek-strecke { height: 170vh; } /* Scrollweg, auf dem die Wand wächst */
.ek-hinweis { display: none; margin: 10px 0 0; font-size: 13px; color: #8d9787; }
html.ek-klebt .ek-hinweis { display: block; }
html.ek-klebt .ek-hinweis.ek-weg { opacity: 0; transition: opacity .4s ease; }
@media (prefers-reduced-motion: reduce) {
html.ek-bewegt .uh-vorteil-feld .ek-blatt,
html.ek-bewegt .uh-vorteil-feld > div { transform: none; opacity: 1; transition: none; }
}
/* Die eigentliche Ursache, warum sich die Wand nie aufbaute: aufbauten.css
erzwingt `.uh-aufbau-zeichnung .uh-lage { opacity:1 !important;
transform:none !important }` (Sicherheitsnetz gegen eine alte Regel).
Das schlaegt auch das Verstecken im Aufbau — alle Schichten stehen von
Anfang an da. Hier gezielt mit hoeherer Spezifitaet aufgehoben, NUR
solange das Skript steuert (.uh-waehlbar) und die Schicht noch nicht dran
ist. Im Shop gehoert die alte Regel stattdessen entfernt. */
.uh-waehlbar .uh-aufbau-zeichnung .uh-lage {
transform-box: fill-box; transform-origin: 100% 50%;
transition: opacity .5s ease, transform .7s cubic-bezier(.16,.84,.32,1) !important;
}
.uh-waehlbar .uh-aufbau-zeichnung .uh-lage:not(.uh-da) {
opacity: 0 !important; transform: scaleX(.05) !important;
}
@media (max-width: 700px) {
.ek-zaehler { flex-wrap: wrap; gap: 6px 12px; }
.ek-balken { flex-basis: 100%; }
}
/* ==========================================================================
Handy-Feinschliff 09.10.2026 — Rückmeldung Manuel
========================================================================== */
/* ---- Schichtliste: Ziffer nicht an der gelben Kante ---------------------
Die markierte Zeile bekommt links eine 3-px-Kante (inset box-shadow); die
Ziffer stand ohne Innenabstand direkt daran. Alle Zeilen rücken gleich
ein, damit die Spalte nicht springt, wenn die Markierung wandert. */
.uh-aufbauten .uh-lage-zeile { padding-left: .9rem; padding-right: .6rem; }
.uh-aufbauten .uh-lage-zeile:first-child { padding-top: .9rem; }
@media (max-width: 991.98px) {
/* ---- Kopfzeile: Logo links, Menü rechts, alles auf einer Mittellinie --
Der Menüknopf hing oben (0–48 px), das Logo bei 0–65 px, die Symbole
mittig bei 20–64 px. Der Wrapper liegt absolut über der Leiste; er wird
zur Flex-Zeile über die ganze Breite, klickt aber nur dort, wo Logo
und Knopf sind — die Symbole darunter bleiben bedienbar. */
header.fixed-navbar .toggler-logo-wrapper {
display: flex !important;
align-items: center;
left: 1rem; right: 1rem;
pointer-events: none;
}
header.fixed-navbar .toggler-logo-wrapper > * { pointer-events: auto; }
/* Beim Scrollen setzt gestalt.css den Wrapper auf min-height 66 px, die
Leiste bleibt aber 85 px hoch — der Knopf rutschte auf 33 px statt 42.
Der Wrapper nimmt deshalb immer die volle Leistenhöhe. */
header.fixed-navbar .toggler-logo-wrapper,
header.uh-gescrollt .toggler-logo-wrapper { top: 0 !important; bottom: 0 !important; min-height: 0 !important; height: auto !important; }
header.fixed-navbar #logo { order: 1; }
header.fixed-navbar #burger-menu { order: 2; margin: 0 -10px 0 auto !important; }
header.fixed-navbar #logo .navbar-brand { margin: 0 !important; padding-left: 0 !important; }
/* Platz rechts für den Menüknopf (48 px, 10 px ragen in den Rand) */
header.fixed-navbar #shop-nav { margin-right: 38px !important; }
/* Die drei Striche waren oben dunkelgrau (#363636 aus NOVA) auf dunklem
Grund und wurden erst beim Scrollen hell. */
header.fixed-navbar #burger-menu .navbar-toggler-icon,
header.fixed-navbar #burger-menu .navbar-toggler-icon::before,
header.fixed-navbar #burger-menu .navbar-toggler-icon::after { background-color: var(--uh-kalk) !important; }
/* Knopf rechts → Menü fährt auch von rechts ein, Schließen-Kreuz rechts. */
header .navbar-collapse { left: auto !important; right: 0 !important; }
/* NICHT per translateX(100%) aus dem Bild schieben: die Kopfzeile ist
der Bezugsrahmen des festen Menüs, das verschobene Menü machte die
Seite 645 statt 375 px breit (seitlich wischbar, Artikelseite
09.10.2026). Zugeklappt wird es stattdessen weggeschnitten. */
header .navbar-collapse {
clip-path: inset(0 0 0 0);
transition: clip-path .25s ease-in-out !important;
}
header .navbar-collapse:not(.show) {
transform: none !important;
clip-path: inset(0 0 0 100%);
pointer-events: none;
}
header .navbar-collapse .nav-mobile-header > .row { flex-direction: row-reverse; }
header .navbar-collapse .nav-mobile-header-name { margin-left: 0 !important; margin-right: auto !important; }
header .navbar-collapse .nav-mobile-header-toggler { display: flex; justify-content: flex-end; }
}
@media (max-width: 400px) {
/* 360-px-Handys: Logo + vier Symbole + Menü passen sonst nicht nebeneinander */
header.fixed-navbar .navbar-brand img { height: 44px !important; }
header.fixed-navbar #shop-nav .nav-link { padding-inline: 0 !important; min-width: 40px; width: 40px; }
}
@media (max-width: 575.98px) {
/* ---- Auszeichnung mittig statt ganz links ----------------------------
Siegel über dem Text, beides zentriert — ein Beleg, kein Fließtext. */
a.uh-preis {
display: grid;
grid-template-columns: 1fr;
justify-items: center;
text-align: center;
padding: 1.4rem 1.2rem;
}
a.uh-preis span { max-width: 30ch; }
}
/* ---- Kopfzeile am Desktop auf derselben Bahn wie der Inhalt -------------
Rückmeldung Manuel 09.10.2026: „das Logo ist gar nicht ganz links". Die
Kopfzeile hatte eine eigene Breite (1250 px + 1 rem), die Startseite die
Bahn aus material.css (1560 px + --uh-rand). An 1920 px stand das Logo
97 px weiter innen als die Überschrift darunter. */
@media (min-width: 992px) {
header.fixed-navbar > .container-fluid {
max-width: var(--uh-bahn, 1560px) !important;
padding-inline: var(--uh-rand, clamp(1.25rem, 5vw, 5rem)) !important;
}
header.fixed-navbar .navbar-brand { margin-left: 0 !important; padding-left: 0 !important; }
}
/* Mit dem breiteren Rand fehlten zwischen 992 und 1199 px bis zu 118 px:
die Menüpunkte bekamen eine Scrollleiste. Dort schrumpft das Suchfeld
mit (NOVA gibt dem Eingabefeld min-width 260 px, daher auch das). */
@media (min-width: 992px) and (max-width: 1199.98px) {
header.fixed-navbar .nav-icons .search-wrapper {
width: clamp(140px, calc(100vw - 860px), 270px) !important;
max-width: none !important; flex: none !important;
}
header.fixed-navbar .search-wrapper .form-control { min-width: 0 !important; }
header.fixed-navbar .search-wrapper form,
header.fixed-navbar .search-wrapper .twitter-typeahead { width: 100% !important; }
}
/* ---- GHS-Gefahrensymbole: weiße Raute -----------------------------------
Rückmeldung Manuel 09.10.2026. Die Symbole stehen in der Artikel-
beschreibung aus der Wawi (
usw.) und sind
innen transparent — auf dem dunklen Grund verschwand das schwarze Zeichen.
GHS verlangt ohnehin schwarzes Symbol auf weißem Grund im roten Rahmen.
Die rote Raute füllt das Bild bis an die Kanten (viewBox 250, Ecken auf
den Seitenmitten), daher passt der Rauten-Zuschnitt exakt. Greift für
jedes GHS-Bild, egal in welchem Artikel es eingefügt wird. */
img[src*="/symbole/ghs"] {
background: #fff;
clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}
/* ---- Artikelseite Handy: Luft zwischen Foto und Überschrift --------------
Die Galerie (heller Kasten) endete exakt an der Oberkante des h1. */
@media (max-width: 991.98px) {
.product-info { margin-top: 1.75rem; }
}
/* ---- Artikelseite: Fotos etwas kleiner -----------------------------------
Rückmeldung Manuel 09.10.2026. Das Hauptfoto war am Desktop 589 px im
Quadrat, mit Vorschaubildern 780 px hoch — die Vorschau lag bei 900 px
Fensterhöhe unter dem Rand. Begrenzt wird der ganze Galerie-Block
(#image_wrapper), nicht nur das Foto: die Knöpfe Liste/Merken hängen an
diesem Block und standen sonst neben dem Bild. */
.product-gallery #image_wrapper { max-width: min(100%, 520px, 62vh); margin-inline: auto; }
@media (max-width: 991.98px) {
.product-gallery #image_wrapper { max-width: min(100%, 330px); }
}
/* ---- „Zurück zur Liste" als Knopf -----------------------------------------
Vorher: Chevron als ::before am , der Link darin hatte am Handy 10 px
Innenabstand (Tippfläche) — der Pfeil stand oben, der Text tiefer, dazu
ein „|" als Trenner. Jetzt eine Pille mit eigenem Pfeil, alles auf einer
Mittellinie. Am Handy fällt der doppelte Kategorie-Link daneben weg
(führt ans selbe Ziel). */
#breadcrumb .breadcrumb { align-items: center; }
#breadcrumb .breadcrumb-backtolist::before,
#breadcrumb .breadcrumb-backtolist::after { display: none !important; }
#breadcrumb .breadcrumb-backtolist { padding: 0 !important; margin-right: 1.1rem; align-items: center; }
#breadcrumb .breadcrumb-backtolist > a {
display: inline-flex !important; align-items: center; gap: .5rem;
min-height: 36px; padding: 0 1rem 0 .85rem !important;
border: 1px solid rgba(244,243,238,.18); border-radius: 999px;
color: var(--uh-kalk) !important; font-size: .85rem; line-height: 1;
text-decoration: none !important;
transition: border-color .2s ease, background .2s ease;
}
#breadcrumb .breadcrumb-backtolist > a::before {
content: "←"; color: var(--uh-gruen); font-size: 1rem; line-height: 1;
transition: transform .2s ease;
}
#breadcrumb .breadcrumb-backtolist > a:hover { border-color: var(--uh-gruen); background: rgba(84,184,79,.08); }
#breadcrumb .breadcrumb-backtolist > a:hover::before { transform: translateX(-3px); }
@media (max-width: 991.98px) {
#breadcrumb .breadcrumb-backtolist > a { min-height: 44px; font-size: .9rem; }
#breadcrumb .breadcrumb-arrow { display: none !important; }
}
/* Handy: unter den Punkten standen 32 + 32 + 48 px NOVA-Abstand, das Foto
klebte dafür oben am Kasten. Jetzt gleichmäßig rundum. */
@media (max-width: 991.98px) {
.product-gallery { padding-top: 16px !important; padding-bottom: 16px !important; }
.product-gallery #image_wrapper { margin-bottom: 0 !important; }
.product-gallery #gallery { margin-bottom: 0 !important; }
.product-gallery #gallery .slick-dots { margin-top: 12px !important; }
}
/* ---- Fußzeile: Rechtslinks immer sichtbar (layout/footer.tpl) ----------- */
footer .uh-rechtszeile {
display: flex; flex-wrap: wrap; align-items: center;
gap: .25rem 0; margin-bottom: .9rem;
}
footer .uh-rechtszeile a {
display: inline-flex; align-items: center; min-height: 44px;
color: var(--uh-kalk) !important; font-size: .9rem; text-decoration: none !important;
}
footer .uh-rechtszeile a:hover { color: var(--uh-gruen-hell) !important; }
footer .uh-rechtszeile a + a::before {
content: "·"; color: var(--uh-nebel); margin: 0 .75rem;
}
@media (min-width: 992px) {
footer .uh-rechtszeile a { min-height: 0; padding-block: .3rem; }
}
@media (max-width: 575.98px) {
/* Vier Links passen mit Trennpunkten nicht in eine Handyzeile; der
umgebrochene Punkt stand dann vorne. Ohne Punkte, mit Abstand. */
footer .uh-rechtszeile { gap: 0 1.5rem; }
footer .uh-rechtszeile a + a::before { content: none; }
}
/* ---- Vermerk „Konzept und Umsetzung by UHRIG Solutions" ------------------
Wie auf rwa-servicemontage.de: dezent, rechts neben dem USt.-Hinweis,
„UHRIG Solutions" fett. Am Handy darunter. */
footer .uh-fuss-unten {
display: flex; flex-wrap: wrap; justify-content: space-between;
align-items: baseline; gap: .6rem 2rem;
}
footer .uh-macher { font-size: .85rem; color: var(--uh-nebel); white-space: nowrap; }
footer .uh-macher a {
color: var(--uh-kalk) !important; font-weight: 700; text-decoration: none !important;
border-bottom: 1px solid transparent; transition: color .2s ease, border-color .2s ease;
}
footer .uh-macher a:hover { color: var(--uh-gruen-hell) !important; border-bottom-color: currentColor; }
/* Fußzeilen-Links sind in NOVA display:block mit 10 px Innenabstand —
beim Vermerk riss das eine Lücke zwischen „by" und dem Namen. */
footer .uh-macher a { display: inline !important; padding: 0 !important; margin: 0 !important; min-height: 0 !important; }
@media (max-width: 991.98px) {
/* Der Cookie-Knopf (fest unten links) lag über der letzten Zeile. */
footer .uh-fuss-unten { padding-bottom: 4.5rem; }
}
/* … und eine Fußzeilen-Regel macht zur Flex-Zeile mit 17,6 px gap. */
#footer .uh-fuss-unten .uh-macher { display: inline !important; gap: 0 !important; }
#footer .uh-fuss-unten .uh-macher a { display: inline !important; padding: 0 !important; }
/* ---- Übergang Startseite → Fußzeile (Rückmeldung Manuel 09.10.2026) ------
Unter dem letzten Abschnitt (.uh-haltung) lagen 48 px Innenabstand von
#content in der Grundfarbe — zwischen Abschnitt und Fußzeilen-Linie
ergab das „Strich, Streifen, Strich". Auf der Startseite fällt er weg;
die Fußzeile schließt direkt an. */
#content:has(.uh-haltung) { padding-bottom: 0 !important; }
/* Ganz unten: die Fußzeile endete ohne Abstand am Text, darunter schauten
16 px Seitengrund (#14180F, heller als die Fußzeile) als Balken heraus.
Fußzeile bekommt Luft, und was unter dem liegt, trägt ihre Farbe. */
footer#footer { padding-bottom: 1.75rem !important; }
html { background-color: #0E1109 !important; }
/* ---- Gründerfoto neu freigestellt (09.10.2026) ---------------------------
gruender-frei-3.webp bringt die Ausblendung unten und an den alten
Kreiskanten schon mit. Die CSS-Masken für das alte Bild blendeten
zusätzlich aus — doppelt war von den Oberkörpern fast nichts mehr übrig. */
img[src*="gruender-frei-3"] { -webkit-mask-image: none !important; mask-image: none !important; }
/* ---- Rückmeldung Manuel 10.10.2026 ---------------------------------------
1. „Kategorien" raus aus der Hauptnavigation (Desktop und Handymenü).
Die Seite /Kategorien bleibt über ihre Adresse erreichbar; der Punkt
kommt aus der Linkgruppe im Backend und wird hier nur ausgeblendet. */
header .nav-item:has(> a.nav-link[href$="/Kategorien"]),
.navbar-nav .nav-item:has(> a[href$="/Kategorien"]) { display: none !important; }
/* 2. Balken über der Fußzeile auf allen Seiten, nicht nur der Startseite:
endet der Inhalt mit einem eigenen Abschnitt, fallen die 48 px
Innenabstand von #content weg (Kategorien: heller Abschnitt, darunter
dunkler Streifen, dann erst die Fußzeilen-Linie). */
#content:has(> .uh-abschnitt:last-child) { padding-bottom: 0 !important; }
/* 3. Rechtszeile nur am Handy — am Desktop stehen Impressum, Datenschutz,
AGB und Widerrufsrecht offen in den Fußzeilen-Spalten; die doppelte
Zeile wirkte unstimmig. Am Handy klappen die Spalten zu, dort bleibt sie. */
@media (min-width: 992px) {
footer .uh-rechtszeile { display: none !important; }
}
/* 4. USt.-Fußnote nur, wo es Preise gibt (Ansage Manuel 10.10.2026: „auf der
Startseite soll es weg"). Das „*" hinter jedem Preis verweist auf diese
Zeile — auf Seiten mit Preisen (Shop, Kategorie, Artikel, Warenkorb)
bleibt sie deshalb stehen; auf Seiten ohne Preis wäre sie ein Verweis
ins Leere. Der Vermerk rückt dann allein nach rechts. */
body:not(:has(.price)) footer .uh-fuss-unten > .small { display: none !important; }
@media (min-width: 992px) {
footer .uh-fuss-unten .uh-macher { margin-left: auto; }
}