/* ==========================================================================
   Glückkalk — neue Startseite, UHRIG Solutions, 21.09.2026

   Gehört zu layout/index.tpl im Child. Die Abschnitte stehen dort als
   eigenes Markup, also braucht hier nichts gegen NOVA anzukämpfen —
   kein !important außer dort, wo NOVA .btn mit !important setzt.

   Grundfarben und Kurven kommen aus redesign.css (:root).
   ========================================================================== */

/* ---------- gemeinsame Bausteine ---------------------------------------- */

.uh-innen {
  width: 100%;
  max-width: 1250px;
  margin-inline: auto;
  padding-inline: 1rem;
}

.uh-abschnitt { padding-block: clamp(3.5rem, 7vw, 6.5rem); }

/* Der Abschnittskopf: kleine Zeile, große Überschrift, ein Satz Erklärung.
   Immer dieselbe Reihenfolge — das trägt die Seite über alle Abschnitte. */
.uh-augenmerk {
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--uh-signal-warm);
  margin-bottom: .7rem;
}
.uh-abschnitt h2 {
  font-size: clamp(1.9rem, 3.4vw, 3.1rem);
  line-height: 1.04;
  letter-spacing: -.025em;
  margin-bottom: .9rem;
  max-width: 22ch;
}
.uh-lead {
  font-size: clamp(1rem, 1.2vw, 1.15rem);
  line-height: 1.6;
  color: var(--uh-grau);
  max-width: 58ch;
  margin-bottom: clamp(2rem, 3.5vw, 3rem);
}

.uh-versteckt {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

/* ---------- 1. Bühne ---------------------------------------------------- */

.uh-start-buehne {
  position: relative;
  display: flex;
  align-items: center;
  min-height: min(84vh, 820px);
  background-size: cover;
  background-position: 50% 50%;
  padding-block: clamp(4rem, 8vw, 7rem);
  overflow: hidden;
}
/* Gerichteter Verlauf von links: die Schrift steht links, das Bild soll
   rechts offen bleiben. Eine flächige Abdunklung würde das Foto töten. */
.uh-start-buehne::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(100deg,
              rgba(20,22,15,.86) 0%, rgba(20,22,15,.62) 40%,
              rgba(20,22,15,.18) 72%, rgba(20,22,15,0) 100%);
}
.uh-start-buehne .uh-innen { position: relative; z-index: 2; }

.uh-marke {
  font-size: .8rem; font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--uh-signal);
  margin-bottom: 1.1rem;
}
.uh-start-buehne h1 {
  font-size: clamp(2.3rem, 5vw, 4.4rem) !important;
  line-height: 1.02 !important;
  letter-spacing: -.03em !important;
  color: #fff !important;
  margin-bottom: 1.2rem;
  text-shadow: 0 2px 34px rgba(0,0,0,.3);
}
.uh-vorspann {
  font-size: clamp(1.02rem, 1.3vw, 1.3rem);
  line-height: 1.55;
  color: rgba(255,255,255,.93);
  max-width: 48ch;
  margin-bottom: 1.9rem;
}
.uh-knoepfe { display: flex; flex-wrap: wrap; gap: .8rem; margin-bottom: 2.2rem; }
/* Der zweite Knopf ist bewusst nur eine Kontur: eine Bühne mit zwei gleich
   lauten Knöpfen zwingt zu einer Entscheidung, die niemand treffen will. */
.uh-btn-hell {
  background: transparent !important;
  border: 1.5px solid rgba(255,255,255,.55) !important;
  color: #fff !important;
}
.uh-btn-hell:hover {
  background: rgba(255,255,255,.12) !important;
  border-color: #fff !important;
  color: #fff !important;
}
/* Die Auszeichnung ist ein Verkaufsargument, kein Kleingedrucktes — sie stand
   erst als zweizeiliger 12-px-Umbruch unter der Trennlinie (21.09.2026 im
   Foto gesehen). Jetzt als Plakette, die auf einer Zeile bleibt. */
.uh-auszeichnung {
  display: inline-flex; align-items: center; gap: .55rem;
  font-size: .86rem; font-weight: 600;
  color: rgba(255,255,255,.92);
  background: rgba(20,22,15,.42);
  border: 1px solid rgba(248,191,0,.45);
  border-radius: 999px;
  padding: .5rem 1.1rem;
  margin: 0;
  backdrop-filter: blur(3px);
}
.uh-auszeichnung::before {
  content: '';
  width: .55rem; height: .55rem; flex: none;
  background: var(--uh-signal);
  border-radius: 50%;
}
@media (max-width: 575.98px) {
  .uh-auszeichnung { font-size: .78rem; padding: .45rem .85rem; }
}

/* ---------- 2. Vorhaben ------------------------------------------------- */

.uh-vorhaben-raster {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
}
.uh-vorhaben {
  display: flex; flex-direction: column;
  background: #fff;
  border: 1px solid rgba(38,40,31,.08);
  border-radius: 18px;
  overflow: hidden;
  text-decoration: none !important;
  color: inherit;
  transition: transform .35s var(--uh-kurve), box-shadow .35s var(--uh-kurve),
              border-color .35s var(--uh-kurve);
}
.uh-vorhaben:hover {
  transform: translateY(-6px);
  border-color: rgba(248,191,0,.55);
  box-shadow: 0 24px 54px rgba(20,22,15,.13);
}
.uh-vorhaben-bild {
  display: block;
  aspect-ratio: 4 / 3;
  background-size: cover;
  background-position: 50% 50%;
  transition: transform .6s var(--uh-kurve);
}
.uh-vorhaben:hover .uh-vorhaben-bild { transform: scale(1.05); }
.uh-vorhaben-text {
  display: flex; flex-direction: column; flex: 1;
  padding: 1.15rem 1.15rem 1.3rem;
}
.uh-vorhaben-text strong {
  font-size: 1.14rem; font-weight: 700; letter-spacing: -.015em;
  color: var(--uh-tinte);
  margin-bottom: .45rem;
}
.uh-vorhaben-satz {
  font-size: .92rem; line-height: 1.55; color: var(--uh-grau);
  margin-bottom: 1rem;
}
.uh-pfeil {
  margin-top: auto;
  font-size: .85rem; font-weight: 700; letter-spacing: .02em;
  color: var(--uh-signal-warm);
}
.uh-pfeil::after {
  content: ' \2192';
  display: inline-block;
  transition: transform .3s var(--uh-kurve);
}
.uh-vorhaben:hover .uh-pfeil::after { transform: translateX(4px); }

/* ---------- 3. Wandaufbau ----------------------------------------------- */

.uh-aufbau { background: #fff; }

.uh-schichten { list-style: none; padding: 0; margin: 0; counter-reset: none; }

.uh-schicht {
  display: grid;
  grid-template-columns: 5.5rem 1fr;
  gap: 1.8rem;
  padding-block: 2rem;
  border-top: 1px solid rgba(38,40,31,.1);
  scroll-margin-top: 110px;   /* die Kopfzeile klebt */
}
.uh-schicht:last-child { border-bottom: 1px solid rgba(38,40,31,.1); }

/* Die Schrittzahl trägt den Abschnitt optisch — groß, aber zurückgenommen
   in der Farbe, damit sie den Text nicht überstimmt. */
.uh-schicht-nr {
  font-size: clamp(2.2rem, 3.6vw, 3.4rem);
  font-weight: 800;
  letter-spacing: -.04em;
  line-height: 1;
  color: var(--uh-sand);
  transition: color .35s var(--uh-kurve);
}
.uh-schicht:target .uh-schicht-nr,
.uh-schicht:hover .uh-schicht-nr { color: var(--uh-signal); }

.uh-schicht-inhalt h3 {
  font-size: clamp(1.25rem, 1.9vw, 1.7rem) !important;
  letter-spacing: -.02em !important;
  margin-bottom: .5rem;
}
.uh-schicht-inhalt p {
  color: var(--uh-grau);
  line-height: 1.6;
  max-width: 62ch;
  margin-bottom: 1.1rem;
}
/* Die Produkte einer Schicht als anfassbare Marken — kurz, überfliegbar,
   und jede führt direkt auf die Artikelseite. */
.uh-schicht-produkte { display: flex; flex-wrap: wrap; gap: .55rem; }
.uh-schicht-produkte a {
  display: inline-flex; align-items: center;
  background: var(--uh-kalk);
  border: 1px solid rgba(38,40,31,.1);
  border-radius: 999px;
  padding: .45rem 1rem;
  font-size: .89rem; font-weight: 600;
  color: var(--uh-tinte) !important;
  text-decoration: none !important;
  transition: background .25s var(--uh-kurve), border-color .25s var(--uh-kurve),
              transform .25s var(--uh-kurve);
}
.uh-schicht-produkte a:hover {
  background: var(--uh-signal);
  border-color: var(--uh-signal);
  transform: translateY(-2px);
}

/* ---------- 4. Vorher / Nachher ----------------------------------------- */

.uh-vergleich {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  line-height: 0;
  box-shadow: 0 24px 60px rgba(20,22,15,.14);
  user-select: none;
}
.uh-vergleich img { width: 100%; height: auto; display: block; }
/* Das Vorher-Bild liegt über dem Nachher-Bild und wird von rechts
   beschnitten. Die Breite steuert --uh-schnitt, gesetzt vom Regler. */
.uh-vergleich-b {
  position: absolute; inset: 0;
  width: var(--uh-schnitt, 50%);
  overflow: hidden;
}
/* Das innere Bild darf NICHT mitschrumpfen, sonst staucht es sich beim
   Ziehen. Es wird links verankert und ueber die Hoehe aufgespannt — beide
   Bilder haben dasselbe Seitenverhaeltnis (1200x657), also deckt es sich
   exakt mit dem darunterliegenden. */
.uh-vergleich-b img {
  position: absolute; top: 0; left: 0;
  height: 100%; width: auto; max-width: none;
}
.uh-vergleich-griff {
  position: absolute; top: 0; bottom: 0;
  left: var(--uh-schnitt, 50%);
  width: 2px;
  background: #fff;
  box-shadow: 0 0 0 1px rgba(20,22,15,.18);
  pointer-events: none;
}
.uh-vergleich-griff::after {
  content: '';
  position: absolute; top: 50%; left: 50%;
  width: 2.7rem; height: 2.7rem;
  transform: translate(-50%, -50%);
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 6px 20px rgba(20,22,15,.3);
}
/* Der Regler liegt unsichtbar über dem ganzen Bild: so lässt sich überall
   ziehen, und die Tastaturbedienung kommt gratis mit. */
.uh-vergleich-huelle { position: absolute; inset: 0; margin: 0; cursor: ew-resize; }
.uh-vergleich-regler {
  width: 100%; height: 100%;
  margin: 0; opacity: 0; cursor: ew-resize;
}
.uh-vergleich-marke {
  position: absolute; bottom: 1rem;
  font-size: .72rem; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase;
  color: #fff;
  background: rgba(20,22,15,.55);
  padding: .3rem .75rem;
  border-radius: 999px;
  line-height: 1.4;
  pointer-events: none;
}
.uh-vergleich-marke.uh-links  { left: 1rem; }
.uh-vergleich-marke.uh-rechts { right: 1rem; }

/* ---------- 5. Die Menschen --------------------------------------------- */

.uh-handwerk { background: var(--uh-tief); color: rgba(244,241,234,.82); }
.uh-handwerk .uh-augenmerk { color: var(--uh-signal); }
.uh-handwerk h2 { color: #fff !important; }
.uh-handwerk p { line-height: 1.65; max-width: 52ch; margin-bottom: 1rem; }
.uh-ort {
  font-size: .9rem;
  color: rgba(244,241,234,.55);
  padding-top: 1rem;
  border-top: 1px solid rgba(244,241,234,.18);
  margin-bottom: 1.6rem !important;
}
.uh-zweispalt {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.uh-handwerk figure { margin: 0; }
.uh-handwerk figure img {
  width: 100%; height: auto;
  border-radius: 18px;
  display: block;
}
.uh-handwerk figcaption {
  font-size: .82rem;
  color: rgba(244,241,234,.55);
  margin-top: .8rem;
  text-align: right;
}

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

@media (max-width: 991.98px) {
  .uh-vorhaben-raster { grid-template-columns: repeat(2, 1fr); }
  .uh-zweispalt { grid-template-columns: 1fr; }
  .uh-handwerk figure { order: -1; }
}

@media (max-width: 639.98px) {
  .uh-vorhaben-raster { grid-template-columns: 1fr; }
  .uh-start-buehne { min-height: min(78vh, 640px); }
  .uh-schicht { grid-template-columns: 1fr; gap: .6rem; }
  .uh-schicht-nr { font-size: 2rem; }
  .uh-knoepfe .btn { width: 100%; }
}

/* ---------- Bewegung zurücknehmen --------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .uh-vorhaben, .uh-vorhaben-bild, .uh-pfeil::after,
  .uh-schicht-produkte a, .uh-schicht-nr {
    transition: none !important;
    transform: none !important;
  }
}

/* ---------- 2b. Zwei Zutaten -------------------------------------------- */

/* Halb Bild, halb Aussage — ohne Container, damit das Foto bis an den
   Fensterrand läuft. Das Bild trägt hier das Argument, nicht der Text. */
.uh-zutaten {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  background: var(--uh-tief-2);
  color: rgba(244,241,234,.82);
}
.uh-zutaten-bild {
  background-size: cover;
  background-position: 50% 50%;
  min-height: clamp(320px, 42vw, 560px);
}
.uh-zutaten-text {
  display: flex; flex-direction: column; justify-content: center;
  padding: clamp(2.5rem, 5vw, 4.5rem) clamp(1.5rem, 4vw, 4rem);
  max-width: 44rem;
}
.uh-zutaten-text h2 {
  font-size: clamp(1.9rem, 3.2vw, 3rem) !important;
  line-height: 1.05 !important;
  letter-spacing: -.03em !important;
  color: #fff !important;
  margin-bottom: 1rem;
}
.uh-zutaten-text p { line-height: 1.65; max-width: 46ch; margin: 0; }
.uh-zutaten .uh-augenmerk { color: var(--uh-signal); }

@media (max-width: 767.98px) {
  .uh-zutaten { grid-template-columns: 1fr; }
  .uh-zutaten-bild { min-height: 260px; }
}

/* ==========================================================================
   Produktübersicht — Gliederung nach Arbeitsschritten
   ========================================================================== */

/* Die Sprungleiste ersetzt das Suchen im Raster. Sie klebt nicht — eine
   zweite klebende Leiste unter der Kopfzeile frisst auf dem Handy die halbe
   Sicht. */
.uh-schrittleiste {
  background: #fff;
  border: 1px solid rgba(38,40,31,.09);
  border-radius: 16px;
  padding: 1.2rem 1.3rem;
  margin-bottom: clamp(1.8rem, 3vw, 2.8rem);
}
.uh-schrittleiste-titel {
  font-size: .76rem; font-weight: 700; letter-spacing: .15em;
  text-transform: uppercase; color: var(--uh-grau);
  margin-bottom: .85rem;
}
.uh-schrittleiste-marken { display: flex; flex-wrap: wrap; gap: .5rem; }
.uh-schrittleiste-marken a {
  display: inline-flex; align-items: center; gap: .5rem;
  background: var(--uh-kalk);
  border: 1px solid rgba(38,40,31,.1);
  border-radius: 999px;
  padding: .5rem 1.05rem;
  font-size: .9rem; font-weight: 650;
  color: var(--uh-tinte) !important;
  text-decoration: none !important;
  transition: background .25s var(--uh-kurve), border-color .25s var(--uh-kurve),
              transform .25s var(--uh-kurve);
}
.uh-schrittleiste-marken a:hover {
  background: var(--uh-signal);
  border-color: var(--uh-signal);
  transform: translateY(-2px);
}
.uh-schrittleiste-nr {
  font-size: .78rem; font-weight: 800;
  color: var(--uh-grau);
  letter-spacing: -.02em;
}
.uh-schrittleiste-marken a:hover .uh-schrittleiste-nr { color: rgba(20,22,15,.65); }

/* Ein Abschnitt je Arbeitsschritt. Die Trennlinie oben ordnet die Seite,
   ohne dass jeder Abschnitt einen Kasten braucht. */
.uh-listenabschnitt {
  padding-top: clamp(1.8rem, 3vw, 2.6rem);
  margin-bottom: clamp(1.5rem, 3vw, 2.4rem);
  border-top: 1px solid rgba(38,40,31,.1);
  scroll-margin-top: 100px;
}
.uh-listenabschnitt:first-of-type { border-top: 0; padding-top: 0; }

.uh-listenkopf {
  display: grid;
  grid-template-columns: 3.4rem 1fr;
  gap: 1.1rem;
  align-items: start;
  margin-bottom: 1.6rem;
}
.uh-listenkopf-nr {
  font-size: 2.1rem; font-weight: 800; line-height: 1;
  letter-spacing: -.04em;
  color: var(--uh-sand);
}
.uh-listenkopf h2 {
  font-size: clamp(1.3rem, 2.1vw, 1.85rem) !important;
  letter-spacing: -.02em !important;
  margin-bottom: .3rem;
}
.uh-listenkopf p {
  color: var(--uh-grau);
  font-size: .95rem;
  line-height: 1.55;
  max-width: 62ch;
  margin: 0;
}

@media (max-width: 575.98px) {
  .uh-listenkopf { grid-template-columns: 1fr; gap: .3rem; }
  .uh-listenkopf-nr { font-size: 1.6rem; }
}

/* ==========================================================================
   Artikelseite — Einordnung in den Arbeitsablauf
   ========================================================================== */

.uh-einordnung {
  background: var(--uh-kalk);
  border-top: 1px solid rgba(38,40,31,.09);
  padding-block: clamp(2.5rem, 5vw, 4rem);
  margin-top: clamp(2rem, 4vw, 3.5rem);
}
.uh-einordnung-kopf { margin-bottom: clamp(1.6rem, 3vw, 2.4rem); }
.uh-einordnung-kopf h2 {
  font-size: clamp(1.4rem, 2.3vw, 2rem) !important;
  letter-spacing: -.02em !important;
  margin-bottom: .6rem;
}
.uh-einordnung .uh-lead { margin-bottom: 0; }

/* Der Ablauf als Leiste. Waagerecht, weil die Schritte eine Reihenfolge
   haben — eine Liste untereinander würde das verschenken. */
.uh-ablauf {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: .6rem;
  padding: 0;
  margin: 0 0 clamp(1.8rem, 3vw, 2.5rem);
  counter-reset: none;
}
.uh-ablauf-schritt a {
  display: flex; flex-direction: column; gap: .35rem;
  background: #fff;
  border: 1px solid rgba(38,40,31,.1);
  border-top: 3px solid rgba(38,40,31,.12);
  border-radius: 12px;
  padding: .85rem .9rem 1rem;
  text-decoration: none !important;
  transition: border-color .25s var(--uh-kurve), transform .25s var(--uh-kurve);
  height: 100%;
}
.uh-ablauf-schritt a:hover {
  border-color: rgba(248,191,0,.5);
  border-top-color: var(--uh-signal);
  transform: translateY(-2px);
}
.uh-ablauf-nr {
  font-size: .78rem; font-weight: 800; letter-spacing: -.01em;
  color: var(--uh-grau);
}
.uh-ablauf-titel {
  font-size: .92rem; font-weight: 650; line-height: 1.3;
  color: var(--uh-tinte);
}
/* Der Schritt, auf dem der Besucher gerade steht. */
.uh-ablauf-schritt.uh-hier a {
  background: var(--uh-tief);
  border-color: var(--uh-tief);
  border-top-color: var(--uh-signal);
}
.uh-ablauf-schritt.uh-hier .uh-ablauf-nr { color: var(--uh-signal); }
.uh-ablauf-schritt.uh-hier .uh-ablauf-titel { color: #fff; }

.uh-dazu { margin-bottom: clamp(1.6rem, 3vw, 2.2rem); }
.uh-dazu h3 {
  font-size: 1.02rem !important;
  font-weight: 700 !important;
  letter-spacing: -.01em !important;
  margin-bottom: .8rem;
}
.uh-dazu-marken { display: flex; flex-wrap: wrap; gap: .55rem; }
.uh-dazu-marken a {
  display: inline-flex; align-items: center;
  background: #fff;
  border: 1px solid rgba(38,40,31,.12);
  border-radius: 999px;
  padding: .5rem 1.05rem;
  font-size: .9rem; font-weight: 600;
  color: var(--uh-tinte) !important;
  text-decoration: none !important;
  transition: background .25s var(--uh-kurve), border-color .25s var(--uh-kurve),
              transform .25s var(--uh-kurve);
}
.uh-dazu-marken a:hover {
  background: var(--uh-signal);
  border-color: var(--uh-signal);
  transform: translateY(-2px);
}

.uh-nachbarn {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .8rem;
  padding-top: 1.4rem;
  border-top: 1px solid rgba(38,40,31,.1);
}
.uh-nachbar {
  display: flex; flex-direction: column; gap: .2rem;
  padding: .9rem 1.1rem;
  background: #fff;
  border: 1px solid rgba(38,40,31,.1);
  border-radius: 12px;
  text-decoration: none !important;
  transition: border-color .25s var(--uh-kurve), transform .25s var(--uh-kurve);
}
.uh-nachbar:hover { border-color: rgba(248,191,0,.55); transform: translateY(-2px); }
.uh-nachbar-weiter { text-align: right; }
.uh-nachbar-rolle {
  font-size: .72rem; font-weight: 700; letter-spacing: .13em;
  text-transform: uppercase; color: var(--uh-grau);
}
.uh-nachbar strong {
  font-size: .98rem; font-weight: 650; color: var(--uh-tinte);
  letter-spacing: -.01em;
}
/* Steht nur ein Nachbar zur Verfügung (erster oder letzter Schritt), soll er
   nicht die halbe Breite leer lassen. */
.uh-nachbarn > .uh-nachbar:only-child { grid-column: 1 / -1; }

@media (max-width: 767.98px) {
  .uh-ablauf { grid-template-columns: repeat(2, 1fr); }
  .uh-nachbarn { grid-template-columns: 1fr; }
  .uh-nachbar-weiter { text-align: left; }
}

/* Der Kopf eines Listenabschnitts bekommt seine Fläche bewusst — NOVA gibt
   jedem <header> einen eigenen Hintergrund mit, und geerbte Gestaltung ist
   keine Gestaltung. */
.uh-listenkopf {
  background: var(--uh-kalk);
  border-radius: 12px;
  padding: 1rem 1.2rem;
}