/* ==========================================================================
   Glückkalk — Wandaufbauten
   UHRIG Solutions, 01.10.2026

   Vier wählbare Aufbauten statt einem scroll-gesteuerten. Warum, steht in
   snippets/uh_wandaufbau.tpl.

   Die Gestaltung hält sich zurück: Die Information ist eine Reihenfolge
   von Schichten, und die soll man lesen können. Farbe trägt hier Bedeutung
   — jede Schicht hat ihre eigene, und dieselbe Farbe steht in der
   Zeichnung wie in der Liste daneben. Das ist der einzige Grund, warum es
   überhaupt Farbflächen gibt.
   ========================================================================== */

.uh-aufbauten { margin-top: clamp(2rem, 4vw, 3rem); }

/* ---------- Die Auswahl --------------------------------------------------
   Vier Schaltflächen in einer Reihe. Auf schmalen Geräten scrollen sie
   waagrecht, statt auf vier Zeilen umzubrechen — dann bleibt sichtbar,
   dass es eine Auswahl ist.                                              */

.uh-aufbau-wahl {
  display: flex;
  gap: 2px;
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: var(--uh-rund);
  overflow: hidden;
}

.uh-aufbau-knopf {
  flex: 1 1 0;
  min-width: 0;
  display: block;
  text-align: left;
  padding: 1rem clamp(.8rem, 1.6vw, 1.3rem);
  background: var(--uh-nacht-2);
  border: 0;
  color: var(--uh-nebel);
  cursor: pointer;
  transition: background .25s var(--uh-kurve), color .25s var(--uh-kurve);
}
.uh-aufbau-knopf strong {
  display: block;
  font-family: var(--uh-display);
  font-weight: 400;
  font-size: 1.02rem;
  letter-spacing: -.01em;
  color: var(--uh-kalk);
  margin-bottom: .2rem;
}
.uh-aufbau-knopf span {
  display: block;
  font-size: .82rem;
  line-height: 1.3;
  color: var(--uh-nebel);
}
.uh-aufbau-knopf:hover { background: var(--uh-nacht-3); }

/* Der gewählte Untergrund: gelbe Standlinie, nicht volle Fläche. Eine
   gefüllte Schaltfläche würde mit dem Kaufknopf der Seite konkurrieren. */
.uh-aufbau-knopf.uh-an {
  background: var(--uh-nacht-3);
  box-shadow: inset 0 -3px 0 var(--uh-signal);
}
.uh-aufbau-knopf.uh-an strong { color: #fff; }
.uh-aufbau-knopf:focus-visible {
  outline: 2px solid var(--uh-signal);
  outline-offset: -2px;
}

/* ---------- Der Wischhinweis --------------------------------------------
   Erscheint nur auf Geräten mit Touch (das entscheidet js/aufbauten.js)
   und verschwindet nach dem ersten Wischen. Die Pfeile bewegen sich
   leicht nach außen — das zeigt die Richtung, ohne zu blinken.         */

.uh-wischhinweis {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  margin: 1rem 0 0 !important;
  font-size: .86rem;
  color: var(--uh-nebel) !important;
  transition: opacity .4s var(--uh-kurve);
}
.uh-wischhinweis.uh-verstanden { opacity: 0; pointer-events: none; }

.uh-wischpfeil {
  display: inline-block;
  font-size: 1.3rem;
  line-height: 1;
  color: var(--uh-signal);
  animation: uh-wink 1.9s var(--uh-kurve) infinite;
}
.uh-wischpfeil:last-child { animation-delay: .25s; }

@keyframes uh-wink {
  0%, 60%, 100% { transform: translateX(0); opacity: .55; }
  30%           { transform: translateX(-4px); opacity: 1; }
}
.uh-wischpfeil:last-child {
  animation-name: uh-wink-rechts;
}
@keyframes uh-wink-rechts {
  0%, 60%, 100% { transform: translateX(0); opacity: .55; }
  30%           { transform: translateX(4px); opacity: 1; }
}

/* ---------- Die Tafeln ---------------------------------------------------
   Ohne Skript stehen alle untereinander. Erst `.uh-gesteuert` blendet die
   nicht gewählten aus — fällt das Skript aus, ist die Seite voller, aber
   vollständig.                                                          */

.uh-aufbau-buehnen { margin-top: clamp(1.5rem, 3vw, 2.4rem); }

.uh-aufbau-tafel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(1.8rem, 4vw, 4rem);
  align-items: start;
  padding: clamp(1.5rem, 3vw, 2.5rem) 0;
  border-top: 1px solid rgba(255,255,255,.1);
}
.uh-aufbau-buehnen .uh-aufbau-tafel:first-child { border-top: 0; }
.uh-waehlbar .uh-aufbau-tafel { border-top: 0; padding-top: 0; }

/* Beim Blättern kommt die neue Tafel von der Seite herein, aus der
   gewischt wurde. */
.uh-aufbau-tafel.uh-von-rechts { animation: uh-herein-rechts .35s var(--uh-kurve); }
.uh-aufbau-tafel.uh-von-links  { animation: uh-herein-links  .35s var(--uh-kurve); }
@keyframes uh-herein-rechts {
  from { opacity: 0; transform: translateX(22px); }
  to   { opacity: 1; transform: none; }
}
@keyframes uh-herein-links {
  from { opacity: 0; transform: translateX(-22px); }
  to   { opacity: 1; transform: none; }
}

/* ---------- Die Zeichnung ------------------------------------------------ */

.uh-aufbau-zeichnung { margin: 0; }
.uh-aufbau-zeichnung svg {
  width: 100%;
  height: auto;
  display: block;
  background: var(--uh-nacht-2);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: var(--uh-rund);
}
.uh-aufbau-zeichnung .uh-lage { stroke: rgba(0,0,0,.25); stroke-width: 1; }

.uh-aufbau-zeichnung figcaption {
  display: flex;
  justify-content: space-between;
  margin-top: .7rem;
  font-size: .8rem;
  color: var(--uh-nebel);
}

/* ---------- Die Schichtfolge --------------------------------------------- */

.uh-lagenliste {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: none;
}
.uh-lage-zeile {
  display: grid;
  grid-template-columns: 1.7rem .5rem 1fr;
  gap: .9rem;
  align-items: start;
  padding: .9rem 0;
  border-top: 1px solid rgba(255,255,255,.08);
}
.uh-lage-zeile:first-child { border-top: 0; padding-top: 0; }

/* Der Untergrund ist keine Schicht, die man aufträgt — er bekommt deshalb
   keine Nummer, sondern rückt um die Nummernspalte ein. */
.uh-lage-untergrund { grid-template-columns: .5rem 1fr; }
.uh-lage-untergrund strong { color: var(--uh-nebel) !important; }

.uh-lage-nr {
  font-family: var(--uh-display);
  font-size: 1rem;
  color: var(--uh-signal);
  line-height: 1.4;
}
.uh-lage-farbe {
  width: .5rem;
  align-self: stretch;
  min-height: 2.2rem;
  border-radius: 1px;
  border: 1px solid rgba(0,0,0,.25);
}
.uh-lage-zeile strong {
  display: block;
  color: var(--uh-kalk) !important;
  font-weight: 500;
  margin-bottom: .15rem;
}
.uh-lage-zeile p {
  margin: 0 0 .5rem;
  font-size: .9rem;
  color: var(--uh-nebel) !important;
}
.uh-lage-artikel {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0 .9rem;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 999px;
  font-size: .84rem;
  color: var(--uh-kalk) !important;
  text-decoration: none !important;
  transition: border-color .2s var(--uh-kurve), background .2s var(--uh-kurve);
}
.uh-lage-artikel:hover {
  border-color: var(--uh-signal);
  background: rgba(248,191,0,.1);
}

/* ---------- Schmale Geräte ------------------------------------------------
   Hier lag der eigentliche Fehler der alten Fassung: Die klebende Bühne war
   100svh hoch und `overflow: hidden` — was nicht hineinpasste, verschwand.
   Diese Fassung hat keine feste Höhe und kann nichts abschneiden.       */

@media (max-width: 991.98px) {
  .uh-aufbau-tafel { grid-template-columns: 1fr; gap: 1.5rem; }
}

@media (max-width: 767.98px) {
  /* Die Auswahl scrollt waagrecht, statt auf vier Zeilen zu brechen. */
  .uh-aufbau-wahl {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
  }
  .uh-aufbau-knopf {
    flex: 0 0 auto;
    min-width: 11rem;
    scroll-snap-align: start;
  }
  .uh-aufbau-zeichnung svg { max-height: 44vh; }
}

@media (prefers-reduced-motion: reduce) {
  .uh-aufbau-tafel.uh-von-rechts,
  .uh-aufbau-tafel.uh-von-links { animation: none; }
  .uh-wischpfeil { animation: none; }
}


/* Die Schichten der Zeichnung heissen .uh-lage — denselben Namen benutzt der
   alte, scroll-gesteuerte Aufbau, und material.css setzt dort
   `.uh-gesteuert .uh-lage { opacity: 0 }`. Diese Datei laedt danach und
   stellt die Sichtbarkeit fuer die neue Zeichnung wieder her, falls die
   alte Regel jemals wieder greift. */
/* ENTFERNT 01.10.2026: Hier stand `.uh-aufbau-zeichnung .uh-lage
   { opacity: 1 !important; transform: none !important }`. Die Regel hielt
   ALLE Schichten der Zeichnung dauerhaft sichtbar — damit baute sich die
   Wand beim Scrollen nie auf, nur Beschriftung und Liste. Die alte
   material.css-Regel, gegen die sie schuetzen sollte, greift nicht, weil
   aufbauten.js die Klasse .uh-waehlbar statt .uh-gesteuert setzt. */

/* ==========================================================================
   Beschriftung und Aufbau beim Scrollen — 01.10.2026
   ==========================================================================
   Ansage Kunde: „es fehlt auch die richtige Erklärung" und „wäre sehr geil,
   wenn das auch wieder mit Runterscrollen so aufklappt".

   Die Erklärung steht jetzt AN der Schicht, nicht daneben: eine
   Führungslinie vom Streifen zum Namen. Wer auf die Zeichnung sieht, muss
   nicht erst in der Liste nachschlagen, welcher Streifen gemeint ist.
   ========================================================================== */

/* ---------- Führungslinien ----------------------------------------------- */

.uh-ruf path {
  fill: none;
  stroke: var(--uh-gruen);
  stroke-width: 1.4;
  opacity: .8;
}
.uh-ruf circle { fill: var(--uh-gruen); }
.uh-ruf text {
  fill: var(--uh-kalk);
  font-family: var(--uh-display), system-ui, sans-serif;
  font-size: 15px;
  letter-spacing: -.01em;
}
.uh-ruf .uh-ruf-klein {
  fill: var(--uh-nebel);
  font-family: system-ui, sans-serif;
  font-size: 12.5px;
}

/* ---------- Aufbau beim Scrollen -----------------------------------------
   GRUNDZUSTAND IST SICHTBAR. Erst wenn js/aufbauten.js übernimmt, setzt es
   `.uh-waehlbar` auf die Hülle — ab da gilt das Verstecken, und die
   Schichten kommen einzeln dazu. Fällt das Skript aus, steht alles da.

   Die Lagen wachsen von RECHTS herein, weil der Putz in dieser Richtung
   aufgetragen wird. Deshalb `transform-origin: 100%`.                   */

.uh-waehlbar .uh-lage {
  opacity: 0;
  transform: scaleX(.12);
  transform-origin: 100% 50%;
  transition: opacity .45s ease, transform .55s var(--uh-kurve);
}
.uh-waehlbar .uh-lage.uh-da { opacity: 1; transform: none; }

.uh-waehlbar .uh-ruf {
  opacity: 0;
  transition: opacity .45s ease .12s;
}
.uh-waehlbar .uh-ruf.uh-da { opacity: 1; }

/* Die Zeilen der Liste kommen mit ihrer Schicht — so gehören Zeichnung und
   Text sichtbar zusammen, statt zweimal dasselbe zu erzählen. */
.uh-waehlbar .uh-lage-zeile {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .4s ease, transform .4s var(--uh-kurve);
}
.uh-waehlbar .uh-lage-zeile.uh-da { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .uh-waehlbar .uh-lage,
  .uh-waehlbar .uh-ruf,
  .uh-waehlbar .uh-lage-zeile {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* Die Zeichnung braucht mehr Platz, seit die Beschriftungen außerhalb der
   Wand liegen. */
.uh-aufbau-zeichnung svg { padding: .5rem 0; }

@media (max-width: 767.98px) {
  /* Auf dem Handy sind 15 px in einer Zeichnung, die auf 350 px schrumpft,
     nicht mehr zu lesen — die viewBox skaliert ja mit. */
  /* Groesser als am Desktop, weil die viewBox auf Handybreite schrumpft —
     aber nicht so gross, dass die zwei Zeilen der Untergrund-Beschriftung
     aneinanderstossen (01.10.2026 gemessen: sie ueberlappten). */
  .uh-ruf text { font-size: 17px; }
  .uh-ruf .uh-ruf-klein { font-size: 14px; }
  .uh-aufbau-zeichnung svg { max-height: none; }
}