/* ==========================================================================
   Glückkalk — Redesign, UHRIG Solutions, 18.09.2026
   Liegt im Child-Template und wird NACH den NOVA-Stylesheets geladen.
   Deshalb reicht normale Spezifität; !important nur dort, wo NOVA selbst
   mit !important arbeitet.
   ========================================================================== */

:root {
  /* Marke bleibt: das Gelb ist gesetzt und steht im Logo-Umfeld. */
  --uh-signal:      #F8BF00;
  --uh-signal-warm: #E5A600;
  /* Kontrastflächen: fast schwarz mit einem Hauch Grün — Kalk/Natur, nicht Tech-Blau. */
  --uh-tief:        #14160F;
  --uh-tief-2:      #1E211A;
  /* Kalkweiß statt reinem Weiß, damit Produktfotos nicht ausbleichen. */
  --uh-kalk:        #F4F1EA;
  --uh-sand:        #E7E1D5;
  --uh-tinte:       #26281F;
  --uh-grau:        #6E7266;
  --uh-gruen:       #3F9B45;       /* aus dem Kleeblatt, sparsam */
  --uh-rund:        14px;
  --uh-kurve:       cubic-bezier(.22,.61,.36,1);
}

/* ---------- 1. Grundton ------------------------------------------------- */

body {
  background: var(--uh-kalk);
  color: var(--uh-tinte);
}

/* Überschriften deutlich größer und enger — das trägt den „modern"-Eindruck
   mehr als jede Farbe. */
h1, .h1 { font-size: clamp(2.2rem, 4.6vw, 4.1rem) !important; line-height: 1.02 !important;
          letter-spacing: -.025em !important; font-weight: 800 !important; }
h2, .h2 { font-size: clamp(1.7rem, 2.9vw, 2.7rem) !important; line-height: 1.08 !important;
          letter-spacing: -.02em !important; font-weight: 800 !important; }
h3, .h3 { font-size: clamp(1.15rem, 1.5vw, 1.45rem) !important; letter-spacing: -.01em !important;
          font-weight: 700 !important; }

/* ---------- 2. Kopfzeile ------------------------------------------------ */

header {
  position: sticky; top: 0; z-index: 1030;
  background: rgba(244,241,234,.92);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid rgba(38,40,31,.08);
  transition: background .3s var(--uh-kurve), box-shadow .3s var(--uh-kurve);
}
header.uh-gescrollt {
  background: rgba(20,22,15,.94);
  box-shadow: 0 10px 40px rgba(0,0,0,.28);
}
header.uh-gescrollt a:not(.btn),
header.uh-gescrollt .nav-link,
header.uh-gescrollt .navbar-toggler { color: var(--uh-kalk) !important; }
header.uh-gescrollt .nav-link:hover  { color: var(--uh-signal) !important; }
/* Logo im dunklen Zustand sichtbar halten */
header.uh-gescrollt .navbar-brand img { filter: brightness(0) invert(1); }

/* Menüpunkte: Unterstrich wächst aus der Mitte statt harter Farbwechsel */
header .nav-link { position: relative; font-weight: 600; }
header .nav-link::after {
  content: ''; position: absolute; left: 50%; right: 50%; bottom: 2px; height: 2px;
  background: var(--uh-signal); transition: left .28s var(--uh-kurve), right .28s var(--uh-kurve);
}
header .nav-link:hover::after { left: .6rem; right: .6rem; }

/* Suchfeld weich — „die viereckige Suchleiste sieht sehr alt aus" */
.search-wrapper .form-control,
header input[type="search"], header input[type="text"].form-control {
  border-radius: 999px !important;
  border: 1px solid rgba(38,40,31,.14) !important;
  padding-left: 1.1rem !important;
  background: rgba(255,255,255,.75);
  transition: box-shadow .25s var(--uh-kurve), border-color .25s var(--uh-kurve);
}
.search-wrapper .form-control:focus {
  border-color: var(--uh-signal) !important;
  box-shadow: 0 0 0 4px rgba(248,191,0,.22) !important;
}
.search-wrapper .btn {
  border-radius: 999px !important;
  background: var(--uh-tief) !important; border-color: var(--uh-tief) !important;
  color: #fff !important;
  width: 46px; height: 46px; padding: 0 !important;
  display: inline-flex; align-items: center; justify-content: center;
  margin-left: .4rem;
}
.search-wrapper .btn:hover { background: var(--uh-signal) !important;
                             border-color: var(--uh-signal) !important;
                             color: var(--uh-tinte) !important; }
.search-wrapper .btn i, .search-wrapper .btn .fas { font-size: 1rem; line-height: 1; }

/* Kopf-Icons.

   ACHTUNG, am 21.09.2026 gefunden: hier stand font-weight:300, um die
   gefuellten Solid-Glyphen auf Linienstaerke zu bringen. Font Awesome FREE
   liefert den Schnitt 300 (Light) aber nicht — nur Pro tut das. Folge: der
   Glyph faellt komplett aus, und der Suchknopf war ein leerer schwarzer
   Kreis. Genau so im Foto gesehen.

   Die Schnitte, die Free mitbringt, sind 400 (Regular, .far) und 900
   (Solid, .fas). Wo eine leichtere Anmutung gewuenscht ist, gehoert das
   Icon auf .far umgestellt — nicht das Gewicht verbogen. */
header .nav-icons .fas, header .nav-item .fas { font-size: 1.15rem; }

/* Warenkorbbetrag im Kopf: zeigt kein großer Händler (Zalando, Otto, AboutYou
   alle nicht). Fest per CSS über die stabile NOVA-Klasse — der Versuch, das
   per JS nur bei 0,00 zu tun, greift zu früh: das Warenkorb-Dropdown wird
   nachgeladen (18.09.2026 gemessen). */
.cart-icon-dropdown-price, .uh-betrag-leer { display: none !important; }

/* ---------- 2b. WOW.js stilllegen --------------------------------------- */

/* NOVA bringt WOW.js mit: es setzt jedem .wow-Element visibility:hidden und
   nimmt das zurueck, sobald es das Element im Sichtfeld waehnt. Am 21.09.2026
   gemessen: nach vollstaendigem Durchscrollen der Startseite blieben ZWEI
   Band-Ueberschriften ("Räume schaffen…", "Naturkalk für ein besonderes
   Raumklima.") auf hidden stehen — fuer Besucher schlicht unsichtbar, waehrend
   ihr Platz leer mitlief.

   Zwei konkurrierende Einblendesysteme auf einer Seite sind die Ursache. Das
   Redesign bringt mit .uh-reveal eine eigene Einblendung mit, die an
   prefers-reduced-motion haengt und ohne JavaScript nichts versteckt. WOW
   wird deshalb stillgelegt statt nachgebessert. */
.wow {
  visibility: visible !important;
  animation-name: none !important;
}

/* ---------- 3. Bühne und Bildbänder ------------------------------------- */

/* Bühne und Bänder sind OPC-Flächen mit CSS-Hintergrundbild. Gemeinsam ist
   ihnen: der Inhalt lief bisher über die VOLLE Fensterbreite und klebte
   dadurch mit 20 px am linken Rand, während der restliche Shop bei 1250 px
   zentriert steht. Am 21.09.2026 gemessen: H1 bei x=20, Produktbereich bei
   x=88. Genau dieser Versatz ließ die Seite unfertig wirken. */

.uh-buehne, .uh-band {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  padding-block: clamp(3.5rem, 8vw, 7rem);
  /* Seitliches Padding gehoert hier auf den INHALT, nicht auf die Flaeche:
     der container-fluid bringt 20 px mit, wodurch margin:auto in einem um
     40 px schmaleren Raum rechnet und der Inhalt 10 px zu weit rechts landet
     (21.09.2026 gemessen: 114 statt 104). */
  padding-inline: 0 !important;
}

/* Der Inhalt bekommt die Shop-Container-Breite und die gleiche Flucht wie
   alles darunter. Die OPC-Elemente hängen als einzelnes div darin. */
.uh-buehne > *, .uh-band > * {
  width: 100%;
  /* Exakt die Flucht des Shop-Containers: NOVA setzt hier 1250 px mit 16 px
     Innenabstand, der Inhalt beginnt also bei 104 px. Am 21.09.2026 einmal
     mit 3,5vw Innenabstand gebaut — dann stand die Überschrift bei 142 statt
     104 und der Versatz fiel sofort auf. */
  max-width: 1250px;
  margin-inline: auto;
  padding-inline: 1rem;
}

/* Bühne: sichtbare Höhe, aber nicht das ganze Fenster — eine Seite, die beim
   Aufruf nur ein Bild zeigt, versteckt ihr Sortiment. Ein Stück der
   Produktreihe soll unten schon anreißen. */
.uh-buehne { min-height: min(78vh, 780px); }
.uh-band   { min-height: min(56vh, 560px); }

/* Verlauf über das Bild, damit Schrift immer trägt. Der OPC legt mit
   .dark-overlay bereits einen flächigen Schleier — deshalb hier bewusst ein
   gerichteter Verlauf von links, der nach rechts auf null läuft, statt einer
   zweiten flächigen Abdunklung. */
.uh-buehne::before, .uh-band::before {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(100deg,
              rgba(20,22,15,.78) 0%, rgba(20,22,15,.52) 42%,
              rgba(20,22,15,.12) 74%, rgba(20,22,15,0) 100%);
}
.uh-buehne > *, .uh-band > * { position: relative; z-index: 2; }

/* Schrift in der Bühne: die Überschrift trug bisher allein, der Beitext lag
   bei 13 px darunter und war praktisch unsichtbar. */
.uh-buehne h1, .uh-buehne h2, .uh-band h1, .uh-band h2, .uh-band h3 {
  color: #fff !important;
  max-width: 19ch;
  text-shadow: 0 2px 30px rgba(0,0,0,.28);
}
.uh-buehne p, .uh-band p {
  color: rgba(255,255,255,.93) !important;
  font-size: clamp(1.02rem, 1.25vw, 1.28rem) !important;
  line-height: 1.55;
  max-width: 46ch;
  margin-top: 1.1rem;
}
.uh-buehne .btn, .uh-band .btn { margin-top: 1.6rem; }

/* Die OPC-Inhalte tragen ein hartes padding-right:50px im style-Attribut.
   Das stammt aus der alten Vollbreiten-Anordnung und staucht den Text jetzt
   unnötig — im eingerückten Container wird es nicht mehr gebraucht. */
.uh-buehne [style*="padding-right"], .uh-band [style*="padding-right"] {
  padding-right: 0 !important;
}

/* sanftes Mitziehen des Hintergrundbildes beim Scrollen (JS setzt --uh-parallax) */
.uh-buehne { background-position: 50% calc(50% + var(--uh-parallax, 0px)) !important; }

/* ---------- 4. Schaltflächen -------------------------------------------- */

.btn { border-radius: 999px !important; font-weight: 700 !important;
       letter-spacing: .01em; transition: transform .2s var(--uh-kurve),
       box-shadow .25s var(--uh-kurve), background-color .2s; }
.btn-primary {
  background: var(--uh-signal) !important; border-color: var(--uh-signal) !important;
  color: var(--uh-tinte) !important; padding: .72rem 1.5rem !important;
  box-shadow: 0 8px 24px rgba(248,191,0,.32);
}
.btn-primary:hover {
  background: var(--uh-signal-warm) !important; border-color: var(--uh-signal-warm) !important;
  transform: translateY(-2px); box-shadow: 0 14px 34px rgba(248,191,0,.42);
}
.btn-secondary { background: var(--uh-tief) !important; border-color: var(--uh-tief) !important; }
.btn-secondary:hover { transform: translateY(-2px); }

/* ---------- 5. Produktkacheln ------------------------------------------- */

/* Die Kachel wird eine echte Karte: klare Flaeche, Bild im Quadrat oben,
   darunter Name und Preis. Vorher lag alles frei auf dem Seitengrund, die
   Kacheln waren unterschiedlich hoch UND versetzt — zusammen las sich das
   nicht als Rhythmus, sondern als Layoutfehler (21.09.2026 im Foto gesehen).
   Gleich hohe Karten tragen den Versatz, ungleich hohe nicht. */

.productbox {
  height: 100%;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid rgba(38,40,31,.08);
  border-radius: var(--uh-rund);
  overflow: hidden;
  transition: transform .35s var(--uh-kurve), box-shadow .35s var(--uh-kurve),
              border-color .35s var(--uh-kurve);
}
.productbox:hover {
  transform: translateY(-6px);
  border-color: rgba(248,191,0,.5);
  box-shadow: 0 22px 50px rgba(20,22,15,.12);
}
/* Gleiche Hoehe fuer alle Karten einer Reihe. Ohne das stand die erste Karte
   523 px hoch neben einer mit 430 px (21.09.2026 gemessen) — mit Versatz
   darueber sah die Reihe zerfallen aus. */
.product-list, .gallery { align-items: stretch !important; }
.product-list > .product-wrapper, .gallery > .product-wrapper { display: flex; }
.product-list .productbox, .gallery .productbox { width: 100%; }
/* Die Kachel ist innen mehrfach verschachtelt (form > .productbox-inner >
   .row > zwei Spalten). Damit die Karte unten buendig schliesst, muss die
   Hoehe durch alle Ebenen durchgereicht werden. */
.productbox > form.form-basket { display: flex; flex-direction: column; flex: 1; }
.productbox .productbox-inner > .row { flex: 1; margin: 0; }

/* Das Bild sitzt randlos oben, der Innenabstand gehoert an den Textteil. */
.productbox .productbox-inner { padding: 0 !important; }
.productbox .productbox-inner > .row > .col:first-child { padding: 0; }
.productbox .productbox-inner > .row > .col:last-child {
  display: flex; flex-direction: column;
  padding: 1.05rem 1.1rem 1.2rem;
}

/* Bild: fester quadratischer Ausschnitt. NOVA positioniert das Kachelbild
   absolut und zentriert es mit translate(-50%,-50%) — ohne position:relative
   am Rahmen bezieht es sich auf einen anderen Vorfahren, und ohne das
   Zuruecksetzen der Verschiebung rutscht es aus dem Bild (18.09.2026). */
.productbox .productbox-images,
.productbox .productbox-image {
  position: relative;
  aspect-ratio: 1 / 1;
  background: #FBF9F5;
  overflow: hidden;
  border-radius: 0;
}
.productbox .productbox-image img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transform: none;
  transition: transform .5s var(--uh-kurve), filter .5s var(--uh-kurve);
}
/* Die Produktfotos sind fast weiss: gemessen am 18.09.2026 liegt der gesamte
   Helligkeitsumfang zwischen 187 und 225 von 255. Ein Hauch mehr Kontrast
   holt die Putzstruktur zurueck, ersetzt aber keine besseren Fotos. */
.productbox .productbox-image img { filter: contrast(1.09) saturate(1.04); }
.productbox:hover .productbox-image img {
  transform: scale(1.06);
  filter: contrast(1.13) saturate(1.06);
}

/* Textteil: Name zuerst, Preis als ruhiger Abschluss. Vorher war es
   umgekehrt — der Preis schrie, der Name stand klein und grau darueber. */
.productbox .productbox-inner {
  display: flex; flex-direction: column; flex: 1;
  background: none;
}
.productbox-title, .productbox-title a {
  text-decoration: none !important;
  font-size: 1.02rem !important;
  font-weight: 650 !important;
  line-height: 1.32;
  color: var(--uh-tinte) !important;
  letter-spacing: -.005em;
}
.productbox:hover .productbox-title a { color: #000 !important; }
.productbox .productbox-price, .productbox .price_wrapper {
  margin-top: auto;
  padding-top: .7rem;
}
.productbox-price {
  font-weight: 750 !important;
  font-size: 1.12rem !important;
  color: var(--uh-tinte) !important;
  letter-spacing: -.01em;
}
.productbox .price-note, .productbox .productbox-price small { color: var(--uh-grau); }

/* Lagerhinweis als weiche Plakette statt eckigem gruenem Balken */
.ribbon, .productbox-ribbon .ribbon {
  border-radius: 999px !important;
  font-size: .68rem !important; font-weight: 700 !important;
  letter-spacing: .06em; text-transform: uppercase;
  padding: .3rem .7rem !important;
  box-shadow: 0 6px 16px rgba(20,22,15,.14);
}
.ribbon-8 { background: var(--uh-gruen) !important; }
.ribbon::before { display: none !important; }

/* Rhythmus statt Gleichtakt — traegt jetzt, weil die Karten gleich hoch sind. */
@media (min-width: 992px) {
  .uh-raster-versetzt > *:nth-child(even) { transform: translateY(2.6rem); }
}

/* Die Zeile ueber der Reihe war ein 15-px-Absatz und trug den Abschnitt
   nicht. Als Abschnittsueberschrift gelesen ordnet sie die Seite. */
.container.opc-Container > div > p:first-child {
  font-size: clamp(1.5rem, 2.4vw, 2.1rem);
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.12;
  color: var(--uh-tinte);
  margin-bottom: 1.8rem;
  max-width: 24ch;
}

/* ---------- 5b. Der Artikel-Slider ("Ähnliche Artikel") ----------------- */

/* Der Slider unter der Artikelseite benutzt ein ANDERES Markup als die
   Produktkacheln: .product-wrapper mit .item-slider-* statt .productbox
   (21.09.2026 gemessen — .productbox kommt auf der Artikelseite gar nicht
   vor). Deshalb blieb er beim ersten Wurf als einzige Stelle im alten Look
   stehen: unterstrichene Titel, Bilder ohne Flaeche, ungleiche Hoehen. */

.slick-slider-other .product-wrapper { display: flex; padding: 0 .55rem; }
.slick-slider-other .product-wrapper > a {
  display: flex; flex-direction: column; width: 100%;
  background: #fff;
  border: 1px solid rgba(38,40,31,.08);
  border-radius: var(--uh-rund);
  overflow: hidden;
  text-decoration: none !important;
  transition: transform .35s var(--uh-kurve), box-shadow .35s var(--uh-kurve),
              border-color .35s var(--uh-kurve);
}
.slick-slider-other .product-wrapper > a:hover {
  transform: translateY(-5px);
  border-color: rgba(248,191,0,.5);
  box-shadow: 0 18px 40px rgba(20,22,15,.11);
}
.slick-slider-other .item-slider.productbox-image {
  aspect-ratio: 1 / 1; height: auto !important;
  background: #FBF9F5; overflow: hidden;
}
.slick-slider-other .item-slider .inner {
  width: 100%; height: 100%;
  background-size: cover !important; background-position: center !important;
  transition: transform .5s var(--uh-kurve);
}
.slick-slider-other .product-wrapper > a:hover .item-slider .inner { transform: scale(1.06); }
.slick-slider-other .item-slider-desc {
  padding: .9rem .9rem .2rem;
  font-size: .95rem !important; font-weight: 650;
  line-height: 1.32; color: var(--uh-tinte) !important;
  text-decoration: none !important; text-align: left;
}
.slick-slider-other .item-slider-price {
  margin-top: auto;
  padding: 0 .9rem 1rem;
  text-align: left;
}
/* Nur der Preis selbst ist kraeftig. Setzt man die Groesse auf den ganzen
   .price_wrapper, erben Grundpreis und der Hinweis "Weitere Variationen
   erhaeltlich" die Auszeichnung mit — dann steht ein dreizeiliger Fettblock
   in der Kachel (21.09.2026 im Foto gesehen). */
.slick-slider-other .item-slider-price .price {
  font-size: 1.05rem !important; font-weight: 750 !important;
  color: var(--uh-tinte) !important; text-decoration: none !important;
}
.slick-slider-other .item-slider-price .price_wrapper { text-decoration: none !important; }
.slick-slider-other .item-slider-price .price_wrapper > *:not(.price),
.slick-slider-other .item-slider-price .price-note,
.slick-slider-other .item-slider-price small {
  font-size: .8rem !important; font-weight: 400 !important;
  color: var(--uh-grau) !important; line-height: 1.4;
}
/* Die Karten einer Slider-Zeile gleich hoch ziehen. */
.slick-slider-other .slick-track { display: flex !important; align-items: stretch; }
.slick-slider-other .slick-slide { height: auto !important; }
.slick-slider-other .slick-slide > div { height: 100%; }

/* ---------- 7. Vorteilsblock -------------------------------------------- */

/* Sechs Vorteile standen als nackte Textspalten auf weißem Grund — richtig,
   aber ohne Halt fürs Auge. Der OPC baut je Vorteil eine Spalte, darin eine
   Zeile aus Icon-Spalte und Textspalte. Die innere Zeile wird die Karte
   (nicht die Spalte selbst — sonst gibt es keine Lücke dazwischen). */

.uh-vorteil { display: flex; margin-bottom: 1.5rem; }
.uh-vorteil > .row {
  flex: 1;
  margin: 0;
  align-items: flex-start;
  background: #fff;
  border: 1px solid rgba(38,40,31,.08);
  border-radius: var(--uh-rund);
  padding: 1.5rem 1.4rem;
  transition: transform .3s var(--uh-kurve), box-shadow .3s var(--uh-kurve),
              border-color .3s var(--uh-kurve);
}
.uh-vorteil > .row:hover {
  transform: translateY(-4px);
  border-color: rgba(248,191,0,.55);
  box-shadow: 0 18px 44px rgba(20,22,15,.09);
}

/* Die Überschrift des Vorteils steckt als <strong> im selben Absatz wie der
   Fließtext. Als Block gesetzt trennt sie sauber, ohne das OPC-Markup
   anzufassen. */
.uh-vorteil p strong {
  display: block;
  font-size: 1.06rem;
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--uh-tinte);
  margin-bottom: .4rem;
}
.uh-vorteil p {
  font-size: .95rem;
  line-height: 1.6;
  color: var(--uh-grau);
  margin-bottom: 0;
}

/* Das Plus-Zeichen kam mit 37×20 px in einem 20-%-Kasten an und wirkte wie
   ein Versehen. Es bekommt eine eigene, runde Fläche in Markenfarbe. */
.uh-vorteil .icon-plus {
  width: 2.6rem; height: 2.6rem;
  margin: 0 !important;
  display: flex; align-items: center; justify-content: center;
  background: rgba(248,191,0,.16);
  border-radius: 50%;
  flex: none;
}
.uh-vorteil .icon-plus img {
  width: 1.1rem !important; height: auto !important;
  padding: 0 !important;
}

/* ---------- 7b. Der hervorgehobene Kasten ------------------------------- */

/* „Kalkprodukte für Wände die atmen" stand in einer Karte mit gelber
   Umrandung — der Baukasten-Look, den der Auftrag ablösen soll. Statt
   Rahmen: eine warme Fläche, die den Abschnitt trägt. */
.card.border-primary {
  border: 0 !important;
  background: linear-gradient(160deg, #FBF7EC 0%, #F3EEDF 100%) !important;
  border-radius: 22px !important;
  box-shadow: none !important;
  overflow: hidden;
}
.card.border-primary .card-body { padding-block: clamp(2rem, 4vw, 3.25rem); }
/* Das Produktfoto darin trägt den Abschnitt mit — es darf größer sein und
   bekommt Schattenwurf, damit der fast weiße Eimer überhaupt Kante zeigt. */
.card.border-primary img {
  filter: drop-shadow(0 26px 34px rgba(20,22,15,.16)) contrast(1.06);
  transition: transform .5s var(--uh-kurve);
}
.card.border-primary:hover img { transform: translateY(-6px) scale(1.02); }

/* ---------- 8. Fußzeile ------------------------------------------------- */

footer, .footer {
  background: var(--uh-tief) !important;
  color: rgba(244,241,234,.72) !important;
  margin-top: 0;
}
footer a, .footer a { color: rgba(244,241,234,.72) !important; text-decoration: none; }
footer a:hover, .footer a:hover { color: var(--uh-signal) !important; }
footer h3, footer h4, footer .h4, footer strong {
  color: #fff !important; font-size: .78rem !important; letter-spacing: .13em;
  text-transform: uppercase; font-weight: 700 !important;
}

/* ---------- 9. Artikelseite --------------------------------------------- */

.product-detail .productbox-image, .product-images, .carousel-main {
  border-radius: var(--uh-rund); overflow: hidden; background: var(--uh-sand);
}
/* Kaufbereich bleibt beim Scrollen im Blick */
@media (min-width: 992px) {
  .uh-kaufbox { position: sticky; top: 92px; }
}
/* Nur der Preis der ARTIKELSEITE wird gross. Ohne die Einschraenkung auf den
   Artikelbereich schlug diese Regel bis in die Produktkacheln durch: auf der
   Produktuebersicht standen 38-px-Preise ueber 16-px-Produktnamen
   (21.09.2026 im Foto gesehen). Der Preis darf in der Kachel nicht lauter
   sein als der Name des Produkts. */
.product-detail .price, .product-detail .product-price,
.product-detail .price_wrapper .price,
.uh-kaufbox .price, .uh-kaufbox .product-price {
  font-size: clamp(1.8rem, 2.4vw, 2.4rem) !important;
  font-weight: 800 !important; letter-spacing: -.02em;
}
/* In der Kachel bleibt der Preis ruhig — gesetzt gegen die NOVA-Groesse. */
.productbox .price, .productbox .price_wrapper .price, .productbox .productbox-price {
  font-size: 1.12rem !important;
  font-weight: 750 !important;
  letter-spacing: -.01em;
}
/* Eigenschaften-Aufzählungen als Chips: liest sich schneller als Punktlisten */
.uh-chips { list-style: none !important; padding-left: 0 !important;
            display: flex; flex-wrap: wrap; gap: .5rem; }
.uh-chips li {
  background: #fff; border: 1px solid rgba(38,40,31,.1); border-radius: 999px;
  padding: .38rem .85rem; font-size: .88rem; font-weight: 600;
}

/* ---------- 10. Bewegung ------------------------------------------------ */

/* Grundzustand für alles, was beim Scrollen einfährt. Ohne JavaScript bleibt
   alles sichtbar — die Klasse wird erst vom Skript gesetzt. */
.uh-reveal { opacity: 0; transform: translateY(26px); }
.uh-reveal.uh-da {
  opacity: 1; transform: none;
  transition: opacity .7s var(--uh-kurve), transform .7s var(--uh-kurve);
}
.uh-reveal-1 { transition-delay: .07s } .uh-reveal-2 { transition-delay: .14s }
.uh-reveal-3 { transition-delay: .21s } .uh-reveal-4 { transition-delay: .28s }

@media (prefers-reduced-motion: reduce) {
  .uh-reveal, .uh-reveal.uh-da { opacity: 1 !important; transform: none !important;
                                 transition: none !important; }
  .uh-buehne > img, .uh-buehne .opc-Image img { transform: none !important; }
  .productbox:hover .productbox-image img { transform: none !important; }
  * { scroll-behavior: auto !important; }
}