/* NūrGlow Institut — gemeinsames Fundament aller Design-Direktionen.
   Farbwelt: Porzellanlicht (verbindlich, _brand/CI-FARBWELT.md). Kein reines Schwarz. */

:root {
  --paper: #FCF9F3;
  --ivory: #F6EFE3;
  --sand: #EBDDC7;
  --beige: #DCC8A9;
  --ink: #2C2017;
  --accent: #6A4A34;
  --accent-deep: #48301F;
  --gilt: #B0925E;
  --line: #E7DAC5;
  --muted: #857258;

  /* Edle Akzente — abgeleitet, für Linien und zarte Tönungen statt dunkler Füllflächen */
  --hairline: color-mix(in srgb, var(--gilt), transparent 55%);
  --hairline-ink: color-mix(in srgb, var(--accent), transparent 78%);
  --tint: color-mix(in srgb, var(--sand), var(--paper) 55%);
  --tint-warm: color-mix(in srgb, var(--beige), var(--paper) 62%);
  --glass: color-mix(in srgb, var(--paper), transparent 22%);
}

/* ══ AKZENT-REGEL (verbindlich für alle Direktionen) ══
   Flächen tragen NUR helle Töne: paper · ivory · sand · beige (und color-mix daraus).
   ink · accent · accent-deep sind ausschließlich Textfarben, 1px-Haarlinien, kleine Marker.
   Sie füllen NIE Buttons, Karten, Sektionen oder andere tragende Elemente.
   Der edelste Akzent ist gilt — als Haarlinie, Punkt oder Trenner, nie als Fläche.
   Tiefe entsteht über Weißraum, Typo-Hierarchie, feine Linien und weiche warme Schatten. */

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
::selection { background: var(--beige); color: var(--accent-deep); }

/* iOS-Zoom-Schutz: Eingaben nie unter 16px */
@media (max-width: 640px) {
  input, textarea, select { font-size: 16px; }
}

/* Bild-Platzhalter — markiert, wo die Imagen-Assets der Bildwelt landen (IDs aus BILDWELT-IMAGEN-PROMPTS.md) */
.ph {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(120% 90% at 30% 20%, rgba(252,249,243,.9), rgba(252,249,243,0) 60%),
    linear-gradient(160deg, var(--ivory) 0%, var(--sand) 46%, var(--beige) 100%);
}
/* ══ BILDWELT ══
   Echte Fotografien (Master in _brand/bildwelt/master, Web-Derivate in assets/foto).
   Jede Regel nennt zuerst WebP als Basis, dann image-set mit AVIF — Browser ohne image-set
   ignorieren die zweite Deklaration und bekommen WebP. Bild-IDs bleiben unverändert,
   die Seiten müssen dafür nicht angefasst werden. */
.ph[data-bild^="RAUM-01"]  { background-image: url("foto/raum-01-1600.webp");
  background-image: image-set(url("foto/raum-01-1600.avif") type("image/avif"), url("foto/raum-01-1600.webp") type("image/webp")); }
.ph[data-bild^="RAUM-02"]  { background-image: url("foto/raum-02-1600.webp");
  background-image: image-set(url("foto/raum-02-1600.avif") type("image/avif"), url("foto/raum-02-1600.webp") type("image/webp")); }
.ph[data-bild^="RAUM-03"]  { background-image: url("foto/raum-03-1600.webp");
  background-image: image-set(url("foto/raum-03-1600.avif") type("image/avif"), url("foto/raum-03-1600.webp") type("image/webp")); }
.ph[data-bild^="GERAET-01"] { background-image: url("foto/geraet-01-1440.webp");
  background-image: image-set(url("foto/geraet-01-1440.avif") type("image/avif"), url("foto/geraet-01-1440.webp") type("image/webp")); }
.ph[data-bild^="GEMEINSCHAFT-01"] { background-image: url("foto/gemeinschaft-01-1600.webp");
  background-image: image-set(url("foto/gemeinschaft-01-1600.avif") type("image/avif"), url("foto/gemeinschaft-01-1600.webp") type("image/webp")); }
.ph[data-bild^="RAUM-04"]  { background-image: url("foto/raum-04-1600.webp");
  background-image: image-set(url("foto/raum-04-1600.avif") type("image/avif"), url("foto/raum-04-1600.webp") type("image/webp")); }
.ph[data-bild^="BEH-01"]   { background-image: url("foto/beh-01-1600.webp");
  background-image: image-set(url("foto/beh-01-1600.avif") type("image/avif"), url("foto/beh-01-1600.webp") type("image/webp")); }
.ph[data-bild^="BEH-03"]   { background-image: url("foto/beh-03-1600.webp");
  background-image: image-set(url("foto/beh-03-1600.avif") type("image/avif"), url("foto/beh-03-1600.webp") type("image/webp")); }
.ph[data-bild^="BEH-04"]   { background-image: url("foto/beh-04-1600.webp");
  background-image: image-set(url("foto/beh-04-1600.avif") type("image/avif"), url("foto/beh-04-1600.webp") type("image/webp")); }
.ph[data-bild^="STILL-03"] { background-image: url("foto/still-03-1600.webp");
  background-image: image-set(url("foto/still-03-1600.avif") type("image/avif"), url("foto/still-03-1600.webp") type("image/webp")); }
.ph[data-bild^="LICHT-01"] { background-image: url("foto/licht-01-1600.webp");
  background-image: image-set(url("foto/licht-01-1600.avif") type("image/avif"), url("foto/licht-01-1600.webp") type("image/webp")); }
.ph[data-bild^="LICHT-02"] { background-image: url("foto/licht-02-1600.webp");
  background-image: image-set(url("foto/licht-02-1600.avif") type("image/avif"), url("foto/licht-02-1600.webp") type("image/webp")); }
.ph[data-bild^="LICHT-03"] { background-image: url("foto/licht-03-1600.webp");
  background-image: image-set(url("foto/licht-03-1600.avif") type("image/avif"), url("foto/licht-03-1600.webp") type("image/webp")); }
.ph[data-bild^="LICHT-04"] { background-image: url("foto/licht-04-1600.webp");
  background-image: image-set(url("foto/licht-04-1600.avif") type("image/avif"), url("foto/licht-04-1600.webp") type("image/webp")); }

.ph[data-bild^="BEH-02"]   { background-image: url("foto/beh-02-1600.webp");
  background-image: image-set(url("foto/beh-02-1600.avif") type("image/avif"), url("foto/beh-02-1600.webp") type("image/webp")); }
.ph[data-bild^="STILL-01"] { background-image: url("foto/still-01-1600.webp");
  background-image: image-set(url("foto/still-01-1600.avif") type("image/avif"), url("foto/still-01-1600.webp") type("image/webp")); }
.ph[data-bild^="STILL-02"] { background-image: url("foto/still-02-1600.webp");
  background-image: image-set(url("foto/still-02-1600.avif") type("image/avif"), url("foto/still-02-1600.webp") type("image/webp")); }
.ph[data-bild^="STILL-04"] { background-image: url("foto/still-04-1600.webp");
  background-image: image-set(url("foto/still-04-1600.avif") type("image/avif"), url("foto/still-04-1600.webp") type("image/webp")); }

/* Triptychon „Der Lauf des Lichts" — I Stein · II Leinen · III Haut */
.ph[data-bild^="FLUSS-01"] { background-image: url("foto/fluss-01-1600.webp");
  background-image: image-set(url("foto/fluss-01-1600.avif") type("image/avif"), url("foto/fluss-01-1600.webp") type("image/webp")); }
.ph[data-bild^="FLUSS-02"] { background-image: url("foto/fluss-02-1600.webp");
  background-image: image-set(url("foto/fluss-02-1600.avif") type("image/avif"), url("foto/fluss-02-1600.webp") type("image/webp")); }
.ph[data-bild^="FLUSS-03"] { background-image: url("foto/fluss-03-1600.webp");
  background-image: image-set(url("foto/fluss-03-1600.avif") type("image/avif"), url("foto/fluss-03-1600.webp") type("image/webp")); }

/* Neue Motive: Academy · Ankunft · Produkt · Ruhe · Story */
.ph[data-bild^="AKADEMIE-01"] { background-image: url("foto/akademie-01-1600.webp");
  background-image: image-set(url("foto/akademie-01-1600.avif") type("image/avif"), url("foto/akademie-01-1600.webp") type("image/webp")); }
.ph[data-bild^="AKADEMIE-02"] { background-image: url("foto/akademie-02-1600.webp");
  background-image: image-set(url("foto/akademie-02-1600.avif") type("image/avif"), url("foto/akademie-02-1600.webp") type("image/webp")); }
.ph[data-bild^="AKADEMIE-03"] { background-image: url("foto/akademie-03-1600.webp");
  background-image: image-set(url("foto/akademie-03-1600.avif") type("image/avif"), url("foto/akademie-03-1600.webp") type("image/webp")); }
.ph[data-bild^="AKADEMIE-04"] { background-image: url("foto/akademie-04-1600.webp");
  background-image: image-set(url("foto/akademie-04-1600.avif") type("image/avif"), url("foto/akademie-04-1600.webp") type("image/webp")); }
.ph[data-bild^="AKADEMIE-05"] { background-image: url("foto/akademie-05-1600.webp");
  background-image: image-set(url("foto/akademie-05-1600.avif") type("image/avif"), url("foto/akademie-05-1600.webp") type("image/webp")); }
.ph[data-bild^="AKADEMIE-06"] { background-image: url("foto/akademie-06-1600.webp");
  background-image: image-set(url("foto/akademie-06-1600.avif") type("image/avif"), url("foto/akademie-06-1600.webp") type("image/webp")); }
.ph[data-bild^="AKADEMIE-07"] { background-image: url("foto/akademie-07-1600.webp");
  background-image: image-set(url("foto/akademie-07-1600.avif") type("image/avif"), url("foto/akademie-07-1600.webp") type("image/webp")); }
.ph[data-bild^="AKADEMIE-08"] { background-image: url("foto/akademie-08-1600.webp");
  background-image: image-set(url("foto/akademie-08-1600.avif") type("image/avif"), url("foto/akademie-08-1600.webp") type("image/webp")); }
.ph[data-bild^="AKADEMIE-09"] { background-image: url("foto/akademie-09-1600.webp");
  background-image: image-set(url("foto/akademie-09-1600.avif") type("image/avif"), url("foto/akademie-09-1600.webp") type("image/webp")); }
.ph[data-bild^="AKADEMIE-10"] { background-image: url("foto/akademie-10-1600.webp");
  background-image: image-set(url("foto/akademie-10-1600.avif") type("image/avif"), url("foto/akademie-10-1600.webp") type("image/webp")); }
.ph[data-bild^="AKADEMIE-11"] { background-image: url("foto/akademie-11-1600.webp");
  background-image: image-set(url("foto/akademie-11-1600.avif") type("image/avif"), url("foto/akademie-11-1600.webp") type("image/webp")); }
.ph[data-bild^="AKADEMIE-12"] { background-image: url("foto/akademie-12-1600.webp");
  background-image: image-set(url("foto/akademie-12-1600.avif") type("image/avif"), url("foto/akademie-12-1600.webp") type("image/webp")); }
.ph[data-bild^="AKADEMIE-13"] { background-image: url("foto/akademie-13-1600.webp");
  background-image: image-set(url("foto/akademie-13-1600.avif") type("image/avif"), url("foto/akademie-13-1600.webp") type("image/webp")); }
.ph[data-bild^="AKADEMIE-14"] { background-image: url("foto/akademie-14-1600.webp");
  background-image: image-set(url("foto/akademie-14-1600.avif") type("image/avif"), url("foto/akademie-14-1600.webp") type("image/webp")); }
.ph[data-bild^="SCHWELLE-01"] { background-image: url("foto/schwelle-01-1600.webp");
  background-image: image-set(url("foto/schwelle-01-1600.avif") type("image/avif"), url("foto/schwelle-01-1600.webp") type("image/webp")); }
.ph[data-bild^="PRODUKT-01"] { background-image: url("foto/produkt-01-1600.webp");
  background-image: image-set(url("foto/produkt-01-1600.avif") type("image/avif"), url("foto/produkt-01-1600.webp") type("image/webp")); }
.ph[data-bild^="COACHING-01"] { background-image: url("foto/coaching-01-1600.webp");
  background-image: image-set(url("foto/coaching-01-1600.avif") type("image/avif"), url("foto/coaching-01-1600.webp") type("image/webp")); }
.ph[data-bild^="RUHE-01"] { background-image: url("foto/ruhe-01-1600.webp");
  background-image: image-set(url("foto/ruhe-01-1600.avif") type("image/avif"), url("foto/ruhe-01-1600.webp") type("image/webp")); }
.ph[data-bild^="STORY-01"] { background-image: url("foto/story-01-1600.webp");
  background-image: image-set(url("foto/story-01-1600.avif") type("image/avif"), url("foto/story-01-1600.webp") type("image/webp")); }
/* Hero-Kandidaten — HERO-04 „Das Gefäß" · HERO-02 „Der Einfall" (roh und auf Palette gezogen).
   Vergleich unter stille-hero.html?bild=a|b|bh */
.ph[data-bild^="HERO-04"] { background-image: url("foto/hero-04-1600.webp");
  background-image: image-set(url("foto/hero-04-1600.avif") type("image/avif"), url("foto/hero-04-1600.webp") type("image/webp")); }
.ph[data-bild^="HERO-02-hell"] { background-image: url("foto/hero-02-hell-1600.webp");
  background-image: image-set(url("foto/hero-02-hell-1600.avif") type("image/avif"), url("foto/hero-02-hell-1600.webp") type("image/webp")); }
.ph[data-bild^="HERO-02"] { background-image: url("foto/hero-02-1600.webp");
  background-image: image-set(url("foto/hero-02-1600.avif") type("image/avif"), url("foto/hero-02-1600.webp") type("image/webp")); }

/* Materialflächen (Direktion „Material") */
.ph[data-bild^="Naturstein"] { background-image: url("art/still-01.svg"); }
.ph[data-bild^="Leinen"]     { background-image: url("art/still-03.svg"); }
.ph[data-bild^="Eiche"]      { background-image: url("art/beh-03.svg"); }
.ph[data-bild^="Porzellan"]  { background-image: url("art/still-02.svg"); }

.ph[data-bild] {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Bild-ID als Ecknotiz — nur dort, wo noch eine Studie den Platz hält.
   Wo ein echtes Foto liegt, entfällt sie; die Seiten selbst müssen dafür nicht angefasst werden. */
/* Alle Slots tragen jetzt echte Fotografien — die Ecknotiz entfällt durchgehend. */
.ph[data-bild]::after { content: none; }

.ph::after {
  content: attr(data-bild);
  position: absolute;
  right: .7rem; bottom: .55rem;
  font-family: 'Jost', sans-serif;
  font-size: .5rem;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--accent), transparent 62%);
  white-space: nowrap;
  pointer-events: none;
}
/* Ehemals dunkle Variante — jetzt ein wärmerer, tieferer Sandton statt Espresso-Fläche */
.ph--warm {
  background:
    radial-gradient(120% 90% at 32% 18%, rgba(252,249,243,.75), rgba(252,249,243,0) 58%),
    linear-gradient(165deg, var(--sand) 0%, var(--beige) 62%, color-mix(in srgb, var(--beige), var(--gilt) 26%) 100%);
}
.ph--warm::after { color: color-mix(in srgb, var(--accent), transparent 25%); }

/* Scroll-Reveal (IntersectionObserver setzt .on) */
.rv {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .9s cubic-bezier(.22,.61,.36,1), transform .9s cubic-bezier(.22,.61,.36,1);
}
.rv.on { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .rv { opacity: 1; transform: none; transition: none; }
}