/* ==========================================================================
   Glückkalk — Material
   UHRIG Solutions, 21.09.2026

   Rückmeldung Manuel: „die Seite sieht FURCHTBAR aus … sie soll wirklich
   modern sein, geil sein."

   Beim Nachsehen stimmt das. Die Seite hatte drei Probleme, die alle
   dieselbe Wurzel haben — es gab keine gestalterische Idee, nur
   aufgeräumte Bausteine:

     1. Alles lag in einer schmalen Spalte, linksbündig, mit riesigen
        leeren Flächen rechts daneben.
     2. Jeder Abschnitt hatte dieselbe Form: Überschrift, Text, Inhalt.
        Kein Rhythmus, kein Wechsel, keine Betonung.
     3. Die Produktfotos — das einzige wirklich schöne Material, das da
        ist — waren auf briefmarkengroße Kacheln geschrumpft.

   DIE IDEE: Kalk ist Material, kein Thema. Die Seite arbeitet deshalb mit
   Materialflächen statt mit Kästen. Große Texturen laufen bis an den
   Fensterrand, harte Wechsel zwischen heller Kalkfläche und dunklem Grund
   geben den Rhythmus, und die Schrift sitzt IM Material statt daneben.

   Wo die Boldness liegt: in der Größe. Bilder sind groß, Überschriften
   sind groß, Abstände sind groß. Dafür ist alles andere still — keine
   Schatten, keine Rundungen, keine Verläufe als Dekoration.

   Lädt als letzte Datei.
   ========================================================================== */

:root {
  /* Breiter als bisher: 1250 px in einem 1900er Fenster wirkt wie eine
     Spalte in der Mitte. */
  --uh-bahn: 1560px;
  --uh-rand: clamp(1.25rem, 5vw, 5rem);
}

/* ---------- Bahn und Rhythmus ------------------------------------------- */

.uh-innen {
  max-width: var(--uh-bahn) !important;
  padding-inline: var(--uh-rand) !important;
}

/* Abschnitte atmen. Enge Abstände lassen eine dunkle Seite billig wirken. */
.uh-abschnitt { padding-block: clamp(5rem, 11vw, 11rem) !important; }

/* ---------- Typografie, die trägt --------------------------------------- */

/* Die Überschriften waren zu klein für eine dunkle Seite. Auf Schwarz
   braucht Schrift mehr Masse, sonst verschwindet sie. */
html body .uh-abschnitt h2,
html body .uh-zutaten-text h2,
html body .uh-einordnung-kopf h2 {
  font-size: clamp(2.4rem, 5.2vw, 5.2rem) !important;
  line-height: .96 !important;
  letter-spacing: -.035em !important;
  max-width: 16ch;
  margin-bottom: 1.4rem;
}
html body .uh-start-buehne h1 {
  font-size: clamp(2.8rem, 7.2vw, 7rem) !important;
  line-height: .93 !important;
  letter-spacing: -.04em !important;
  max-width: 15ch;
}
.uh-lead, .uh-vorspann {
  font-size: clamp(1.05rem, 1.35vw, 1.35rem) !important;
  line-height: 1.5 !important;
  max-width: 44ch !important;
  color: var(--uh-nebel) !important;
}

/* ---------- Bühne: Text im Material ------------------------------------- */

.uh-start-buehne {
  min-height: min(92vh, 900px) !important;
  align-items: flex-end !important;
  padding-bottom: clamp(3rem, 7vw, 6rem) !important;
}
.uh-start-buehne::before {
  background: linear-gradient(to top,
              rgba(20,24,15,.94) 0%, rgba(20,24,15,.72) 38%,
              rgba(20,24,15,.25) 70%, rgba(20,24,15,.1) 100%) !important;
}
.uh-vorspann { color: rgba(244,243,238,.88) !important; }

/* ---------- Der Shop: Produkte groß ------------------------------------- */

.uh-shop { padding-top: clamp(4rem, 8vw, 7rem) !important; }

/* Drei große Kacheln statt vier kleiner. Das Bild trägt, der Text ist
   knapp. */
.uh-produkte-platz .product-list,
.uh-produkte-platz .row.gallery {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2px;
  margin: 0 !important;
}
.uh-produkte-platz .product-wrapper,
.uh-produkte-platz [class*="col-"] {
  max-width: none !important;
  flex: none !important;
  width: auto !important;
  padding: 0 !important;
  margin: 0 !important;
}
.uh-produkte-platz .productbox {
  border: 0 !important;
  background: var(--uh-nacht-2) !important;
  height: 100%;
}
/* Das Bild bekommt die Fläche, die es verdient. */
.uh-produkte-platz .productbox .productbox-image,
.uh-produkte-platz .productbox .productbox-images {
  aspect-ratio: 5 / 6 !important;
}
.uh-produkte-platz .productbox-title,
.uh-produkte-platz .productbox-title a {
  font-size: 1.18rem !important;
  line-height: 1.25;
  font-weight: 650 !important;
}
.uh-produkte-platz .price, .uh-produkte-platz .productbox-price {
  font-size: 1.35rem !important;
}
/* Beim Überfahren hebt sich die Karte nicht, sie wird heller — eine
   Bewegung weniger auf der Seite. */
.uh-produkte-platz .productbox:hover {
  transform: none !important;
  background: var(--uh-nacht-3) !important;
}

/* ---------- Materialband: Schrift im Material --------------------------- */

/* Aus dem Zweispalter wird eine Fläche, über der die Schrift liegt. Das
   Foto läuft über die volle Breite — hier darf die Textur wirken. */
.uh-zutaten {
  display: block !important;
  position: relative;
  min-height: min(82vh, 820px);
  background-size: cover;
  background-position: 50% 50%;
  padding: 0 !important;
}
.uh-zutaten-bild {
  position: absolute !important;
  inset: 0 !important;
  min-height: 0 !important;
}
.uh-zutaten-bild::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(105deg,
              rgba(20,24,15,.92) 0%, rgba(20,24,15,.6) 46%,
              rgba(20,24,15,.05) 82%);
}
.uh-zutaten-text {
  position: relative; z-index: 2;
  max-width: var(--uh-bahn) !important;
  margin-inline: auto;
  padding: clamp(5rem, 11vw, 10rem) var(--uh-rand) !important;
  display: flex; flex-direction: column; justify-content: center;
  min-height: min(82vh, 820px);
}
.uh-zutaten-text p { color: rgba(244,243,238,.82) !important; max-width: 42ch; }

/* ---------- Vorteile: Liste statt Kästchen ------------------------------ */

/* Sechs graue Kästen mit Kleeblatt waren ein Raster ohne Aussage. Jetzt
   eine gesetzte Liste: große Schrift, feine Linien, viel Luft. Das
   Kleeblatt bleibt als Marke, aber klein. */
.uh-vorteile-abschnitt { background: var(--uh-nacht-2) !important; }
.uh-vorteile-raster {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)) !important;
  gap: 0 !important;
  background: none !important;
  border: 0 !important;
  margin-top: clamp(2.5rem, 5vw, 4rem) !important;
}
.uh-vorteil-feld {
  background: none !important;
  border-top: 1px solid rgba(255,255,255,.14);
  padding: 2rem 2.5rem 2rem 0 !important;
  gap: 1.2rem !important;
}
.uh-vorteil-feld:hover { background: none !important; }
.uh-kleeblatt {
  width: 1.5rem !important; height: 1.5rem !important;
  padding: 0 !important;
  background: none !important;
  margin-top: .35rem;
}
.uh-vorteil-feld strong {
  font-size: 1.45rem !important;
  line-height: 1.15;
  letter-spacing: -.02em !important;
  margin-bottom: .6rem !important;
}
.uh-vorteil-feld p { font-size: 1rem !important; line-height: 1.55 !important; max-width: 38ch; }

/* ---------- Die Menschen ------------------------------------------------ */

.uh-haltung .uh-zweispalt {
  grid-template-columns: 1fr 1.15fr !important;
  gap: clamp(2.5rem, 6vw, 6rem) !important;
  align-items: center;
}
/* Das Gruenderfoto bleibt in Farbe.

   Es lief erst in Graustufen und wurde beim Ueberfahren farbig — eine
   Gestaltungsidee, die hier nicht traegt: Rueckmeldung Manuel am
   22.09.2026, „schwarz weiss passt da gar nicht". Stimmt. Zwei Menschen
   in Graustufen wirken wie ein Archivbild, und bei einem Naturprodukt
   nimmt Entsaettigung genau das weg, worum es geht — die warmen Toene
   von Kalk und Sand. */
.uh-haltung figure img { filter: none; }
.uh-haltung p { font-size: 1.08rem !important; }

/* ---------- Fußzeile: ruhig ---------------------------------------------- */

footer .box, footer .box-linkgroup, footer .box-categories {
  background: none !important;
  border: 0 !important;
}

/* ---------- Schmale Fenster --------------------------------------------- */

@media (max-width: 991.98px) {
  .uh-haltung .uh-zweispalt { grid-template-columns: 1fr !important; }
  .uh-zutaten-text { min-height: 0; }
  .uh-zutaten { min-height: 0; }
  .uh-vorteil-feld { padding-right: 0 !important; }
}

/* Die Breitenkette der Kachel durchreichen.
   Beim Umbau der Reihe auf ein Raster verlor die Kachel ihre Breitenkette:
   .productbox ist flex-column, darin form > .productbox-inner > .row >
   .col — und in dieser Kette kam bei keinem Glied mehr eine Breite an. Die
   Bildflaechen standen auf 0x0, die Produktfotos waren komplett weg
   (21.09.2026 gemessen). Bootstrap-Spalten rechnen ihre Breite aus dem
   Zeilenkontext; den gibt es im Raster nicht mehr. */
.uh-produkte-platz .productbox,
.uh-produkte-platz .productbox > form,
.uh-produkte-platz .productbox .productbox-inner,
.uh-produkte-platz .productbox .productbox-inner > .row,
.uh-produkte-platz .productbox .productbox-inner > .row > .col,
.uh-produkte-platz .productbox .productbox-images,
.uh-produkte-platz .productbox .productbox-image {
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  flex: 1 1 auto;
}
.uh-produkte-platz .productbox .productbox-inner > .row { display: block !important; }
.uh-produkte-platz .productbox .productbox-image img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

/* ==========================================================================
   Bewegung und Auszeichnung
   ========================================================================== */

/* ---------- Das Siegel -------------------------------------------------- */

/* Die Auszeichnung lief als Textzeile mit und ging unter. Als Siegel mit
   Jahreszahl wird sie zu dem, was sie ist: ein Beleg. */
a.uh-preis {
  display: inline-grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 1.1rem;
  max-width: 34rem;
  margin-top: 2.2rem;
  padding: 1rem 1.4rem 1rem 1rem;
  background: rgba(20,24,15,.55);
  border: 1px solid rgba(84,184,79,.4);
  backdrop-filter: blur(6px);
  text-decoration: none !important;
  transition: border-color .3s var(--uh-kurve), background .3s var(--uh-kurve);
}
a.uh-preis:hover {
  border-color: var(--uh-gruen);
  background: rgba(20,24,15,.75);
}
a.uh-preis img { width: 82px; height: 82px; flex: none; }
a.uh-preis span {
  font-size: .9rem; line-height: 1.45;
  color: rgba(244,243,238,.78);
}
a.uh-preis strong {
  display: block;
  font-family: var(--uh-display);
  font-size: 1.05rem;
  color: var(--uh-kalk);
  letter-spacing: -.01em;
  margin-bottom: .25rem;
}

/* ---------- Material zieht mit ------------------------------------------ */

/* Die Flächen bewegen sich langsamer als die Schrift darauf — das gibt
   Tiefe, ohne dass etwas blinkt. --uh-zug setzt js/bewegung.js. */
.uh-start-buehne {
  background-position: 50% calc(50% + var(--uh-zug, 0px)) !important;
  transition: background-position .1s linear;
}
.uh-zutaten-bild {
  background-position: 50% calc(50% + var(--uh-zug, 0px)) !important;
  transition: background-position .1s linear;
}

/* ---------- Sortiment zum Aufklappen ------------------------------------ */

.uh-gruppen-abschnitt { background: var(--uh-nacht) !important; }
.uh-gruppen { margin-top: clamp(2.5rem, 5vw, 4rem); }

.uh-gruppe { border-top: 1px solid rgba(255,255,255,.14); }
.uh-gruppe:last-child { border-bottom: 1px solid rgba(255,255,255,.14); }

.uh-gruppe-kopf {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 1.5rem;
  width: 100%;
  padding: clamp(1.4rem, 2.6vw, 2.2rem) 0;
  background: none;
  border: 0;
  text-align: left;
  cursor: pointer;
  color: inherit;
}
.uh-gruppe-titel {
  font-family: var(--uh-display);
  font-size: clamp(1.35rem, 2.6vw, 2.3rem);
  line-height: 1.05;
  letter-spacing: -.025em;
  color: var(--uh-kalk);
  transition: color .3s var(--uh-kurve);
}
.uh-gruppe-kopf:hover .uh-gruppe-titel { color: var(--uh-gruen-hell); }
.uh-offen .uh-gruppe-titel { color: var(--uh-signal); }

.uh-gruppe-zahl {
  font-family: var(--uh-display);
  font-size: .85rem;
  letter-spacing: .06em;
  color: var(--uh-nebel);
  white-space: nowrap;
}

/* Das Zeichen dreht sich statt zu wechseln — eine Bewegung, die zeigt,
   was passiert. */
.uh-gruppe-zeichen {
  position: relative;
  width: 1.4rem; height: 1.4rem; flex: none;
}
.uh-gruppe-zeichen::before,
.uh-gruppe-zeichen::after {
  content: '';
  position: absolute; top: 50%; left: 0;
  width: 100%; height: 2px;
  background: var(--uh-gruen);
  transform: translateY(-50%);
  transition: transform .35s var(--uh-kurve), background .3s var(--uh-kurve);
}
.uh-gruppe-zeichen::after { transform: translateY(-50%) rotate(90deg); }
.uh-offen .uh-gruppe-zeichen::after { transform: translateY(-50%) rotate(0deg); }
.uh-offen .uh-gruppe-zeichen::before,
.uh-offen .uh-gruppe-zeichen::after { background: var(--uh-signal); }

/* Aufklappen über grid-template-rows: das laeuft weich, ohne dass eine
   feste Hoehe bekannt sein muss. */
.uh-gruppe-inhalt {
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows .45s var(--uh-kurve);
}
.uh-gruppe:not(.uh-offen) .uh-gruppe-inhalt { grid-template-rows: 0fr; }
.uh-gruppe-innen {
  overflow: hidden;
  min-height: 0;
  opacity: 1;
  transition: opacity .35s var(--uh-kurve);
}
.uh-gruppe:not(.uh-offen) .uh-gruppe-innen { opacity: 0; }
.uh-gruppe-innen > p {
  max-width: 54ch;
  margin-bottom: 1.2rem;
  color: var(--uh-nebel);
}
.uh-gruppe-innen { padding-bottom: clamp(1.5rem, 3vw, 2.4rem); }

@media (prefers-reduced-motion: reduce) {
  .uh-gruppe-inhalt, .uh-gruppe-innen, .uh-gruppe-zeichen::before,
  .uh-gruppe-zeichen::after, .uh-start-buehne, .uh-zutaten-bild {
    transition: none !important;
  }
}

@media (max-width: 575.98px) {
  .uh-gruppe-kopf { grid-template-columns: 1fr auto; gap: .8rem; }
  .uh-gruppe-zahl { grid-column: 1; grid-row: 2; }
  a.uh-preis { grid-template-columns: 1fr; text-align: left; }
  a.uh-preis img { width: 64px; height: 64px; }
}

/* ---------- Der Grund ist Material, nicht Farbe -------------------------
   Rueckmeldung Manuel: „der Hintergrund nicht einfach nur eine Farbe das
   wars, sondern ggfs was … vielleicht ein leicht abblassendes Produkt im
   Hintergrund."

   Genau das: ein stark weichgezeichnetes, entsaettigtes und abgedunkeltes
   Makro des eigenen Sumpfkalks liegt hinter den dunklen Abschnitten. Es
   ist so schwach, dass man es nicht als Bild liest — es nimmt der Flaeche
   nur das Tote. 8 KB.

   Bewusst KEIN generiertes Bild: das eigene Produkt ist das ehrlichere
   Material und kostet keine Lizenzfrage. */
.uh-gruppen-abschnitt, .uh-shop, .uh-vorteile-abschnitt, .uh-haltung {
  position: relative;
  isolation: isolate;
}
.uh-gruppen-abschnitt::before, .uh-shop::before,
.uh-vorteile-abschnitt::before, .uh-haltung::before {
  content: '';
  position: absolute; inset: 0; z-index: -1;
  background-image: url('../bilder/grund.webp');
  background-size: 160% auto;
  background-position: 50% var(--uh-grundzug, 50%);
  /* Erster Versuch lief mit opacity .5 und mix-blend-mode: screen — das
     hellte die Flaechen so stark auf, dass die Abschnitte schmutzig
     graugruen wurden statt dunkel (21.09.2026 im Foto gesehen). Ein
     Materialgrund soll man nicht sehen, sondern nur merken.

     Die Textur ist seit 21.09.2026 abends KI-generiert (Kalkputz mit
     Kellenspuren im Streiflicht, flux2-klein) statt ein weichgezeichnetes
     Produktfoto — sie hat mehr Struktur und traegt die Flaeche besser.
     Das Original liegt als Beleg in inhalte/bilder/ki-kalkputz-textur.png.
     Sie zeigt bewusst KEIN Produkt, sondern ist reine Oberflaeche; ueber
     die Ware sagt sie damit nichts aus. */
  opacity: .16;
  pointer-events: none;
}
/* Jeder Abschnitt nimmt den Grund von einer anderen Stelle — so
   wiederholt sich das Muster nicht sichtbar. */
.uh-vorteile-abschnitt::before { background-position: 20% 30%; opacity: .13; }
.uh-haltung::before { background-position: 80% 70%; opacity: .11; }
.uh-shop::before { background-position: 50% 15%; opacity: .14; }

/* Ein feiner Lichtverlauf von oben gibt den Flaechen eine Richtung —
   ohne ihn wirkt auch ein Materialgrund flach. */
.uh-gruppen-abschnitt::after, .uh-shop::after,
.uh-vorteile-abschnitt::after, .uh-haltung::after {
  content: '';
  position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(120% 70% at 50% 0%,
              rgba(84,184,79,.045) 0%, rgba(84,184,79,0) 58%);
  pointer-events: none;
}

/* ==========================================================================
   Der Wandaufbau — das aufbauende Element
   ==========================================================================
   Langer Scrollweg, in dem die Buehne stehen bleibt. Aus dem Fortschritt
   werden fuenf Stufen; jede schaltet eine Lage im Schnitt frei und blendet
   die passende Karte ein.

   GRUNDZUSTAND IST SICHTBAR: Lagen und Karten stehen ohne JavaScript alle
   da. Erst wenn das Skript uebernimmt, setzt es .uh-gesteuert auf den
   Abschnitt — und ab da gilt das Verstecken. Faellt das Skript aus, ist
   der Abschnitt lang, aber vollstaendig.
   ========================================================================== */

.uh-aufbau-weg {
  background: var(--uh-nacht-2);
  position: relative;
  isolation: isolate;
}
.uh-aufbau-buehne {
  display: flex;
  align-items: center;
  min-height: 100svh;
  padding-block: clamp(3rem, 6vw, 5rem);
}
.uh-aufbau-raster {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .8fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
  width: 100%;
}

/* Nur wenn das Skript uebernommen hat, wird der Weg lang und die Buehne
   klebt. */
.uh-aufbau-weg.uh-gesteuert { height: 420svh; }
.uh-aufbau-weg.uh-gesteuert .uh-aufbau-buehne {
  position: sticky; top: 0; height: 100svh;
  overflow: hidden;
}

/* ---------- Zaehler und Fortschritt ------------------------------------- */

.uh-aufbau-zaehler {
  font-family: var(--uh-display);
  font-size: .95rem;
  color: var(--uh-signal);
  letter-spacing: .04em;
  margin: 0 0 .8rem;
}
.uh-aufbau-zaehler i { font-style: normal; color: var(--uh-nebel); }

.uh-fortschritt {
  display: flex; gap: 6px;
  list-style: none; padding: 0;
  margin: 0 0 clamp(1.5rem, 3vw, 2.4rem);
}
.uh-fortschritt li {
  width: 42px; height: 3px;
  background: rgba(255,255,255,.16);
  transition: background .4s var(--uh-kurve);
}
.uh-fortschritt li.uh-voll { background: var(--uh-signal); }

/* ---------- Die Karten --------------------------------------------------- */

.uh-aufbau-wort h2 { margin-bottom: clamp(1.5rem, 3vw, 2.2rem); }

.uh-aufbau-karten { position: relative; min-height: 15rem; }
/* Ohne Skript stehen die Karten untereinander und sind alle lesbar. */
.uh-aufbau-karte { margin-bottom: 2rem; }
.uh-gesteuert .uh-aufbau-karte {
  position: absolute; inset: 0;
  margin-bottom: 0;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .5s ease, transform .5s var(--uh-kurve);
  pointer-events: none;
}
.uh-gesteuert .uh-aufbau-karte.uh-da {
  opacity: 1; transform: none; pointer-events: auto;
}
.uh-aufbau-karte h3 {
  font-family: var(--uh-display) !important;
  font-weight: 400 !important;
  font-size: clamp(1.4rem, 2.4vw, 2rem) !important;
  letter-spacing: -.025em !important;
  color: var(--uh-kalk) !important;
  margin-bottom: .7rem;
}
.uh-aufbau-karte p {
  color: var(--uh-nebel);
  max-width: 44ch;
  margin-bottom: 1.2rem;
}

/* ---------- Der Schnitt --------------------------------------------------- */

.uh-aufbau-bild { display: flex; justify-content: center; }
.uh-schnitt { width: 100%; max-width: 30rem; height: auto; }

/* Die Lagen wachsen von rechts nach links ein — so, wie der Putz
   aufgetragen wird. */
.uh-lage { transform-origin: 100% 50%; }
.uh-gesteuert .uh-lage {
  opacity: 0;
  transform: scaleX(.2);
  transition: opacity .5s ease, transform .55s var(--uh-kurve);
}
.uh-gesteuert .uh-lage.uh-da { opacity: 1; transform: none; }

/* Die aktuelle Schicht hebt sich selbst hervor.

   Der urspruengliche Plan war ein eigener Markierungsrahmen im SVG, der
   auf die aktive Lage faehrt. Er rendert aber mit Breite 0, obwohl x,
   width, opacity und stroke alle korrekt gesetzt sind (21.09.2026
   mehrfach gemessen). Statt das weiter zu verfolgen, markiert sich die
   Lage selbst — ein Element weniger, und es kann nicht auseinanderlaufen. */
.uh-gesteuert .uh-lage.uh-neu rect:first-of-type {
  stroke: var(--uh-signal);
  stroke-width: 4;
  paint-order: stroke;
}
.uh-gesteuert .uh-lage { transition: opacity .5s ease, transform .55s var(--uh-kurve); }
.uh-marke { display: none; }

@media (prefers-reduced-motion: reduce) {
  .uh-aufbau-weg.uh-gesteuert { height: auto; }
  .uh-aufbau-weg.uh-gesteuert .uh-aufbau-buehne { position: static; height: auto; }
  .uh-gesteuert .uh-aufbau-karte {
    position: static; opacity: 1; transform: none; margin-bottom: 2rem;
  }
  .uh-gesteuert .uh-lage { opacity: 1; transform: none; }
}

@media (max-width: 991.98px) {
  .uh-aufbau-raster { grid-template-columns: 1fr; gap: 2.5rem; }
  .uh-aufbau-bild { order: -1; }
  .uh-schnitt { max-width: 20rem; }
  .uh-aufbau-weg.uh-gesteuert { height: 380svh; }
}

/* Vorspann vor dem Wandaufbau: erklaert die Zeichnung, bevor sie kommt. */
.uh-aufbau-vorspann {
  background: var(--uh-nacht-2);
  padding-bottom: clamp(3rem, 6vw, 5rem) !important;
}
.uh-aufbau-vorspann .uh-lead + .uh-lead { margin-top: 1.2rem; }
.uh-aufbau-vorspann h2 { max-width: 20ch; }

/* ---------- Inhaltsseiten: Rhythmus statt Reihung -----------------------
   „Glückkalk" und „Produktion" sind sechs gleich gebaute Abschnitte
   untereinander. Abwechselnde Seiten geben ihnen einen Takt, ohne dass am
   Inhalt etwas geaendert werden muss. */

#content .opc-Container .row > [class*="col-"] img {
  width: 100%; height: auto; display: block;
}
/* Jeder zweite Abschnitt dreht die Spalten. */
#content > div > .opc-Container:nth-of-type(even) .row {
  flex-direction: row-reverse;
}
#content .opc-Container + .opc-Container { margin-top: clamp(3rem, 7vw, 6rem); }

/* Die Ueberschriften der Inhaltsseiten tragen dieselbe Stimme wie der
   Rest — vorher liefen sie in NOVA-Groesse mit. */
#content .opc-Container h1, #content .opc-Container h2 {
  font-size: clamp(1.9rem, 3.6vw, 3.2rem) !important;
  line-height: 1.02 !important;
  letter-spacing: -.03em !important;
  margin-bottom: 1rem;
}
#content .opc-Container h3 {
  font-size: clamp(1.2rem, 1.9vw, 1.6rem) !important;
  letter-spacing: -.02em !important;
}
#content .opc-Container p { max-width: 62ch; line-height: 1.65; }

/* ==========================================================================
   Antworten statt Vorführen
   ==========================================================================
   Der Vergleich mit buconcept-ausbau.de ist eindeutig: dort stehen 25
   Hover-Zustände gegen genau drei Bewegungen beim Scrollen. Die Seite
   liegt ruhig und reagiert, sobald man sie anfasst.

   Hier war es umgekehrt — Bilder zogen sich beim Scrollen auf, Flächen
   wanderten mit, Abschnitte fuhren ein. Das ist Bewegung, die niemand
   ausgelöst hat, und sie liest sich als Selbstzweck.

   Deshalb: alles, was von allein passiert, bleibt auf die Bühne und den
   Wandaufbau beschränkt. Überall sonst antwortet die Seite auf den
   Zeiger.
   ========================================================================== */

/* ---------- Bilder auf Inhaltsseiten ------------------------------------
   Ruhig in Graustufen, farbig beim Überfahren. Das lädt zum Hinsehen ein,
   ohne dass sich etwas von allein bewegt. */

/* Auch die Bilder der Inhaltsseiten bleiben farbig — aus demselben
   Grund. Als Antwort auf den Zeiger reicht der leichte Zoom; dafuer
   braucht es keine Entsaettigung. */
#content .opc-Container img {
  transition: transform .7s var(--uh-kurve), filter .5s var(--uh-kurve);
}
#content .opc-Container img:hover {
  transform: scale(1.02);
  filter: brightness(1.06);
}
/* Bühnenbilder und Symbole bleiben, wie sie sind. */
#content .uh-buehne img, #content .uh-band img,
#content img[src*="logo"], #content img[src*="icon"],
#content img[width="22"], .uh-kleeblatt {
  transform: none !important;
  filter: none !important;
}

/* ---------- Produktkacheln ---------------------------------------------- */

/* Das Bild zoomt leicht, die Kachel hebt sich nicht mehr — eine Bewegung
   pro Geste reicht. */
.productbox { transition: background .3s var(--uh-kurve), border-color .3s var(--uh-kurve); }
.productbox:hover { transform: none !important; }
.productbox .productbox-image img { transition: transform .6s var(--uh-kurve); }
.productbox:hover .productbox-image img { transform: scale(1.06); }
/* Der Name wechselt auf die Markenfarbe — so weiß man, dass die Kachel
   ein Link ist. */
.productbox:hover .productbox-title,
.productbox:hover .productbox-title a { color: var(--uh-gruen-hell) !important; }

/* ---------- Marken und Knöpfe -------------------------------------------- */

/* Die Füllung fährt von unten ein, statt dass die Farbe umspringt. */
.uh-schicht-produkte a, .uh-dazu-marken a, .uh-schrittleiste-marken a {
  position: relative;
  overflow: hidden;
  z-index: 0;
}
.uh-schicht-produkte a::before, .uh-dazu-marken a::before,
.uh-schrittleiste-marken a::before {
  content: '';
  position: absolute; inset: 0; z-index: -1;
  background: var(--uh-signal);
  transform: translateY(101%);
  transition: transform .35s var(--uh-kurve);
}
.uh-schicht-produkte a:hover::before, .uh-dazu-marken a:hover::before,
.uh-schrittleiste-marken a:hover::before { transform: translateY(0); }
.uh-schicht-produkte a:hover, .uh-dazu-marken a:hover,
.uh-schrittleiste-marken a:hover {
  color: var(--uh-nacht) !important;
  background: transparent !important;
  transform: none !important;
}

/* ---------- Die Bühne beim Laden ----------------------------------------
   Der einzige Moment, der von allein läuft: einmal beim Aufruf, gestaffelt,
   danach nie wieder. */

@keyframes uh-einfahren {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}
.uh-start-buehne h1 { animation: uh-einfahren .9s var(--uh-kurve) both; }
.uh-start-buehne .uh-vorspann { animation: uh-einfahren .8s var(--uh-kurve) .18s both; }
.uh-start-buehne .uh-knoepfe { animation: uh-einfahren .8s var(--uh-kurve) .3s both; }
.uh-start-buehne .uh-preis { animation: uh-einfahren .8s var(--uh-kurve) .42s both; }

/* ---------- Was nicht mehr von allein läuft ------------------------------ */

/* Die Materialflächen bleiben stehen. Das Mitziehen beim Scrollen war
   genau die Art Bewegung, die niemand ausgelöst hat. */
.uh-start-buehne, .uh-zutaten-bild {
  background-position: 50% 50% !important;
  transition: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .uh-start-buehne h1, .uh-start-buehne .uh-vorspann,
  .uh-start-buehne .uh-knoepfe, .uh-start-buehne .uh-preis {
    animation: none !important;
  }
  #content .opc-Container img, .productbox .productbox-image img {
    transition: none !important;
  }
}

/* ---------- Beschriftungen am Wandschnitt --------------------------------
   Jede Schicht bekommt eine Fuehrungslinie mit Namen. Ohne sie sind die
   farbigen Streifen nicht zu deuten — die Zeichnung illustriert dann nur,
   statt zu erklaeren.

   Grundzustand sichtbar: erst .uh-gesteuert blendet sie aus und das
   Skript wieder ein. */

.uh-ruf path, .uh-ruf circle {
  fill: none;
  stroke: var(--uh-gruen);
  stroke-width: 1.6;
}
.uh-ruf circle { fill: var(--uh-gruen); stroke: none; }
.uh-ruf text {
  font-family: var(--uh-text);
  font-size: 15px;
  font-weight: 650;
  fill: var(--uh-kalk);
}
.uh-ruf .uh-ruf-klein {
  font-size: 12.5px;
  font-weight: 400;
  fill: var(--uh-nebel);
}
/* Die Beschriftung der letzten Schicht steht links und wird deshalb
   rechtsbuendig gesetzt. */
.uh-ruf-links text { text-anchor: end; }

.uh-gesteuert .uh-ruf {
  opacity: 0;
  transition: opacity .5s ease;
}
.uh-gesteuert .uh-ruf.uh-da { opacity: 1; }

/* Der Schnitt braucht jetzt mehr Platz, weil die Beschriftungen ausserhalb
   der Wand liegen. */
.uh-schnitt { max-width: 34rem; }

@media (max-width: 991.98px) {
  .uh-schnitt { max-width: 26rem; }
  .uh-ruf text { font-size: 17px; }
  .uh-ruf .uh-ruf-klein { font-size: 14px; }
}

/* ---------- Die Kategorien des Shops ------------------------------------
   Sechs Kacheln: Foto, Name, ein Satz. Die siebte Kategorie (Pigmente) ist
   leer und wird deshalb nicht gezeigt — eine Kachel, die auf eine leere
   Seite fuehrt, ist schlimmer als keine.

   Bewusst grosszuegig: das ist der Hauptweg ins Sortiment. */

.uh-kategorien-abschnitt { background: var(--uh-nacht-2) !important; }

.uh-kat-raster {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: 1px;
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.1);
  margin-top: clamp(2rem, 4vw, 3rem);
}
.uh-kat {
  display: flex; flex-direction: column;
  background: var(--uh-nacht-2);
  text-decoration: none !important;
  transition: background .3s var(--uh-kurve);
}
.uh-kat:hover { background: var(--uh-nacht-3); }

.uh-kat-bild {
  display: block;
  aspect-ratio: 4 / 3;
  background-size: cover;
  background-position: 50% 50%;
  background-color: var(--uh-kalk);
  transition: transform .6s var(--uh-kurve);
}
.uh-kat:hover .uh-kat-bild { transform: scale(1.04); }
/* Der Ausschnitt braucht eine Kante, sonst laeuft das helle Foto aus. */
.uh-kat-bild { overflow: hidden; }

.uh-kat-wort {
  display: flex; flex-direction: column; flex: 1;
  padding: 1.3rem 1.4rem 1.5rem;
}
.uh-kat-wort strong {
  font-family: var(--uh-display);
  font-size: 1.32rem;
  font-weight: 400;
  letter-spacing: -.02em;
  color: var(--uh-kalk);
  margin-bottom: .45rem;
  transition: color .3s var(--uh-kurve);
}
.uh-kat:hover .uh-kat-wort strong { color: var(--uh-gruen-hell); }
.uh-kat-wort span {
  font-size: .93rem;
  line-height: 1.55;
  color: var(--uh-nebel);
}

@media (prefers-reduced-motion: reduce) {
  .uh-kat, .uh-kat-bild, .uh-kat-wort strong { transition: none !important; }
  .uh-kat:hover .uh-kat-bild { transform: none; }
}

/* Neun Kategorien (seit 08.10.2026) gehen in drei Spalten glatt auf (3x3).
   Mit auto-fit stand am Ende eine Kachel allein in der letzten Reihe. */
@media (min-width: 992px) {
  .uh-kat-raster { grid-template-columns: repeat(3, 1fr) !important; }
}
@media (min-width: 1500px) {
  .uh-kat-raster { grid-template-columns: repeat(3, 1fr) !important; }
}

/* ==========================================================================
   Bild und Text als Paar — 23.09.2026
   ==========================================================================
   Rückmeldung Manuel: Beim Vorspann „Eine Kalkwand ist ein Aufbau" fehlt ein
   Bild, „nur der Text sieht sehr leer aus"; bei „Sand und Sumpfkalk" soll
   der Text nach rechts.

   Daraus wird ein Takt über die drei Abschnitte hinweg:

     Vorspann      Bild links   | Text rechts
     Wandaufbau    Text links   | Zeichnung rechts
     Zutaten       Bild links   | Text rechts

   Also links, rechts, links. Ein Wechsel, der den Blick führt, statt drei
   gleich gebaute Blöcke untereinander.

   EIN Muster für beide Paare statt zwei ähnlicher — sonst laufen sie beim
   nächsten Umbau auseinander.                                            */

/* KORREKTUR 23.09.2026 — Rückmeldung Manuel: „das Foto links bitte deutlich
   mehr in die gleiche Flucht bringen, wie die Homepage von oben nach unten
   aufgebaut ist … das Foto ist einfach reinkopiert, das sieht nicht gut aus."

   Gemessen bei 1600 px Fenster: JEDER andere Abschnitt beginnt bei x=100 —
   Bühne, Shop, Wandaufbau. Meine Paare fielen aus der Reihe: Bild bei x=0
   (bis an den Bildschirmrand), Überschrift bei 864 bzw. 917. Als einzige
   Elemente der Seite gehorchten sie keiner Kante, und ein Foto, das am
   Glas klebt, während alles andere eine Bahn einhält, wirkt eingeklebt.

   Jetzt läuft das Paar in derselben Bahn wie alle übrigen Abschnitte:
   `--uh-bahn` breit, mit `--uh-rand` Innenabstand. Damit beginnt das Bild
   genau dort, wo darüber und darunter die Überschriften beginnen.        */

.uh-paar {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: stretch;
  gap: clamp(1.8rem, 3.5vw, 3.5rem);
  min-height: 0 !important;
  background: none !important;
  background-image: none !important;

  /* dieselbe Bahn wie .uh-innen */
  max-width: var(--uh-bahn) !important;
  margin-inline: auto !important;
  padding-inline: var(--uh-rand) !important;
  padding-block: clamp(3.5rem, 8vw, 8rem) !important;
}

.uh-paar-bild {
  position: relative !important;
  inset: auto !important;
  min-height: clamp(340px, 40vw, 620px);
  background-size: cover;
  background-position: 50% 50%;
}
/* Eine schmale Kante zur Textseite hin, damit das Foto nicht hart an der
   Schrift abbricht. Kein Verlauf über das halbe Bild — das Foto soll Foto
   bleiben. */
/* Kein Verlauf mehr an der rechten Bildkante: Das Bild grenzt jetzt an eine
   Lücke, nicht mehr direkt an die Schrift. Ein Verlauf ins Nichts sieht aus
   wie ein Fehler. Stattdessen eine feine Umrandung, damit das Foto als
   gesetztes Element lesbar ist und nicht als Loch im Hintergrund. */
.uh-paar-bild {
  border: 1px solid rgba(255,255,255,.1);
  border-radius: var(--uh-rund);
}

/* Der Text sitzt jetzt in seiner Spalte, nicht in einem eigenen Kasten —
   den Abstand zum Bild macht die Lücke des Rasters. */
.uh-paar-wort {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 !important;
  max-width: none !important;
  position: relative;
  z-index: 2;
}
html body .uh-paar-wort h2 {
  font-size: clamp(1.9rem, 3.4vw, 3.2rem) !important;
  line-height: 1.02 !important;
  max-width: 18ch;
  margin-bottom: 1.2rem;
}
.uh-paar-wort p { max-width: 46ch; }
.uh-paar-wort .uh-lead + .uh-lead { margin-top: 1rem; }

/* Die Bildunterschrift sagt, was zu sehen ist — ohne sie ist die Salzach
   nur ein hübscher Fluss. */
.uh-paar-bildtext {
  margin-top: 1.4rem !important;
  padding-top: 1rem;
  border-top: 1px solid rgba(255,255,255,.12);
  font-size: .88rem;
  color: var(--uh-nebel) !important;
}

/* Schmale Fenster: Bild oben, Text darunter. Nebeneinander bleibt bei
   390 px von beidem nichts übrig. */
@media (max-width: 767.98px) {
  .uh-paar { grid-template-columns: 1fr; }
  .uh-paar-bild { min-height: 240px; }

}

/* ---------- Die Zeichnung größer ----------------------------------------
   Rückmeldung Manuel: „das Mauerwerk, also dieses Bild was sich aufbaut,
   mal noch größer machen, ist irgendwie so klein, sieht verloren aus auf
   der großen Seite."

   Sie stand bei 34 rem in einer Spalte, die schmaler war als die
   Textspalte (0,8fr gegen 1fr). Beides umgedreht: Die Zeichnung ist der
   Grund, warum es den Abschnitt gibt — sie bekommt jetzt mehr Platz als
   der Text daneben.                                                      */

@media (min-width: 992px) {
  .uh-aufbau-raster {
    grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr) !important;
  }
}
.uh-schnitt { max-width: 46rem; }

/* Das Bild im Abschnitt „Sand und Sumpfkalk" ist seit dem 02.10.2026 ein
   ausgeblendetes Hintergrundmotiv mit echter Transparenz an den Kanten.
   Deshalb hier KEIN Rahmen und KEIN zweiter Verlauf: Beides würde die
   weiche Kante wieder zu einem Rechteck machen. `contain` statt `cover`,
   damit der Verlauf nicht angeschnitten wird. */
.uh-zutaten .uh-paar-bild {
  border: 0 !important;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: 50% 50%;
}

/* /Kategorien — eigene Seite mit demselben Raster wie die Startseite
   (08.10.2026). Der Knopf darunter führt ins ganze Sortiment. */
.uh-kategorien-weiter { margin-top: clamp(1.8rem, 3vw, 2.6rem); text-align: center; }

/* „Sand und Sumpfkalk" kompakter — Manuel 08.10.2026: „oben und unten
   weniger Platz, das zieht die Seite so groß." Gemessen bei 1440x900: der
   Text trug noch die Mindesthöhe min(82vh, 820px) = 738 px aus der Zeit als
   Vollbild-Abschnitt, dazu 114 px Innenabstand und 157 px Abstand des
   Wandaufbau-Abschnitts darüber. */
.uh-zutaten.uh-paar { padding-block: clamp(1.5rem, 3vw, 3rem) !important; }
.uh-zutaten .uh-paar-wort { min-height: 0 !important; }
.uh-zutaten .uh-paar-bild { min-height: clamp(220px, 26vw, 400px); }
.uh-aufbauten-abschnitt { padding-bottom: clamp(1.5rem, 3vw, 3rem) !important; }


/* ==========================================================================
   Feinschliff 09.10.2026 — Rückmeldung Manuel
   ==========================================================================
   „/produktion … so große Abstände und teilweise komisch zentriert",
   „der Button zum Shop unter den Kategorien sieht sehr lost aus",
   „weichere Übergänge von Bereich zu Bereich … das ist einfach wie so ein
   Cut".
   ========================================================================== */

/* ---------- 1. Abschlussleiste unter den Kategorien ---------------------
   Setzt das Raster nach unten fort: gleiche Kante, gleiche Breite, eine
   Spur heller. Links worum es geht, rechts der Knopf. */
.uh-shop-leiste {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.25rem 2rem; flex-wrap: wrap;
  margin-top: -1px;
  padding: clamp(1.25rem, 2.4vw, 1.9rem) clamp(1.25rem, 2.6vw, 2.25rem);
  background: var(--uh-nacht-3);
  border: 1px solid rgba(255,255,255,.1);
  border-top-color: transparent;
  box-shadow: inset 0 2px 0 var(--uh-gruen);
  text-decoration: none !important;
  color: var(--uh-kalk) !important;
  transition: background .3s var(--uh-kurve);
}
.uh-shop-leiste:hover { background: #2E352B; }
.uh-shop-leiste-text { display: flex; flex-direction: column; gap: .2rem; }
.uh-shop-leiste-text strong {
  font-family: var(--uh-display);
  font-size: clamp(1.25rem, 2vw, 1.6rem);
  letter-spacing: -.02em; line-height: 1.1;
}
.uh-shop-leiste-text span { color: var(--uh-nebel); }
.uh-shop-leiste .btn { margin: 0; white-space: nowrap; }
.uh-shop-leiste .btn > span {
  display: inline-block; margin-left: .35rem;
  transition: transform .3s var(--uh-kurve);
}
.uh-shop-leiste:hover .btn > span { transform: translateX(4px); }
@media (max-width: 575.98px) {
  .uh-shop-leiste .btn { width: 100%; }
}

/* ---------- 2. Weiche Übergänge zwischen den Abschnitten -----------------
   Die Abschnitte der Startseite wechseln zwischen zwei Grundtönen
   (nacht / nacht-2) und tragen teils eine Putztextur mit grünem Licht von
   oben. Beides begann bisher mit einer harten Kante. Jetzt läuft der
   Grundton des vorigen Abschnitts über ~16 rem in den neuen über, und die
   Textur blendet oben und unten aus statt abzubrechen.

   Reihenfolge: Bühne (nacht) → Kategorien (nacht-2) → Vorteile (nacht-2,
   Textur) → Wandaufbau (nacht) → Sand & Sumpfkalk (nacht) → Haltung
   (nacht-2, Textur) → Fuß. */
.uh-kategorien-abschnitt {
  background: linear-gradient(to bottom, var(--uh-nacht) 0, var(--uh-nacht-2) 16rem) !important;
}
.uh-aufbauten-abschnitt {
  background: linear-gradient(to bottom, var(--uh-nacht-2) 0, var(--uh-nacht) 16rem) !important;
}
.uh-haltung {
  background: linear-gradient(to bottom, var(--uh-nacht) 0, var(--uh-nacht-2) 16rem) !important;
}
.uh-vorteile-abschnitt::before, .uh-vorteile-abschnitt::after,
.uh-haltung::before, .uh-haltung::after {
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 14rem, #000 calc(100% - 10rem), transparent 100%);
          mask-image: linear-gradient(to bottom, transparent 0, #000 14rem, #000 calc(100% - 10rem), transparent 100%);
}

/* Die Luft zwischen zwei Abschnitten addierte sich auf ~330 px
   (unten 150 + oben 176) — eine leere Fläche, die selbst wie ein Schnitt
   wirkt. Oben bleibt Luft vor der Überschrift, unten deutlich weniger. */
body .uh-abschnitt {
  padding-top: clamp(4rem, 8vw, 8rem) !important;
  padding-bottom: clamp(3rem, 5vw, 5rem) !important;
}

/* ---------- 3. Inhaltsseiten /produktion und /glueckkalk -----------------
   Beide sind im OnPage Composer gleich gebaut: Einleitung + großes Foto,
   dann abwechselnd zwei Textspalten und Bildgruppen. Die Abstände kamen
   aus drei Quellen übereinander (OPC-Inline-Abstände 25/100 px,
   Mindesthöhen 150/300 px, Bühnen-Effekt 112 px), deshalb wirkte jede
   Lücke anders. Jetzt ein Takt: zwischen Themen --uh-takt, zwischen einem
   Text und seinen Bildern die Hälfte. */
#content:has(> .opc-Container) { --uh-takt: clamp(3.5rem, 7vw, 6rem); }
#content > .opc-Container {
  min-height: 0 !important;
  margin-bottom: 0 !important;
}
body #content > .opc-Container + .opc-Container { margin-top: var(--uh-takt) !important; }
body #content > .opc-Container:not(:has(img)) + .opc-Container:has(img) {
  margin-top: calc(var(--uh-takt) / 2) !important;
}

/* „Erster OPC-Block" = :not(.opc-Container ~ .opc-Container), NICHT
   :first-of-type — davor steht noch das div mit der h1.
   Kopf: Überschrift, Einleitung, Foto als ein Block. Die Einleitung stand
   in einer halben Spalte neben einer leeren — sie bekommt die volle
   Breite (Lesebreite begrenzt), das Foto ein ruhiges Breitformat. */
#content > .index-heading-wrapper h1 { margin-bottom: 1.25rem !important; }
#content > .opc-Container:not(.opc-Container ~ .opc-Container) .row > [class*="col-"]:first-child {
  flex: 0 0 100%; max-width: 100%;
}
#content > .opc-Container:not(.opc-Container ~ .opc-Container) p {
  font-size: clamp(1.1rem, 1.35vw, 1.3rem) !important;
  line-height: 1.6; max-width: 58ch;
  color: var(--uh-kalk) !important;
}
#content > .opc-Container:not(.opc-Container ~ .opc-Container) picture img {
  aspect-ratio: 21 / 9; object-fit: cover;
  margin-top: clamp(1.75rem, 3vw, 2.5rem);
}

/* Textspalten: heller und größer — 16 px Graugrün auf Nacht war die
   kleinste und blasseste Schrift der ganzen Seite. Eine grüne Kante oben
   macht aus zwei losen Absätzen zwei Spalten. */
#content > .opc-Container ~ .opc-Container p {
  font-size: 1.06rem; line-height: 1.7;
  color: #C6CBBF !important;
}
#content > .opc-Container:not(:has(img)) .row > [class*="col-"] {
  border-top: 2px solid var(--uh-gruen);
  padding-top: 1.4rem;
}
#content > .opc-Container:not(:has(img)) .row { row-gap: 2rem; }
#content > .opc-Container:not(:has(img)) .row > [class*="col-"]:first-child { padding-right: clamp(1rem, 3vw, 3rem); }

/* Bildgruppen: gleich hohe Felder, damit die Raster sauber fluchten. */
#content > .opc-Container ~ .opc-Container:has(img) picture img {
  aspect-ratio: 3 / 2; object-fit: cover;
}

/* Textblock neben einem Bild (z. B. Gebindegrößen): mittig zum Bild statt
   oben angeschlagen. */
#content > .opc-Container:has(img):has(h1, h2, h3) .row { align-items: center; }

/* „Eimer 10 bis 25 kg / Fässer 120 bis 250 kg" — zwei Kennzahlen, die
   bisher wie Fließtext liefen. Jetzt als Kacheln nebeneinander. */
#content .opc-Container p:has(> strong:first-child + br) {
  display: inline-flex; flex-direction: column;
  min-width: 11rem; margin: .5rem .75rem .75rem 0;
  padding: 1rem 1.25rem;
  background: var(--uh-nacht-2);
  border: 1px solid rgba(255,255,255,.1);
  border-left: 2px solid var(--uh-gruen);
  /* Normale Textschrift, halbfett: auf /glueckkalk stehen in derselben
     Form ganze Sätze („Warum Glückkalk?") — in der Titelschrift zu schwer. */
  font-weight: 600;
  font-size: 1.12rem !important;
  line-height: 1.4 !important;
  color: var(--uh-kalk) !important;
}
#content .opc-Container p:has(> strong:first-child + br) > strong {
  font-family: var(--uh-text);
  font-size: .72rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--uh-gruen-hell); margin-bottom: .35rem;
}
#content .opc-Container p:has(> strong:first-child + br) > br { display: none; }
#content .opc-Container p:empty { display: none; }
#content .opc-Container .opc-Button .btn { margin-bottom: 0 !important; margin-top: 1rem; }

@media (max-width: 767.98px) {
  #content > .opc-Container:not(.opc-Container ~ .opc-Container) picture img { aspect-ratio: 4 / 3; }
  #content > .opc-Container:not(:has(img)) .row > [class*="col-"]:first-child { padding-right: 15px; }
}