/* ==========================================================================
   Glückkalk — die Startseiten-Bühne
   UHRIG Solutions, 22.09.2026

   Rückmeldung Manuel: „das Bild auf der Startseite als Hintergrund gefällt
   mir irgendwie garnicht … ggfs könnte man auch die Gründer mit einbauen,
   unten links an dem Text, die mit einblenden, leicht ausfadend, und rechts
   irgendwie was mit dem Kalk."

   Das alte Bild (zutaten.webp) war ein Dokumentationsfoto: Mittagssonne,
   harte Schatten, Styroporplatte, roter Plastikgriff. Ehrlich, aber kein
   Aushängeschild — und als flächiger Hintergrund unter dem Text verlor es
   ohnehin jede Wirkung.

   Statt EIN Foto hinter alles zu legen, ist die Bühne jetzt gebaut:

     Grund    der dunkle Ton, darüber sehr schwach die verriebene
              Kalkfläche — damit der Grund die Körnung einer Wand hat
              statt eine glatte Farbe zu sein.
     Rechts   der rohe Sumpfkalk, groß, läuft über den rechten Rand hinaus
              und löst sich nach links in den Grund auf. Das ist das
              Produkt, nicht die Tätigkeit — genau die Ausrichtung, die für
              diese Seite gilt.
     Links    die Schrift, auf ruhigem dunklem Grund.
     Unten    wer es macht und was es eingebracht hat: Ronald Kogler und
              Andreas Wanger, freigestellt und nach unten auslaufend,
              daneben der Anerkennungspreis.

   ALLE BILDER SIND ECHT. Nichts hiervon ist KI-generiert; das Material
   stammt aus dem Bestand des Kunden. Bei den beiden Inhabern wäre ein
   erzeugtes Abbild real existierender Personen ohnehin der falsche Weg —
   es gibt ein richtiges Studiofoto, sauber freigestellt.
   ========================================================================== */

.uh-buehne-neu {
  background-color: var(--uh-nacht) !important;
  background-image: none !important;
  isolation: isolate;
}

/* ---------- Der Grund: Wandkörnung statt Farbfläche ---------------------- */

.uh-buehne-neu::after {
  content: '';
  position: absolute; inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image: var(--uh-grund);
  background-size: cover;
  background-position: 50% 50%;
  /* Sehr schwach. Bei einem früheren Versuch lag das Material mit .5 und
     `screen` über den Abschnitten — daraus wurde ein schmutziges Graugrün.
     Hier trägt es nur die Körnung bei, nicht die Farbe. */
  opacity: .07;
  mix-blend-mode: luminosity;
}

/* ---------- Rechts: der rohe Sumpfkalk ----------------------------------- */

.uh-buehne-kalk {
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: min(56%, 880px);
  z-index: 1;
  background-size: cover;
  background-position: 46% 42%;
  /* Zwei Masken übereinander: nach links löst sich das Material in den
     Grund auf, nach unten läuft es aus. `intersect` heißt, beide müssen
     durchlassen — sonst stünde unten links eine harte Kante.

     Der linke Verlauf läuft waagrecht (`to right`), nicht schräg. Bei
     100deg kippt die Verlaufsachse mit dem Seitenverhältnis: oben verlief
     der Übergang woanders als unten, was als Kante zu sehen war. Waagrecht
     bleibt er über die ganze Höhe an derselben Stelle. */
  -webkit-mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,.45) 30%, #000 68%),
                      linear-gradient(to top, transparent 0%, #000 18%);
          mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,.45) 30%, #000 68%),
                      linear-gradient(to top, transparent 0%, #000 18%);
  -webkit-mask-composite: source-in;
          mask-composite: intersect;
  /* Zieht beim Scrollen langsamer mit als die Schrift. --uh-zug setzt
     js/bewegung.js auf dem Abschnitt, die Variable erbt hierher. */
  transform: translate3d(0, calc(var(--uh-zug, 0px) * .55), 0);
  will-change: transform;
}

/* Der Verlauf von links hält die Schriftseite ruhig. Er muss ÜBER dem
   Material liegen, sonst frisst das Foto die Überschrift. */
.uh-buehne-neu::before {
  z-index: 2;
  background: linear-gradient(96deg,
              rgba(20,24,15,.97) 0%, rgba(20,24,15,.92) 30%,
              rgba(20,24,15,.55) 58%, rgba(20,24,15,.05) 86%,
              rgba(20,24,15,0) 100%) !important;
}
.uh-buehne-neu .uh-innen { z-index: 3; }

/* ---------- Die Schrift --------------------------------------------------- */

.uh-buehne-neu {
  /* Die Bühne soll in EIN Fenster passen. Sonst steht der Fuß — Gründer
     und Preis — unter der Falte, und genau der ist der Grund, warum es
     ihn gibt. `svh` statt `vh`, sonst rechnet ein Handy mit der Höhe OHNE
     eingeblendete Adresszeile und die Bühne ragt doch darüber hinaus. */
  /* KORREKTUR 23.09.2026 — Rückmeldung Manuel: „unten hat man so paar cm,
     die nicht vom Oberteil der Seite bedeckt sind, das müsste man auch
     beheben … damit die Kante so groß ist wie der Monitor."

     Vorher stand hier eine feste Obergrenze (78svh, höchstens 820 px).
     Auf einem hohen Bildschirm endete die Bühne dadurch mitten im Bild und
     darunter blitzte der nächste Abschnitt durch.

     Jetzt füllt sie genau den sichtbaren Bereich: volle Fensterhöhe minus
     Kopfzeile. `svh` statt `vh`, sonst rechnet ein Handy mit der Höhe OHNE
     eingeblendete Adressleiste und die Bühne ragt wieder darüber hinaus. */
  min-height: calc(100svh - var(--uh-kopf-hoehe, 90px)) !important;
  padding-block: clamp(1.6rem, 3vw, 2.6rem) !important;
}

/* Die Überschrift ist auf der Bühne etwas kleiner als im ersten Entwurf.
   Gemessen: bei 7rem brauchte allein sie 385 px, zusammen mit Vorspann,
   Knopf und Fuß wurde die Bühne 1095 px hoch — unter einer 90 px hohen
   Kopfzeile passt das in kein 900-px-Fenster. Sie wirkt trotzdem groß;
   was sie vorher hatte, war Masse, nicht Wirkung. */
html body .uh-buehne-neu h1 {
  font-size: clamp(2.5rem, 5.4vw, 5.2rem) !important;
  line-height: .95 !important;
}

/* Schrift oben, Fuß unten — der Platz dazwischen wächst mit dem Fenster.
   Mit `flex-end` wäre bei voller Höhe alles nach unten gerutscht und die
   Überschrift säße in der Bildmitte statt oben. */
.uh-buehne-neu .uh-innen {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: clamp(1.3rem, 2.4vw, 2.1rem);
  width: 100%;
  padding-top: clamp(1rem, 4vh, 3.5rem);
}

/* ACHTUNG, am 22.09.2026 gemessen: hier stand `max-width: 34ch`. `ch` misst
   an der Schriftgröße DES ELEMENTS — und das ist hier Fließtextgröße, also
   rund 300 px. Die Überschrift brach dadurch auf vier statt zwei Zeilen,
   die Bühne wuchs auf 1095 px und schob den Fuß aus dem Bild.
   Zeichenmaße gehören an das Element, dessen Schrift sie meinen. */
.uh-buehne-wort { max-width: min(54rem, 60%); }
.uh-buehne-neu h1 { text-shadow: none !important; max-width: none !important; }
.uh-buehne-neu .uh-vorspann { max-width: 42ch !important; }
.uh-buehne-neu .uh-knoepfe { margin-bottom: 0; }

/* ---------- Unten: wer es macht, und der Preis ---------------------------- */

.uh-buehne-fuss {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  padding-top: clamp(1.1rem, 2vw, 1.7rem);
  border-top: 1px solid rgba(255,255,255,.13);
}

.uh-macher {
  display: flex;
  align-items: flex-end;
  gap: 1.1rem;
  margin: 0;
  /* Breit genug, dass „Ronald Kogler und Andreas Wanger" in eine Zeile
     passt — sonst bricht es nach „Andreas" um und trennt den Namen. */
  max-width: 38rem;
}
.uh-macher img {
  height: clamp(76px, 8.5vw, 118px);
  width: auto;
  flex: none;
  display: block;
  /* „leicht ausfadend": nach unten löst sich das Foto in den Grund auf,
     statt auf einer Kante zu stehen. */
  -webkit-mask-image: linear-gradient(to bottom, #000 52%, transparent 97%);
          mask-image: linear-gradient(to bottom, #000 52%, transparent 97%);
  opacity: .93;
}
.uh-macher figcaption {
  font-size: .9rem;
  line-height: 1.45;
  color: rgba(244,243,238,.62);
  padding-bottom: .5rem;
}
.uh-macher figcaption strong {
  display: block;
  color: var(--uh-kalk);
  font-weight: 500;
  margin-bottom: .15rem;
}

/* Der Preis sitzt jetzt in derselben Zeile und darf deshalb schmaler sein. */
.uh-buehne-fuss a.uh-preis {
  margin-top: 0;
  max-width: 27rem;
  padding: .85rem 1.2rem .85rem .85rem;
}
.uh-buehne-fuss a.uh-preis img { width: 64px; height: 64px; }
.uh-buehne-fuss a.uh-preis span { font-size: .84rem; }

/* ---------- Ein einziger Auftritt beim Laden ------------------------------
   Nicht jeder Abschnitt blendet ein — das war genau die Rückmeldung
   („furchtbar wie die Fotos sich da einblenden"). Hier bewegt sich die
   Seite ein Mal, beim Öffnen, in einer Abfolge: Material, Schrift, Fuß.
   Danach liegt sie still und antwortet nur noch auf Berührung.            */

@keyframes uh-auf {
  from { opacity: 0; transform: translate3d(0, 18px, 0); }
  to   { opacity: 1; transform: none; }
}
@keyframes uh-kalk-auf {
  from { opacity: 0; transform: translate3d(3%, 0, 0) scale(1.04); }
  to   { opacity: 1; transform: none; }
}

.uh-buehne-kalk { animation: uh-kalk-auf 1.4s var(--uh-kurve) both; }
.uh-buehne-wort { animation: uh-auf .9s var(--uh-kurve) .15s both; }
.uh-buehne-fuss { animation: uh-auf .9s var(--uh-kurve) .45s both; }

@media (prefers-reduced-motion: reduce) {
  .uh-buehne-kalk, .uh-buehne-wort, .uh-buehne-fuss { animation: none !important; }
  .uh-buehne-kalk { transform: none !important; }
}

/* ---------- Schmale Geräte ------------------------------------------------
   Nebeneinander ist bei 390 px nichts mehr. Das Material rückt hinter die
   Schrift und wird schwächer, der Fuß stapelt sich.                       */

@media (max-width: 991.98px) {
  .uh-buehne-kalk {
    width: 100%;
    opacity: .38;
    background-position: 60% 30%;
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, transparent 82%);
            mask-image: linear-gradient(to bottom, #000 0%, transparent 82%);
    -webkit-mask-composite: source-over;
            mask-composite: add;
  }
  .uh-buehne-neu::before {
    background: linear-gradient(to top,
                rgba(20,24,15,.97) 18%, rgba(20,24,15,.82) 52%,
                rgba(20,24,15,.55) 100%) !important;
  }
  /* Die 60-%-Begrenzung der Textspalte ist für die geteilte Bühne gedacht.
     Auf dem Handy liegt das Material HINTER der Schrift, es gibt keine
     zweite Spalte — dort schnürt sie die Überschrift auf 210 px ein, die
     dann mit 254 px herausragte (22.09.2026 gemessen). */
  .uh-buehne-wort { max-width: none; }
  .uh-buehne-fuss { flex-direction: column; align-items: stretch; }
  .uh-buehne-fuss a.uh-preis { max-width: none; }
}

/* Der Name in eine Zeile — aber NUR, wo die Spalte dafür breit genug ist.
   Auf dem Handy wäre `nowrap` genau die Überbreite, die css/handy.css
   gerade abgestellt hat: der Name ist breiter als die Spalte neben dem
   Foto. Dort darf er umbrechen. */
@media (min-width: 768px) {
  .uh-macher figcaption strong { white-space: nowrap; }
}

@media (max-width: 575.98px) {
  .uh-macher { gap: .9rem; }
  .uh-macher img { height: 68px; }
  .uh-macher figcaption { font-size: .82rem; }
}

/* ==========================================================================
   Die beiden Inhaber im Abschnitt „Wände können mehr"
   UHRIG Solutions, 22.09.2026

   Vorher lag hier team.webp — ein deckendes Bild auf weißem Grund. Auf der
   dunklen Seite stand das als heller Kasten mit abgeschnittener Unterkante
   („unten mit einem weißen Streifen, also nicht bündig").

   Jetzt dasselbe Studiofoto, aber sauber freigestellt: die hellen
   Kreisscheiben sind raus, die beiden stehen frei. Wie das gemessen wurde,
   steht in tools/gruender-freistellen.py.
   ========================================================================== */

.uh-macher-gross img {
  width: auto !important;
  max-width: 100%;
  max-height: clamp(220px, 26vw, 360px);
  margin-inline: auto;
  /* Nach unten auslaufen lassen, damit die Schultern nicht auf einer Kante
     enden — dasselbe Prinzip wie auf der Bühne. */
  -webkit-mask-image: linear-gradient(to bottom, #000 76%, transparent 99%);
          mask-image: linear-gradient(to bottom, #000 76%, transparent 99%);
}
.uh-macher-gross figcaption { text-align: center !important; }

/* ---------- Der Preishinweis bei den Preisen -----------------------------
   js/redesign.js holt „* Alle Preise inkl. gesetzlicher USt., zzgl.
   Versand" aus der Fußzeile an die Produktkacheln. Dort ist er eine
   Fußnote zu den Preisen darüber und keine verlorene Zeile am Seitenende.
   Er bleibt bewusst klein und ruhig — Pflichtangabe, kein Verkaufstext. */
.uh-preishinweis {
  margin: 1rem 0 0 !important;
  padding: 0 !important;
  font-size: .82rem;
  color: rgba(244,243,238,.5);
}
.uh-preishinweis a { color: rgba(244,243,238,.7); text-decoration: underline; }
.uh-preishinweis a:hover { color: var(--uh-gruen); }