/* =====================================================================
   szene.css · Scrollytelling-Hero und Abschnittsbewegung (Demos B2)

   Bauprinzip: Die Bühne (.sz-buehne) klebt, die Takte (.sz-takt) laufen
   darüber hinweg. Das ist reines CSS: Ohne JavaScript und bei reduzierter
   Bewegung bleibt die Bühne stehen und die drei Takte scrollen lesbar
   über das Bild. szene.js verwandelt die Bühne nur zusätzlich.

   Höhen hängen nie am Skript (kein CLS): --sz-top ist die Höhe des
   klebenden Kopfs und steht fest im style-Attribut der Sektion.

   Alles, was nur Dekor ist (.sz-deko), ist ohne Skript unsichtbar und
   für Vorleseprogramme ausgeblendet. Inhalt ist nie Dekor.
   ===================================================================== */

.sz-held {
  /* Höhe des klebenden Kopfs, je Demo im style-Attribut: --sz-top-d breit, --sz-top-m schmal */
  --sz-top: var(--sz-top-d, 0px);
  --sz-h: calc(100vh - var(--sz-top));
  position: relative;
  isolation: isolate;
  color: #fff;
  background: rgb(var(--hb-scrim));
}
@supports (height: 100svh) {
  .sz-held { --sz-h: calc(100svh - var(--sz-top)); }
}

/* ---------- Bühne ----------------------------------------------------- */

.sz-buehne {
  position: sticky;
  top: var(--sz-top);
  z-index: 0;
  height: var(--sz-h);
  min-height: 30rem;
  overflow: hidden;
  contain: paint;
}
.sz-ebene {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.sz-ebene img,
.sz-bild {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: var(--hb-fokus);
}
.sz-foto img { will-change: transform; }

/* Verlauf: Text liegt immer auf einem gezielten Verlauf */
.sz-schleier {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg,
      rgb(var(--hb-scrim) / .9) 0%,
      rgb(var(--hb-scrim) / .78) 38%,
      rgb(var(--hb-scrim) / .3) 68%,
      rgb(var(--hb-scrim) / .1) 100%),
    linear-gradient(0deg, rgb(var(--hb-scrim) / .6) 0%, rgb(var(--hb-scrim) / 0) 42%);
}

.sz-deko { opacity: 0; pointer-events: none; }
html[data-sz="an"] .sz-deko { opacity: 1; }

/* Riesige Schrift im Hintergrund: Kontur, nie Inhalt */
.sz-riese {
  position: absolute;
  left: 0;
  bottom: -.1em;
  margin: 0;
  font-family: var(--hb-schrift);
  font-weight: var(--hb-gewicht, 700);
  font-style: normal;
  font-size: clamp(6rem, 21vw, 24rem);
  line-height: .9;
  letter-spacing: -.02em;
  white-space: nowrap;
  color: transparent;
  -webkit-text-stroke: 1.5px rgb(255 255 255 / .34);
  pointer-events: none;
  user-select: none;
  will-change: transform;
}
.sz-riese span { display: inline-block; }

/* Stand der Szene unten rechts */
.sz-stand {
  position: absolute;
  left: clamp(1rem, 4vw, 2.5rem);
  bottom: clamp(1rem, 3vh, 1.8rem);
  z-index: 3;
  display: flex;
  align-items: center;
  gap: .8rem;
  margin: 0;
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgb(255 255 255 / .9);
  font-variant-numeric: tabular-nums;
}
.sz-stand i {
  position: relative;
  display: block;
  width: clamp(3.5rem, 8vw, 7rem);
  height: 2px;
  background: rgb(255 255 255 / .25);
  overflow: hidden;
}
.sz-stand i span {
  position: absolute;
  inset: 0;
  background: var(--hb-hervor);
  transform: scaleX(0);
  transform-origin: left;
}
.sz-hinweis {
  position: absolute;
  left: 50%;
  bottom: clamp(1rem, 3vh, 1.8rem);
  z-index: 3;
  margin: 0 0 0 -2.5rem;
  width: 5rem;
  text-align: center;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: rgb(255 255 255 / .8);
}
.sz-hinweis::after {
  content: "";
  display: block;
  width: 1px;
  height: 2.2rem;
  margin: .5rem auto 0;
  background: linear-gradient(rgb(255 255 255 / .9), rgb(255 255 255 / 0));
  transform-origin: top;
  animation: sz-hinweis 1.8s cubic-bezier(.6, 0, .2, 1) infinite;
}
@keyframes sz-hinweis { 0% { transform: scaleY(0); } 50% { transform: scaleY(1); } 100% { transform: scaleY(1) translateY(100%); opacity: 0; } }

.sz-held .hb-fiktiv {
  position: absolute;
  top: clamp(.9rem, 2.5vh, 1.5rem);
  right: clamp(1rem, 4vw, 2.5rem);
  z-index: 4;
}

/* ---------- Takte ----------------------------------------------------- */

.sz-takt {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  min-height: var(--sz-h);
}
.sz-takt--eins {
  margin-top: calc(-1 * max(var(--sz-h), 30rem));
  min-height: max(var(--sz-h), 30rem);
  align-items: flex-start;
}
.sz-in {
  width: min(100% - 2 * clamp(1rem, 4vw, 2.5rem), 78rem);
  margin-inline: auto;
}
.sz-takt--eins .sz-in { padding-block: clamp(3.5rem, 11vh, 7.5rem) 5rem; }
.sz-takt--eins .hb-text { max-width: 40rem; }

.sz-karte {
  max-width: 33rem;
  padding: clamp(1.4rem, 3vw, 2.4rem);
  border: 1px solid rgb(255 255 255 / .16);
  background: rgb(var(--hb-scrim) / .9);
  box-shadow: 0 40px 80px -40px rgb(0 0 0 / .7);
}
.sz-takt--rechts .sz-karte { margin-left: auto; }
.sz-nr {
  display: flex;
  align-items: center;
  gap: .8rem;
  margin: 0;
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--hb-hervor);
}
.sz-nr::before {
  content: "";
  flex: 0 0 2.2rem;
  height: 2px;
  background: currentColor;
  transform-origin: left;
}
.sz-karte h2 {
  margin: 1rem 0 0;
  font-family: var(--hb-schrift);
  font-weight: var(--hb-gewicht, 700);
  font-size: clamp(2rem, 1.3rem + 2.6vw, 3.6rem);
  line-height: 1.04;
  letter-spacing: -.01em;
  color: #fff;
  text-wrap: balance;
}
.sz-karte h2 em { font-style: var(--hb-em-stil, italic); color: var(--hb-hervor); }
.sz-karte > p:not(.sz-nr) {
  margin: 1.1rem 0 0;
  font-size: clamp(1rem, .96rem + .2vw, 1.12rem);
  line-height: 1.6;
  color: rgb(255 255 255 / .9);
}
.sz-fakten {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2.2rem;
  margin: 1.6rem 0 0;
  padding: 1.2rem 0 0;
  border-top: 1px solid rgb(255 255 255 / .18);
}
.sz-fakten div { margin: 0; }
.sz-fakten dt {
  font-family: var(--hb-schrift);
  font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.4rem);
  font-weight: var(--hb-gewicht, 700);
  line-height: 1;
  color: #fff;
  font-variant-numeric: tabular-nums;
}
.sz-fakten dd { margin: .35rem 0 0; font-size: .86rem; color: rgb(255 255 255 / .82); }
.sz-weiter {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  margin-top: 1.4rem;
  color: #fff;
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: var(--hb-hervor);
  text-underline-offset: 5px;
  text-decoration-thickness: 2px;
}
.sz-weiter:hover { color: var(--hb-hervor); }
.sz-weiter:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }

/* ---------- Wörter mit Maske (von szene.js gesetzt) ------------------- */

.sz-w {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  padding: 0 .04em .14em;
  margin: 0 -.04em -.14em;
}
.sz-w > span { display: inline-block; will-change: transform; }

/* Vorhang über Bildern (von szene.js eingesetzt, nur Transform) */
.sz-vorhang {
  position: absolute;
  inset: -1px;
  z-index: 2;
  background: var(--sz-vorhang-farbe, #111);
  transform: scaleY(0);
  transform-origin: bottom;
  pointer-events: none;
}
.sz-mass-rel { position: relative; }

/* Laufband zwischen Abschnitten (von szene.js eingesetzt) */
.sz-band {
  overflow: hidden;
  padding-block: clamp(1rem, 3vw, 2rem);
  pointer-events: none;
  user-select: none;
}
.sz-band p {
  margin: 0;
  white-space: nowrap;
  font-family: var(--anzeige, inherit);
  font-size: clamp(3rem, 9vw, 8.5rem);
  line-height: 1;
  font-weight: 700;
  color: transparent;
  -webkit-text-stroke: 1.2px var(--sz-band-farbe, currentColor);
  opacity: .5;
  will-change: transform;
}

/* Linie an Listen (von szene.js eingesetzt) */
.sz-linie {
  position: absolute;
  left: -1.1rem;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--sz-linie-farbe, currentColor);
  transform-origin: top;
  pointer-events: none;
}
@media (max-width: 47.99rem) { .sz-linie { left: -.65rem; } }

/* Waagrechte Bahn (nur breit, nur mit Skript) */
.sz-quer-an { display: flex !important; flex-wrap: nowrap !important; gap: 1.5rem !important; width: max-content; }
.sz-quer-an { padding-block: 1.2rem 1.6rem; }
.sz-quer-an > * {
  display: flex !important;
  flex-direction: column;
  gap: .7rem;
  width: min(24rem, 32vw) !important;
  flex: none !important;
  padding: 1.8rem 1.6rem !important;
  border: 1px solid var(--linie, rgb(0 0 0 / .15)) !important;
  background: var(--feld-grund, #fff);
  box-shadow: 0 30px 60px -40px rgb(0 0 0 / .45);
}
.sz-quer-an > * > * { grid-column: auto !important; grid-row: auto !important; }
.sz-quer-rahmen { overflow: hidden; }

/* ---------- Schmal ---------------------------------------------------- */

@media (max-width: 47.99rem) {
  .sz-held { --sz-top: var(--sz-top-m, var(--sz-top-d, 0px)); }
  .sz-ebene img, .sz-bild { object-position: var(--hb-fokus-m, var(--hb-fokus)); }
  .sz-schleier {
    background: linear-gradient(180deg,
      rgb(var(--hb-scrim) / .35) 0%,
      rgb(var(--hb-scrim) / .7) 22%,
      rgb(var(--hb-scrim) / .88) 48%,
      rgb(var(--hb-scrim) / .94) 100%);
  }
  .sz-takt { min-height: calc(var(--sz-h) * .9); }
  .sz-takt--eins { min-height: max(var(--sz-h), 30rem); }
  .sz-takt--eins .sz-in { padding-block: 4.2rem 4.5rem; }
  .sz-held .hb-fiktiv { left: clamp(1rem, 4vw, 2.5rem); right: auto; }
  .sz-karte { padding: 1.3rem 1.2rem; background: rgb(var(--hb-scrim) / .9); }
  .sz-fakten { gap: .9rem 1.6rem; }
  .sz-hinweis { display: none; }
  .sz-stand { font-size: .68rem; }
}

/* ---------- Ruhig: Bühne steht, Takte scrollen, nichts bewegt sich ---- */

@media (prefers-reduced-motion: reduce) {
  .sz-hinweis::after { animation: none; }
  .sz-foto img { will-change: auto; }
}

@media print {
  .sz-held { background: none; color: #000; }
  .sz-buehne { display: none; }
  .sz-takt, .sz-takt--eins { margin: 0; min-height: 0; display: block; }
  .sz-karte { background: none; border: 0; box-shadow: none; padding: 0 0 1rem; }
  .sz-karte h2, .sz-karte > p, .sz-fakten dt, .sz-fakten dd, .sz-nr { color: #000; }
}

/* =====================================================================
   Rezepte je Branche (Dekor der Bühne)
   ===================================================================== */

/* ---------- Architekt: Planpapier, Grundriss, Fenster in den Raum ----- */
.sz-papier { background: #F4F3F0; }
.sz-plan {
  position: absolute;
  right: 5vw;
  top: 50%;
  width: min(46vw, 44rem);
  height: auto;
  margin-top: calc(min(46vw, 44rem) * -.36);
  overflow: visible;
}
.sz-plan path, .sz-plan rect {
  fill: none;
  stroke: #17181A;
  stroke-width: 3;
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
  stroke-linecap: square;
}
.sz-plan .neu { stroke: #C02617; stroke-width: 6; }
.sz-plan text { fill: #56585C; font: 600 15px/1 Helvetica, Arial, sans-serif; letter-spacing: .02em; }
.sz-plan .titel { fill: #C02617; font-size: 13px; letter-spacing: .16em; }
.sz-fenster { transform-origin: 72% 46%; }
.sz-held[data-sz-held="architekt"] .sz-riese { mix-blend-mode: difference; -webkit-text-stroke-color: rgb(255 255 255 / .5); }

/* ---------- Bäckerei: Nacht, Glut, Mehlstaub, Uhr, Abzüge ------------- */
.sz-nacht { background: rgb(12 10 26); }
.sz-glut {
  position: absolute;
  left: 58%;
  top: 46%;
  width: 80vmax;
  height: 80vmax;
  margin: -40vmax 0 0 -40vmax;
  border-radius: 50%;
  background: radial-gradient(circle, rgb(255 160 70 / .55) 0%, rgb(255 115 35 / .26) 34%, rgb(255 90 20 / 0) 68%);
  mix-blend-mode: screen;
}
.sz-staub { position: absolute; inset: 0; width: 100%; height: 100%; color: rgb(255 245 228); }
.sz-blatt {
  position: absolute;
  right: 7vw;
  top: 10%;
  width: min(22vw, 19rem);
  margin: 0;
  padding: .55rem .55rem 2.2rem;
  background: #fbf6ee;
  box-shadow: 0 40px 70px -30px rgb(0 0 0 / .75);
}
.sz-blatt img { display: block; width: 100%; aspect-ratio: 4 / 5; height: auto; object-fit: cover; }
.sz-blatt figcaption { position: absolute; left: .7rem; bottom: .6rem; font: 600 .78rem/1.2 var(--hb-schrift); color: #3a2a1c; }
.sz-blatt--2 { right: 19vw; top: 22%; }
.sz-uhr {
  position: absolute;
  right: 6vw;
  bottom: 9%;
  display: flex;
  margin: 0;
  font-family: var(--hb-schrift);
  font-weight: 700;
  font-size: clamp(4rem, 11vw, 10.5rem);
  line-height: 1;
  color: var(--hb-hervor);
  font-variant-numeric: tabular-nums;
  text-shadow: 0 10px 40px rgb(0 0 0 / .5);
}
.sz-z { display: inline-block; height: 1em; overflow: hidden; }
.sz-z i { display: block; font-style: normal; transition: transform .5s cubic-bezier(.2, .8, .2, 1); }
.sz-dp { padding: 0 .04em; }

/* ---------- Fitness: Neun, Balken, Zähler, Puls, Schrägwisch ---------- */
.sz-foto2 > div { position: absolute; inset: 0; overflow: hidden; }
.sz-riese--neun {
  left: auto;
  right: 3vw;
  top: -6%;
  bottom: auto;
  font-size: min(92vh, 54vw);
  line-height: 1;
  -webkit-text-stroke: 2px var(--hb-hervor);
  opacity: .6;
}
.sz-balken { position: absolute; inset: -20% -10%; transform: rotate(-11deg); }
.sz-balken i {
  position: absolute;
  left: 0;
  width: 100%;
  height: clamp(12px, 2.2vh, 24px);
  background: var(--hb-hervor);
  transform-origin: 0 50%;
}
.sz-balken i:nth-child(1) { top: 36%; }
.sz-balken i:nth-child(2) { top: 50%; height: clamp(30px, 6vh, 64px); }
.sz-balken i:nth-child(3) { top: 66%; }
.sz-zahl {
  position: absolute;
  right: 6vw;
  bottom: 13%;
  margin: 0;
  font-family: var(--hb-schrift);
  font-size: clamp(6rem, 17vw, 16rem);
  line-height: .85;
  color: var(--hb-hervor);
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.sz-zahl span { font-size: .4em; }
.sz-zahl small { display: block; margin-top: .6rem; font: 700 .8rem/1.3 system-ui, sans-serif; letter-spacing: .18em; text-transform: uppercase; color: #fff; }
.sz-puls { position: absolute; left: 0; bottom: 30%; width: 100%; height: 14vh; overflow: visible; }
.sz-puls path { fill: none; stroke: var(--hb-hervor); stroke-width: 3; stroke-dasharray: 1; stroke-dashoffset: 0; vector-effect: non-scaling-stroke; stroke-linejoin: round; }

/* ---------- Immobilien: Kinobalken, Schiebetür, Exposé --------------- */
.sz-halb { position: absolute; top: 0; bottom: 0; width: 50%; overflow: hidden; }
.sz-halb--l { left: 0; box-shadow: 1px 0 0 rgb(255 255 255 / .35); }
.sz-halb--r { left: 50%; }
.sz-halb img { position: absolute; top: 0; width: 200%; height: 100%; max-width: none; object-fit: cover; }
.sz-halb--l img { left: 0; }
.sz-halb--r img { left: -100%; }
.sz-kasch { position: absolute; left: 0; right: 0; height: 10vh; background: #0b0b0b; z-index: 2; }
.sz-kasch--o { top: 0; transform-origin: top; }
.sz-kasch--u { bottom: 0; transform-origin: bottom; }
.sz-riese--kursiv { font-style: italic; }
.sz-expose {
  position: absolute;
  right: 5vw;
  top: 16%;
  width: min(20rem, 30vw);
  padding: 1.3rem 1.4rem 1.1rem;
  background: rgb(250 248 243);
  color: #171614;
  box-shadow: 0 40px 80px -30px rgb(0 0 0 / .7);
  font-size: .86rem;
  line-height: 1.35;
}
.sz-expose p { margin: 0 0 .9rem; font-size: .7rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: #6b5a2e; }
.sz-expose dl { margin: 0; display: grid; gap: .7rem; }
.sz-expose dl div { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; border-bottom: 1px solid rgb(0 0 0 / .1); padding-bottom: .55rem; }
.sz-expose dt { color: #4a4740; }
.sz-expose dd { margin: 0; font-family: var(--hb-schrift); font-size: 1.7rem; line-height: 1; font-variant-numeric: tabular-nums; }

/* ---------- Reinigung: Abend, Protokoll, Staub, Glanz ---------------- */
.sz-held[data-sz-held="reinigung"] .sz-nacht { background: rgb(8 26 33); }
.sz-held[data-sz-held="reinigung"] .sz-staub { color: rgb(214 204 184); }
.sz-glanz {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 45%;
  background: linear-gradient(105deg, rgb(255 255 255 / 0) 25%, rgb(255 255 255 / .38) 50%, rgb(255 255 255 / 0) 75%);
}
.sz-protokoll {
  position: absolute;
  right: 6vw;
  top: 12%;
  width: min(22rem, 31vw);
  padding: 1.3rem 1.4rem 1.7rem;
  border-radius: 14px;
  background: #fff;
  color: #0f2a33;
  box-shadow: 0 40px 80px -30px rgb(0 0 0 / .65);
  font-size: .9rem;
  line-height: 1.35;
}
.sz-protokoll p { margin: 0; font-weight: 800; font-size: 1rem; }
.sz-protokoll p small { display: block; margin-top: .2rem; font-weight: 500; font-size: .78rem; color: #4b6870; }
.sz-protokoll ul { margin: .9rem 0 0; padding: 0; list-style: none; }
.sz-protokoll li { display: flex; align-items: center; gap: .7rem; padding: .5rem 0; border-bottom: 1px solid #e2ecec; }
.sz-protokoll svg { flex: none; width: 22px; height: 22px; padding: 4px; border-radius: 50%; background: #19b5bd; color: #fff; }
.sz-stempel {
  position: absolute;
  right: 1rem;
  bottom: -1.1rem;
  padding: .35rem .75rem;
  border: 3px solid #0f7d84;
  border-radius: 6px;
  background: rgb(255 255 255 / .94);
  color: #0f6d73;
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

@media (max-width: 47.99rem) {
  .sz-plan { left: 6vw; right: auto; top: 5%; width: 88vw; margin-top: 0; }
  .sz-fenster { transform-origin: 50% 30%; }
  .sz-blatt { width: 40vw; right: 5vw; top: 3%; padding: .35rem .35rem 1.4rem; }
  .sz-blatt--2 { right: 30vw; top: 7%; }
  .sz-blatt figcaption { display: none; }
  .sz-uhr { right: 5vw; bottom: 7%; font-size: 3.6rem; }
  .sz-riese--neun { right: -8vw; top: 2%; font-size: 92vw; opacity: .4; }
  .sz-zahl { right: 5vw; bottom: 9%; font-size: 5.5rem; }
  .sz-puls { bottom: 26%; height: 9vh; }
  .sz-expose { right: 4vw; top: 3%; width: 15rem; padding: .9rem 1rem .8rem; font-size: .76rem; }
  .sz-expose dd { font-size: 1.25rem; }
  .sz-protokoll { right: 4vw; top: 3%; width: 15.5rem; padding: .9rem 1rem 1.3rem; font-size: .78rem; }
  .sz-protokoll li { padding: .3rem 0; }
  .sz-protokoll svg { width: 18px; height: 18px; padding: 3px; }
}

/* Lange Überschrift (Reinigung): breiter setzen, damit der Knopf über dem Falz bleibt */
.sz-held[data-sz-held="reinigung"] .hb-titel { max-width: 17ch; font-size: clamp(2.3rem, 1.2rem + 3.4vw, 4.4rem); }
.sz-zahl b { display: inline-block; width: 1.12em; text-align: right; }