/* ============================================================
 * Wasserurne site tokens + components (brand palette from wasserurne.ch)
 * ============================================================ */

:root {
  --wu-white: #ffffff;
  --wu-cream: #e8e4d7;
  --wu-cream-deep: #ddd7c6;
  --wu-sand: #c9b893;
  --wu-sand-deep: #b3a077;
  --wu-taupe: #817b71;
  --wu-taupe-deep: #5f5a52;
  --wu-charcoal: #3b3733;
  --wu-font: "Outfit", "Helvetica Neue", Arial, sans-serif;
  --wu-mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  --wu-gutter: clamp(1.25rem, 5vw, 5rem);
  --wu-max: 78rem;
}

.wu {
  background: var(--wu-white);
  color: var(--wu-taupe-deep);
  font-family: var(--wu-font);
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
.wu * { box-sizing: border-box; }
.wu a { color: inherit; text-decoration: none; }
.wu p { margin: 0; }
.wu h1, .wu h2, .wu h3 { margin: 0; font-weight: 300; letter-spacing: -0.01em; }
.wu ul { list-style: none; margin: 0; padding: 0; }


/* Header */
.wu-header {
  position: fixed; inset: 0 0 auto 0; z-index: 40;
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; height: 4.5rem; padding: 0 var(--wu-gutter);
  color: var(--wu-white);
  mix-blend-mode: difference;
  transition: background-color 260ms ease, color 260ms ease, box-shadow 260ms ease;
}
/* Sobald gescrollt wird, traegt die Navigation einen eigenen Grund. Der
   Blendmodus muss dabei weichen, sonst wuerde der Hintergrund mitinvertiert. */
.wu-header[data-solid="true"] {
  mix-blend-mode: normal;
  background: color-mix(in srgb, var(--wu-white) 88%, transparent);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  backdrop-filter: blur(14px) saturate(1.2);
  color: var(--wu-charcoal);
  box-shadow: 0 1px 0 color-mix(in srgb, var(--wu-sand) 45%, transparent);
}
.wu-header__brand { font-weight: 400; letter-spacing: 0.22em; text-transform: uppercase; font-size: 0.85rem; }
.wu-header__nav { display: none; gap: 1.75rem; font-size: 0.8rem; letter-spacing: 0.08em; }
.wu-header__nav a { padding: 0.25rem 0; border-bottom: 1px solid transparent; transition: border-color 200ms; }
.wu-header__nav a:hover { border-bottom-color: currentColor; }
@media (min-width: 861px) { .wu-header__nav { display: flex; } }

/* Section shell */
.wu-section { padding: clamp(4rem, 10vw, 8.5rem) var(--wu-gutter); }
.wu-inner { max-width: var(--wu-max); margin: 0 auto; }
.wu-eyebrow { font-family: var(--wu-mono); font-size: 0.7rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--wu-sand-deep); margin-bottom: 1.25rem; }
.wu-h2 { font-size: clamp(2rem, 4.5vw, 3.6rem); line-height: 1.05; color: var(--wu-charcoal); max-width: 18ch; }
.wu-h3 { font-size: 1.35rem; line-height: 1.25; color: var(--wu-charcoal); }
.wu-lead { font-size: clamp(1.1rem, 1.6vw, 1.35rem); line-height: 1.5; color: var(--wu-taupe-deep); max-width: 60ch; font-weight: 300; }
.wu-copy { max-width: 62ch; display: grid; gap: 1.1rem; }
.wu-copy p { color: var(--wu-taupe-deep); }
.wu-rule { border: 0; border-top: 1px solid var(--wu-sand); margin: 0; }

/* CTA garments (each its own identity) */
.wu-cta-line {
  display: inline-flex; align-items: center; gap: 0.6rem;
  font-size: 1rem; color: var(--wu-charcoal);
  padding-bottom: 0.35rem; border-bottom: 1px solid var(--wu-sand);
}
.wu-cta-line svg { transition: transform 250ms ease; }
.wu-cta-line:hover svg { transform: translateX(6px); }
.wu-cta-line:active { transform: translateY(1px); }

/* `.wu a { color: inherit }` hat die Spezifitaet (0,1,1) und schlug damit die
   Einzelklasse (0,1,0) — im dunklen Kontaktbereich stand der Knopf deshalb
   creme auf creme. Mit `.wu` davor gewinnt die eigene Farbe wieder. */
.wu .wu-cta-pill {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.8rem 1.4rem; border-radius: 999px;
  background: var(--wu-cream); color: var(--wu-charcoal);
  border: 1px solid var(--wu-taupe); font-size: 0.92rem;
  transition: background 200ms, color 200ms, border-color 200ms;
}
.wu .wu-cta-pill:hover { background: var(--wu-charcoal); color: var(--wu-white); border-color: var(--wu-charcoal); }
.wu-cta-pill:active { transform: scale(0.98); }

.wu-cta-map { display: inline-flex; align-items: center; gap: 0.5rem; color: var(--wu-taupe-deep); font-size: 0.95rem; }
.wu-cta-map:hover { color: var(--wu-charcoal); }

/* Split (Die Wasserurne) */
.wu-split { display: grid; gap: 3rem; align-items: center; }
.wu-split__media img { width: 100%; height: auto; display: block; border-radius: 4px; }
@media (min-width: 861px) {
  .wu-split { grid-template-columns: 7fr 5fr; gap: 5rem; }
  .wu-split--flip { grid-template-columns: 5fr 7fr; }
  .wu-split--flip .wu-split__media { order: -1; }
}

/* Statement (Das Original) */
.wu-statement { background: var(--wu-cream); }
.wu-statement__grid { display: grid; gap: 2rem; }
.wu-statement__sig { font-family: var(--wu-mono); font-size: 0.75rem; letter-spacing: 0.12em; color: var(--wu-taupe); }
@media (min-width: 861px) { .wu-statement__grid { grid-template-columns: 1fr 2fr; gap: 5rem; } }

/* Sortiment strip */
/* `scroll-padding-inline`: ohne das rechnet die Einrastung den Innenabstand
   nicht mit, die Bahn startet um einen Bundsteg verschoben und die erste
   Kachel klebt am Rand. */
.wu-strip { display: flex; gap: 1rem; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--wu-gutter); padding-bottom: 1rem; margin: 0 calc(-1 * var(--wu-gutter)); padding-inline: var(--wu-gutter); scrollbar-width: thin; scrollbar-color: var(--wu-sand) transparent; }
.wu-strip figure { flex: 0 0 min(72vw, 22rem); margin: 0; scroll-snap-align: start; }
.wu-strip img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; display: block; border-radius: 4px; background: var(--wu-cream); }
.wu-strip figcaption { font-size: 0.8rem; color: var(--wu-taupe); margin-top: 0.6rem; }
.wu-facts { display: grid; gap: 1.5rem; margin-top: 3rem; }
.wu-fact { border-top: 1px solid var(--wu-sand); padding-top: 1rem; }
.wu-fact dt { font-size: 0.8rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--wu-sand-deep); margin-bottom: 0.4rem; }
.wu-fact dd { margin: 0; color: var(--wu-taupe-deep); }
.wu-price { font-size: clamp(1.6rem, 3vw, 2.4rem); font-weight: 300; color: var(--wu-charcoal); }
@media (min-width: 861px) { .wu-facts { grid-template-columns: repeat(3, 1fr); gap: 3rem; } }

/* Quotes */
.wu-quotes { display: grid; gap: 3rem; }
.wu-quote blockquote { margin: 0; font-size: clamp(1.25rem, 2.2vw, 1.75rem); font-weight: 300; line-height: 1.35; color: var(--wu-charcoal); max-width: 40ch; }
.wu-quote figcaption { margin-top: 0.9rem; font-size: 0.85rem; color: var(--wu-taupe); }
@media (min-width: 861px) { .wu-quotes { grid-template-columns: 1fr 1fr; } .wu-quote:nth-child(3) { grid-column: 2; } }

/* Werkstatt */
.wu-portrait { display: grid; gap: 2.5rem; align-items: start; }
.wu-portrait__img img { width: 100%; height: auto; display: block; border-radius: 4px; }
@media (min-width: 861px) { .wu-portrait { grid-template-columns: 4fr 7fr; gap: 5rem; } .wu-portrait__img { position: sticky; top: 6rem; } }

/* Aktuelles */
.wu-timeline { display: grid; }
.wu-event { display: grid; gap: 0.5rem; padding: 1.5rem 0; border-top: 1px solid var(--wu-cream-deep); }
.wu-event time { font-family: var(--wu-mono); font-size: 0.75rem; letter-spacing: 0.12em; color: var(--wu-sand-deep); }
.wu-event p { color: var(--wu-taupe-deep); max-width: 60ch; }
.wu-event a.wu-more { color: var(--wu-charcoal); border-bottom: 1px solid var(--wu-sand); font-size: 0.9rem; }
@media (min-width: 861px) { .wu-event { grid-template-columns: 9rem 1fr; gap: 2rem; } .wu-event time { padding-top: 0.35rem; } }

/* Kontakt */
.wu-contact { background: var(--wu-charcoal); color: var(--wu-cream); }
.wu-contact .wu-h2, .wu-contact .wu-h3 { color: var(--wu-white); }
.wu-contact .wu-copy p, .wu-contact .wu-address { color: var(--wu-cream); }
.wu-contact .wu-cta-map { color: var(--wu-cream); }
.wu-contact .wu-cta-map:hover { color: var(--wu-white); }
.wu-contact .wu-eyebrow { color: var(--wu-sand); }
.wu-contact-grid { display: grid; gap: 3rem; }
.wu-address { font-style: normal; line-height: 1.7; }
.wu-address a { border-bottom: 1px solid var(--wu-sand); }
.wu-hours { color: var(--wu-sand); }
.wu-contact__img img { width: 100%; height: auto; display: block; border-radius: 4px; }
@media (min-width: 861px) { .wu-contact-grid { grid-template-columns: 5fr 4fr 4fr; gap: 4rem; } }

/* Links */
.wu-links { display: grid; gap: 2.5rem; }
.wu-links ul { display: grid; gap: 0.45rem; }
.wu-links a { color: var(--wu-taupe-deep); border-bottom: 1px solid transparent; transition: border-color 150ms; font-size: 0.95rem; }
.wu-links a:hover { border-bottom-color: var(--wu-sand); color: var(--wu-charcoal); }
.wu-links__note { font-size: 0.8rem; color: var(--wu-taupe); }
@media (min-width: 861px) { .wu-links { grid-template-columns: repeat(3, 1fr); gap: 3rem; } }

/* Footer */
.wu-footer { padding: 2.5rem var(--wu-gutter); border-top: 1px solid var(--wu-cream-deep); font-size: 0.8rem; color: var(--wu-taupe); display: flex; flex-wrap: wrap; gap: 1rem 2rem; justify-content: space-between; }

/* Entrance motion: transform only, never opacity to zero */
.wu-rise { animation: wu-rise 900ms cubic-bezier(0.2, 0.7, 0.2, 1) both; }
@keyframes wu-rise { from { transform: translateY(14px); } to { transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) {
  .wu-rise { animation: none; }
  .wu-cta-line svg, .wu-cta-pill, .wu-header__nav a, .wu-header { transition: none; }
}

/* ---------- Film journey (scroll scrub) ---------- */
html { scroll-behavior: auto; }
body { margin: 0; }
.journey { position: relative; background: var(--wu-charcoal); color: var(--wu-white); }
/* `lvh` statt `dvh`: `dvh` folgt auf dem iPhone der ein- und ausfahrenden
   Adressleiste, und zwar mit Verzoegerung. In dem Moment ist die Buehne
   kuerzer als der Bildschirm und darunter blitzt der helle Seitengrund durch —
   der weisse Balken. `lvh` ist die konstante grosse Hoehe und deckt immer. */
.stage { position: sticky; top: 0; height: 100lvh; overflow: hidden; }
.stage__media { position: absolute; inset: 0; }
.stage__media video, .stage__poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.stage__media video { opacity: 0; }
.journey.is-painted .stage__media video { opacity: 1; }
.journey.is-painted .stage__poster { opacity: 0; }
.stage__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(59,55,51,0.55) 0%, rgba(59,55,51,0.15) 45%, rgba(59,55,51,0) 70%); pointer-events: none; }
.stage__progress { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: rgba(255,255,255,0.15); }
.stage__progress span { display: block; height: 100%; width: 100%; background: var(--wu-sand); transform-origin: left; transform: scaleX(0); }
.stage__route { position: absolute; right: var(--wu-gutter); bottom: 2rem; display: flex; gap: 0.25rem; }
.stage__route button { background: transparent; border: 0; color: var(--wu-cream); font-family: var(--wu-mono); font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase; padding: 0.6rem 0.75rem; min-height: 2.75rem; cursor: pointer; opacity: 0.6; border-bottom: 1px solid transparent; }
.stage__route button:hover, .stage__route button[aria-current="step"] { opacity: 1; border-bottom-color: var(--wu-sand); }
.stage__route button:focus-visible { outline: 2px solid var(--wu-sand); outline-offset: 2px; }
/* Muss die Buehnenhoehe exakt aufheben, also ebenfalls `lvh`. */
.story { position: relative; margin-top: -100lvh; }
/* `svh` statt `dvh`: die Kapitelhoehe geht in die Fortschrittsrechnung ein.
   Mit `dvh` wanderte sie waehrend der ein- und ausfahrenden Adressleiste, und
   der Film schwang vor und zurueck, obwohl der Finger nur in eine Richtung
   ging. `svh` steht fest. */
.chapter { min-height: 160svh; }
.chapter__pin { position: sticky; top: 0; min-height: 100svh; display: flex; align-items: center; padding: 0 var(--wu-gutter); }
.chapter--right .chapter__pin { justify-content: flex-end; }
.chapter__copy { max-width: 34rem; }
.chapter__kicker { font-family: var(--wu-mono); font-size: 0.7rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--wu-sand); margin: 0 0 1rem; }
.chapter__title { font-size: clamp(2.2rem, 5vw, 4.2rem); line-height: 1.0; font-weight: 300; letter-spacing: -0.015em; color: var(--wu-white); margin: 0; }
.chapter__body { margin: 1.25rem 0 0; font-size: clamp(1rem, 1.4vw, 1.2rem); line-height: 1.55; color: var(--wu-cream); max-width: 40ch; }
.chapter__tags { display: flex; gap: 0.5rem; flex-wrap: wrap; margin: 1.25rem 0 0; }
.chapter__tags li { font-family: var(--wu-mono); font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--wu-sand); border: 1px solid rgba(201,184,147,0.5); padding: 0.35rem 0.6rem; }
.journey.is-static .chapter { min-height: 100svh; }
@media (max-width: 860px) {
  .stage__route { right: 1rem; left: 1rem; bottom: 1.25rem; justify-content: center; }
  .stage__route button { padding: 0.5rem 0.4rem; font-size: 0.62rem; }
  .chapter__pin { align-items: flex-end; padding-bottom: 6rem; }
  .chapter--right .chapter__pin { justify-content: flex-start; }
  .stage__media::after { background: linear-gradient(0deg, rgba(59,55,51,0.7) 0%, rgba(59,55,51,0.2) 45%, rgba(59,55,51,0) 70%); }
}
@media (prefers-reduced-motion: reduce) { .stage__media video { display: none; } .stage__poster { opacity: 1 !important; } }

/* Sortiment: Bilder oeffnen sich gross. Die Vorschau ist auf 4:5 beschnitten,
   im Dialog laeuft das Bild unbeschnitten. */
.wu-zoom {
  display: block;
  position: relative;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  font: inherit;
  color: inherit;
}
.wu-zoom:focus-visible { outline: 2px solid var(--wu-sand-deep); outline-offset: 3px; }
.wu-zoom__hint {
  position: absolute;
  top: 0.6rem;
  right: 0.6rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 4px;
  background: rgba(59, 55, 51, 0.55);
  color: var(--wu-white);
  opacity: 0;
  transition: opacity 180ms ease;
  pointer-events: none;
}
.wu-zoom:hover .wu-zoom__hint,
.wu-zoom:focus-visible .wu-zoom__hint { opacity: 1; }
/* Ohne Hover gibt es kein Signal, dort bleibt der Hinweis stehen. */
@media (hover: none) { .wu-zoom__hint { opacity: 0.85; } }

.wu-lightbox {
  max-width: 100vw;
  max-height: 100dvh;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--wu-white);
}
.wu-lightbox::backdrop { background: rgba(31, 29, 27, 0.94); }
.wu-lightbox__figure {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  max-height: 100dvh;
}
.wu-lightbox img {
  display: block;
  max-width: min(94vw, 68rem);
  max-height: 82dvh;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 4px;
  background: var(--wu-charcoal);
}
.wu-lightbox__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1.5rem;
  width: min(94vw, 68rem);
  padding: 0 0.25rem 1rem;
  font-family: var(--wu-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--wu-cream);
}
.wu-lightbox__nav { display: flex; gap: 0.25rem; }
.wu-lightbox__nav button {
  padding: 0.55rem 0.85rem;
  border: 0;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.08);
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  cursor: pointer;
  min-height: 2.75rem;
}
.wu-lightbox__nav button:hover { background: rgba(255, 255, 255, 0.18); }
.wu-lightbox__nav button:focus-visible { outline: 2px solid var(--wu-sand); outline-offset: 2px; }
@media (max-width: 620px) {
  .wu-lightbox__bar { justify-content: center; text-align: center; }
}

/* Menue fuer schmale Bildschirme. Bis hierher gab es dort ueberhaupt keine
   Navigation: .wu-header__nav ist unter 861px ausgeblendet. */
.wu-burger {
  display: inline-flex; flex-direction: column; justify-content: center; gap: 5px;
  width: 2.75rem; height: 2.75rem; margin-right: -0.6rem;
  padding: 0; border: 0; background: none; color: inherit; cursor: pointer;
}
.wu-burger span {
  display: block; width: 22px; height: 1px; margin-left: auto; margin-right: auto;
  background: currentColor; transition: transform 220ms ease, opacity 180ms ease;
}
.wu-burger[aria-expanded="true"] span:first-child { transform: translateY(3px) rotate(45deg); }
.wu-burger[aria-expanded="true"] span:last-child { transform: translateY(-3px) rotate(-45deg); }
@media (min-width: 861px) { .wu-burger { display: none; } }

/* Solange das Menue offen ist, traegt der Kopf keine Mischung — sonst wuerde
   die Schrift gegen den dunklen Grund invertiert. */
.wu-header[data-menu="open"] {
  mix-blend-mode: normal;
  background: transparent;
  box-shadow: none;
  color: var(--wu-cream);
}
.wu-menu {
  position: fixed; inset: 0; z-index: 35;
  display: flex; flex-direction: column; justify-content: center;
  gap: 0.5rem; padding: 6rem var(--wu-gutter) 3rem;
  background: var(--wu-charcoal); color: var(--wu-cream);
  overflow-y: auto;
}
.wu-menu[hidden] { display: none; }
.wu-menu a {
  display: block; padding: 0.75rem 0;
  border-bottom: 1px solid rgba(232, 228, 215, 0.16);
  font-size: 1.5rem; font-weight: 300; letter-spacing: 0.01em;
  color: var(--wu-cream);
}
.wu-menu a:last-of-type { border-bottom: 0; }
.wu-menu__foot {
  margin-top: 2.5rem; font-family: var(--wu-mono); font-size: 0.72rem;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--wu-sand);
}
.wu-menu__foot a { display: inline; font-size: inherit; border: 0; padding: 0; color: inherit; }
body[data-menu-offen] { overflow: hidden; }

/* Stimmen als quadratische Karten in einem Slider auf dunklem Grund. Vorher
   standen die drei Zitate untereinander; als Karten haben sie gleiches Mass,
   unabhaengig davon wie lang der Text ist. */
.wu-voices { background: var(--wu-charcoal); color: var(--wu-cream); }
.wu-voices .wu-eyebrow { color: var(--wu-sand); margin-bottom: 0; }

.wu-voices__kopf {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap;
}

.wu-voices .wu-quotes {
  display: flex;
  gap: 1rem;
  margin: 2.5rem calc(-1 * var(--wu-gutter)) 0;
  padding: 0 var(--wu-gutter) 0.5rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--wu-gutter);
  scroll-behavior: smooth;
  scrollbar-width: thin;
  scrollbar-color: var(--wu-sand-deep) transparent;
}
.wu-voices .wu-quote {
  flex: 0 0 min(78vw, 23rem);
  aspect-ratio: 1;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 1.25rem;
  margin: 0;
  padding: 2rem;
  border: 0;
  border-radius: 4px;
  background: var(--wu-cream);
}
/* Zwei Klassen, sonst schlaegt die Grundregel mit (0,1,1) zurueck. */
.wu-voices .wu-quote blockquote {
  margin: 0;
  max-width: none;
  color: var(--wu-charcoal);
  font-size: 1.05rem;
  line-height: 1.45;
}
.wu-voices .wu-quote figcaption {
  margin: 0;
  font-family: var(--wu-mono);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--wu-taupe);
}
@media (min-width: 861px) {
  /* Bewusst so gross, dass die dritte Karte auch auf breiten Schirmen
     anschneidet — sonst stehen einfach drei Kacheln nebeneinander und der
     Slider gibt sich nicht als solcher zu erkennen. */
  .wu-voices .wu-quote { flex-basis: 28rem; padding: 2.75rem; }
  .wu-voices .wu-quote blockquote { font-size: 1.2rem; }
}

/* Pfeile: ohne sie ist ein Slider mit der Maus kaum bedienbar. */
.wu-slider__nav { display: flex; gap: 0.4rem; }
.wu-slider__nav button {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.75rem; height: 2.75rem;
  padding: 0; border-radius: 4px;
  border: 1px solid rgba(232, 228, 215, 0.28);
  background: none; color: var(--wu-cream);
  cursor: pointer;
  transition: background 180ms ease, border-color 180ms ease, opacity 180ms ease;
}
.wu-slider__nav button:hover { background: rgba(232, 228, 215, 0.12); border-color: rgba(232, 228, 215, 0.5); }
.wu-slider__nav button:focus-visible { outline: 2px solid var(--wu-sand); outline-offset: 2px; }
.wu-slider__nav button[disabled] { opacity: 0.3; cursor: default; }
@media (hover: none) { .wu-slider__nav { display: none; } }

/* Atelier-Galerie unter Werkstatt und Laden. Die Bilder stammen aus einer
   A3-Montage der Originalseite und wurden an den weissen Stegen zerlegt. */
.wu-galerie-block { margin-top: 4rem; }
.wu-galerie {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: repeat(2, 1fr);
  margin-top: 1.5rem;
}
.wu-galerie figure { margin: 0; }
.wu-galerie img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
  border-radius: 4px;
  background: var(--wu-cream);
}
.wu-bildnachweis {
  margin-top: 1.25rem;
  font-family: var(--wu-mono);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  /* `--wu-taupe` kam auf 4,2:1 und lag damit unter der Lesbarkeitsgrenze. */
  color: var(--wu-taupe-deep);
}
.wu-bildnachweis a { border-bottom: 1px solid var(--wu-sand); }
@media (min-width: 641px) { .wu-galerie { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1025px) { .wu-galerie { grid-template-columns: repeat(4, 1fr); gap: 1rem; } }

/* Filmabschnitt */
.wu-filmblock { background: var(--wu-cream); }
.wu-video { margin-top: 2.5rem; }
.wu-video video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  border-radius: 4px;
  background: var(--wu-charcoal);
}

/* Auf Telefonen keinen Blendmodus im Kopf. `mix-blend-mode` erzeugt einen
   eigenen Zeichenkontext, und iOS malt solche Elemente in die **scrollende**
   Ebene, statt sie am Fenster zu verankern — der Kopf rutscht dann mit, obwohl
   `position: fixed` gesetzt ist. Ohne Blendmodus bleibt er sicher oben.
   Lesbar bleibt die Schrift durch einen feinen Verlauf darunter. */
@media (max-width: 860px), (hover: none) and (pointer: coarse) {
  .wu-header {
    mix-blend-mode: normal;
    color: var(--wu-white);
    isolation: auto;
  }
  .wu-header::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(to bottom, rgba(31, 29, 27, 0.6), rgba(31, 29, 27, 0));
    transition: opacity 260ms ease;
  }
  .wu-header[data-solid="true"] { color: var(--wu-charcoal); }
  .wu-header[data-solid="true"]::before { opacity: 0; }
  .wu-header[data-menu="open"] { color: var(--wu-cream); }
  .wu-header[data-menu="open"]::before { opacity: 0; }
}

/* Die Bildmarke aus dem Logo als Maske: so nimmt sie die Schriftfarbe des
   Kopfes an — weiss ueber dem Film, Tinte auf hellem Grund — und der Verlauf
   der Urne bleibt erhalten. Die gelieferte Datei hatte weissen Grund statt
   Transparenz; das Weiss wurde in Alpha zurueckgerechnet. */
.wu-header__brand { display: inline-flex; align-items: center; gap: 0.55rem; }
.wu-header__mark {
  display: block;
  flex: 0 0 auto;
  width: 1.8rem;
  height: 1.75rem;
  /* Der Markenton, aus dem Originallogo gemessen (kraeftigster Ton im
     Schriftzug). Bewusst **nicht** `currentColor`: das Gold gehoert zur Marke.
     Kontrast 4,61:1 auf Anthrazit, 2,56:1 auf hellem Grund — fuer Logos gilt
     die Kontrastregel nicht, und die Originalseite zeigt es auf Weiss genauso. */
  background: #b6a37b;
  -webkit-mask: url("/assets/logo-urne.png") center / contain no-repeat;
  mask: url("/assets/logo-urne.png") center / contain no-repeat;
}
/* Der Schriftzug aus dem Originallogo, aus dem Startbild von wasserurne.ch
   vektorisiert. Nimmt `currentColor` an, damit er sich wie der frühere Text
   verhält: hell über dem Bild, anthrazit sobald der Kopf Hintergrund bekommt. */
.wu-header__schrift {
  display: block;
  flex: 0 0 auto;
  height: 2.1rem;
  width: auto;
  color: currentColor;
}

.wu-header__ig { display: inline-flex; align-items: center; padding: 0.25rem 0; }
.wu-header__ig svg { display: block; }
.wu-header__ig:hover { opacity: 0.75; }
@media (max-width: 860px) { .wu-header__mark { width: 1.6rem; height: 1.55rem; } }