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

   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 .buehne-demo {
  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-held .sz-in { box-sizing: border-box; width: 100%; max-width: var(--mass, 78rem); padding-inline: var(--rand, 1.25rem); }

.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 .buehne-demo { 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; }
}

/* =====================================================================
   Demos A: der Hero-Satz (Takt eins) behält die Klassen der Demos A
   (buehne-marke, h1, buehne-lauf, buehne-tun, buehne-beleg aus hero.css).
   ===================================================================== */

.sz-held { --hz-akzent: var(--hb-hervor); }
.sz-held .buehne-demo { z-index: 4; }
.sz-takt--eins .sz-in.buehne-satz { padding-block: clamp(3.2rem, 11vh, 7rem) 5rem; }
.sz-held h1 {
  max-width: 12ch;
  margin: 1rem 0 0;
  font-size: clamp(2.55rem, 1.05rem + 5.7vw, 6.4rem);
  line-height: .98;
  letter-spacing: -.01em;
  color: #fff;
  text-wrap: balance;
  text-shadow: 0 1px 28px rgb(0 0 0 / .25);
}
.sz-held h1 .akzent { color: var(--hb-hervor); }
.sz-held[data-sz-held="handwerk"] h1,
.sz-held[data-sz-held="coiffeur"] h1 { max-width: 11ch; }
.sz-held[data-sz-held="restaurant"] h1 { max-width: 11ch; font-size: clamp(2.4rem, 1rem + 5vw, 5.5rem); }
.sz-held .sz-karte h2 { font-family: var(--hb-schrift); font-weight: var(--hb-gewicht, 600); }
.sz-tint { background: rgb(var(--hb-scrim)); }
.sz-leinwand { position: absolute; inset: 0; width: 100%; height: 100%; color: var(--sz-leinwand, #fff); }

/* ---------- Ziffern (Uhr) --------------------------------------------- */
.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; }

/* ---------- Etikett auf Dekor-Karten ---------------------------------- */
.sz-etikett {
  margin: 0;
  font: 700 .72rem/1.3 var(--grotesk, system-ui, sans-serif);
  letter-spacing: .18em;
  text-transform: uppercase;
}

/* ---------- Praxis: Ring 45 Minuten, Befund, Terminwoche -------------- */
.sz-held[data-sz-held="praxis"] { --sz-leinwand: rgb(186 236 214); --sz-gruen: #2f6b52; }
.sz-ring {
  position: absolute;
  right: 9vw;
  top: 50%;
  width: min(30vw, 26rem);
  aspect-ratio: 1;
  margin-top: calc(min(30vw, 26rem) * -.5);
}
.sz-ring svg { display: block; width: 100%; height: 100%; transform: rotate(-90deg); }
.sz-ring circle { fill: none; stroke-width: 5; }
.sz-ring-grund { stroke: rgb(255 255 255 / .18); }
.sz-ring-lauf { stroke: var(--hb-hervor); stroke-dasharray: 1; stroke-dashoffset: 0; stroke-linecap: round; }
.sz-ring p {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 0;
  text-align: center;
  color: #fff;
}
.sz-ring b { font-family: var(--hb-schrift); font-size: clamp(4rem, 9vw, 8.5rem); font-weight: 600; line-height: 1; font-variant-numeric: tabular-nums; }
.sz-ring span { margin-top: .6rem; font: 700 .74rem/1.4 var(--grotesk); letter-spacing: .16em; text-transform: uppercase; color: rgb(255 255 255 / .85); }
.sz-befund, .sz-kalender {
  position: absolute;
  right: 7vw;
  top: 50%;
  width: min(27rem, 34vw);
  padding: 1.3rem 1.4rem 1.2rem;
  border-radius: 10px;
  background: #fbfaf7;
  color: #14261d;
  box-shadow: 0 40px 80px -30px rgb(0 0 0 / .7);
}
.sz-befund { margin-top: -11rem; }
.sz-kalender { margin-top: -9rem; }
.sz-befund .sz-etikett, .sz-kalender .sz-etikett { color: var(--sz-gruen); }
.sz-befund svg { display: block; width: 100%; height: auto; margin-top: .9rem; overflow: visible; }
.sz-befund .z { fill: none; stroke: var(--sz-gruen); stroke-width: 2; stroke-dasharray: 1; stroke-dashoffset: 0; }
.sz-befund .f { stroke: none; }
.sz-befund .f.warten { fill: #e3b23c; }
.sz-befund .f.jetzt { fill: #d9662a; }
.sz-befund ul { display: flex; flex-wrap: wrap; gap: .4rem 1rem; margin: 1rem 0 0; padding: 0; list-style: none; font-size: .8rem; }
.sz-befund li { display: flex; align-items: center; gap: .4rem; }
.sz-befund li i { width: .8rem; height: .8rem; border: 2px solid var(--sz-gruen); border-radius: 3px; }
.sz-befund li i.warten { border-color: #e3b23c; background: #e3b23c; }
.sz-befund li i.jetzt { border-color: #d9662a; background: #d9662a; }
.sz-befund-fuss { margin: .9rem 0 0; padding-top: .7rem; border-top: 1px solid #e3e6e1; font-size: .86rem; font-weight: 600; }
.sz-kalender ol { display: grid; grid-template-columns: repeat(5, 1fr); gap: .5rem; margin: 1rem 0 0; padding: 0; list-style: none; }
.sz-kalender li {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  height: 5.5rem;
  padding-bottom: .55rem;
  border-radius: 6px;
  background: #e5eee8;
  font-size: .85rem;
  font-weight: 700;
}
.sz-kalender li:last-child { background: #d9662a; color: #fff; }
.sz-kalender-fuss { display: flex; align-items: center; gap: .7rem; margin: 1rem 0 0; font-family: var(--hb-schrift); font-size: 1.45rem; line-height: 1.15; }
.sz-haken { flex: none; width: 2.1rem; height: 2.1rem; padding: .45rem; border-radius: 50%; background: var(--sz-gruen); color: #fff; }

/* ---------- Handwerk: Skizze, Schrank, Massband, Wasserwaage ---------- */
.sz-held[data-sz-held="handwerk"] { --sz-leinwand: rgb(226 190 140); }
.sz-werk {
  position: absolute;
  right: 10vw;
  top: 50%;
  width: min(22vw, 20rem);
  aspect-ratio: 400 / 520;
  margin-top: calc(min(22vw, 20rem) * -.72);
}
.sz-skizze { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.sz-skizze .l { fill: none; stroke: #f1ede6; stroke-width: 2.5; stroke-dasharray: 1; stroke-dashoffset: 0; }
.sz-skizze .m { fill: none; stroke: var(--hb-hervor); stroke-width: 1.5; stroke-dasharray: 1; stroke-dashoffset: 0; }
.sz-skizze text { fill: var(--hb-hervor); font: 600 17px/1 var(--grotesk); text-anchor: middle; }
.sz-skizze .t2 { fill: rgb(255 255 255 / .72); font-size: 13px; letter-spacing: .12em; text-anchor: start; }
.sz-innen {
  position: absolute;
  left: 15%;
  top: 7.69%;
  width: 70%;
  height: 69.23%;
  background:
    linear-gradient(90deg, transparent calc(50% - 1px), #6e5233 calc(50% - 1px) calc(50% + 1px), transparent calc(50% + 1px)),
    repeating-linear-gradient(180deg, #e0c59c 0 calc(25% - 5px), #8a6844 calc(25% - 5px) 25%);
  box-shadow: inset 0 0 40px rgb(0 0 0 / .4);
}
.sz-tuer {
  position: absolute;
  top: 7.69%;
  width: 35%;
  height: 69.23%;
  background:
    repeating-linear-gradient(92deg, rgb(255 255 255 / .05) 0 2px, transparent 2px 9px),
    linear-gradient(90deg, #c99c66, #b5864f 60%, #a67844);
  box-shadow: inset 0 0 0 2px rgb(0 0 0 / .28), 0 14px 30px rgb(0 0 0 / .35);
}
.sz-tuer::after { content: ""; position: absolute; top: 46%; width: 4px; height: 12%; border-radius: 2px; background: #22262a; }
.sz-tuer--l { left: 15%; transform-origin: 0 50%; }
.sz-tuer--l::after { right: 10%; }
.sz-tuer--r { left: 50%; transform-origin: 100% 50%; }
.sz-tuer--r::after { left: 10%; }
.sz-werk .sz-stempel {
  position: absolute;
  left: -18%;
  bottom: 12%;
  margin: 0;
  padding: .45rem .8rem;
  border: 3px solid var(--hb-hervor);
  border-radius: 4px;
  background: rgb(18 23 27 / .9);
  color: var(--hb-hervor);
  font: 800 .8rem/1.2 var(--grotesk);
  letter-spacing: .1em;
  text-transform: uppercase;
  white-space: nowrap;
}
.sz-massband { position: absolute; left: 46%; right: 6vw; bottom: 7%; }
.sz-massband i {
  display: block;
  height: 2.3rem;
  border-radius: 3px;
  background:
    repeating-linear-gradient(90deg, #1d1d1b 0 2px, transparent 2px 60px) 0 0 / 100% 55% no-repeat,
    repeating-linear-gradient(90deg, #1d1d1b 0 1px, transparent 1px 12px) 0 0 / 100% 30% no-repeat,
    #f2c230;
  box-shadow: 0 12px 30px rgb(0 0 0 / .4);
  transform-origin: 0 50%;
}
.sz-massband span, .sz-waage span { display: block; margin-top: .7rem; font: 700 .76rem/1.3 var(--grotesk); letter-spacing: .16em; text-transform: uppercase; color: #fff; }
.sz-waage { position: absolute; right: 9vw; bottom: 8%; width: min(24rem, 30vw); }
.sz-waage div {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 3.2rem;
  border-radius: 1.6rem;
  background: linear-gradient(#ece6da, #cbc1ad);
  box-shadow: 0 16px 40px rgb(0 0 0 / .45);
}
.sz-waage em {
  position: relative;
  display: block;
  width: 42%;
  height: 1.5rem;
  border: 2px solid #5c6b3a;
  border-radius: .75rem;
  background: rgb(190 220 120 / .7);
}
.sz-waage em::before, .sz-waage em::after { content: ""; position: absolute; top: 15%; bottom: 15%; width: 2px; background: #3d4826; }
.sz-waage em::before { left: 38%; }
.sz-waage em::after { right: 38%; }
.sz-waage b { position: absolute; left: 50%; top: 50%; width: 1.1rem; height: 1.1rem; margin: -.55rem 0 0 -.55rem; border-radius: 50%; background: rgb(255 255 255 / .9); }

/* ---------- Restaurant: Herkunft, Kreidetafel, Mittagsuhr ------------- */
.sz-held[data-sz-held="restaurant"] { --sz-leinwand: rgb(255 238 222); }
.sz-held[data-sz-held="restaurant"] .sz-nacht { background: rgb(26 8 5); }
.sz-glut {
  position: absolute;
  left: 70%;
  top: 56%;
  width: 70vmax;
  height: 70vmax;
  margin: -35vmax 0 0 -35vmax;
  border-radius: 50%;
  background: radial-gradient(circle, rgb(255 170 80 / .42) 0%, rgb(255 120 40 / .18) 36%, rgb(255 90 20 / 0) 68%);
  mix-blend-mode: screen;
}
.sz-herkunft {
  position: absolute;
  right: 6vw;
  top: 50%;
  width: min(36vw, 31rem);
  height: auto;
  margin-top: calc(min(36vw, 31rem) * -.45);
  overflow: visible;
}
.sz-herkunft .see { fill: rgb(120 170 200 / .16); stroke: rgb(160 200 225 / .45); stroke-width: 1; }
.sz-herkunft .weg { fill: none; stroke: var(--hb-hervor); stroke-width: 2.5; stroke-dasharray: 1; stroke-dashoffset: 0; stroke-linecap: round; }
.sz-herkunft .ort { fill: #fff; }
.sz-herkunft .ziel { fill: var(--hb-hervor); }
.sz-herkunft text { fill: #fff; font: 600 15px/1 var(--grotesk); }
.sz-herkunft text.gross { fill: var(--hb-hervor); font: 400 26px/1 var(--hb-schrift); }
.sz-tafel {
  position: absolute;
  right: 7vw;
  top: 50%;
  width: min(26rem, 33vw);
  margin-top: -11rem;
  padding: 1.5rem 1.7rem 1.4rem;
  border: 10px solid #6b4a2f;
  border-radius: 6px;
  background: #1f2522;
  color: #f4efe6;
  box-shadow: 0 40px 80px -30px rgb(0 0 0 / .8);
}
.sz-tafel .sz-etikett { color: var(--hb-hervor); }
.sz-tafel ul { margin: .9rem 0 0; padding: 0; list-style: none; }
.sz-tafel li { position: relative; padding: .6rem 0; border-bottom: 1px dashed rgb(255 255 255 / .25); font-family: var(--hb-schrift); font-size: 1.15rem; line-height: 1.25; }
.sz-strich { position: absolute; left: -3%; right: -3%; top: 52%; height: 2px; background: #f4efe6; transform-origin: 0 50%; }
.sz-tafel .sz-klein { margin: .9rem 0 0; font-size: .88rem; color: rgb(255 255 255 / .78); }
.sz-mittag { position: absolute; right: 8vw; top: 50%; width: min(24rem, 30vw); margin-top: calc(min(24rem, 30vw) * -.6); text-align: center; }
.sz-teller { position: relative; }
.sz-teller svg { display: block; width: 100%; height: auto; overflow: visible; }
.sz-teller circle { fill: none; stroke: rgb(255 255 255 / .85); stroke-width: 2; stroke-dasharray: 1; stroke-dashoffset: 0; }
.sz-teller circle.innen { stroke: rgb(255 255 255 / .3); stroke-dasharray: none; }
.sz-mittag .sz-uhr {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  display: flex;
  justify-content: center;
  margin: -.5em 0 0;
  font-family: var(--hb-schrift);
  font-size: clamp(3rem, 6vw, 5.4rem);
  line-height: 1;
  color: var(--hb-hervor);
  font-variant-numeric: tabular-nums;
}
.sz-mittag .sz-etikett { margin-top: 1rem; color: #fff; }

/* ---------- Coiffeur: Farbfächer, Schnitt, Spiegel, Woche ------------- */
.sz-held[data-sz-held="coiffeur"] { --sz-leinwand: rgb(238 210 176); }
.sz-teil { opacity: 0; }
.sz-teil--a { clip-path: polygon(0 0, 100% 0, 100% 18%, 0 82%); }
.sz-teil--b { clip-path: polygon(0 82%, 100% 18%, 100% 100%, 0 100%); }
.sz-schnittlinie { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.sz-schnittlinie path { fill: none; stroke: var(--hb-hervor); stroke-width: 2; stroke-dasharray: 1; stroke-dashoffset: 0; vector-effect: non-scaling-stroke; }
.sz-schere { position: absolute; right: -2.2rem; top: calc(18% - 1.6rem); width: 6.4rem; height: 3.2rem; color: #fff; overflow: visible; }
.sz-schere circle { fill: none; stroke: currentColor; stroke-width: 3; }
.sz-schere path { fill: currentColor; }
.sz-faecher { position: absolute; right: 14vw; top: 50%; width: min(6.5rem, 8vw); height: min(22rem, 27vw); margin-top: calc(min(22rem, 27vw) * -.55); }
.sz-faecher i { position: absolute; inset: 0; border-radius: 1.2rem 1.2rem .4rem .4rem; transform-origin: 50% 92%; box-shadow: 0 10px 30px rgb(0 0 0 / .45); }
.sz-faecher i:nth-child(1) { background: #1b1411; }
.sz-faecher i:nth-child(2) { background: #3a2418; }
.sz-faecher i:nth-child(3) { background: #6b3f26; }
.sz-faecher i:nth-child(4) { background: #9b5d34; }
.sz-faecher i:nth-child(5) { background: #c68d58; }
.sz-faecher i:nth-child(6) { background: #e1bf8b; }
.sz-faecher i:nth-child(7) { background: #f1dfc4; }
.sz-faecher p { position: absolute; top: 100%; left: 50%; width: 18rem; margin: 1.4rem 0 0 -9rem; text-align: center; color: #fff; }
.sz-spiegel {
  position: absolute;
  right: 9vw;
  top: 50%;
  width: min(28vw, 24rem);
  aspect-ratio: 1;
  margin-top: calc(min(28vw, 24rem) * -.62);
  overflow: hidden;
  border: 6px solid #d8bf97;
  border-radius: 50%;
  box-shadow: 0 30px 80px rgb(0 0 0 / .6);
}
.sz-spiegel img { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.sz-woche {
  position: absolute;
  right: 9vw;
  top: calc(50% + min(28vw, 24rem) * .48);
  display: flex;
  justify-content: space-between;
  width: min(28vw, 24rem);
  margin: 0;
  padding: 0;
  list-style: none;
}
.sz-woche li {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border: 1px solid rgb(255 255 255 / .35);
  border-radius: 50%;
  font: 700 .78rem/1 var(--grotesk);
  color: rgb(255 255 255 / .8);
}
.sz-woche li.an { border-color: transparent; background: var(--hb-hervor); color: #2a0f1c; }

/* ---------- Schmal: Dekor oben, Karten unten -------------------------- */
@media (max-width: 47.99rem) {
  .sz-takt:not(.sz-takt--eins) { min-height: var(--sz-h); align-items: flex-end; padding-bottom: 5.8rem; }
  .sz-takt--eins .sz-in.buehne-satz { padding-block: 3.4rem 4.5rem; }
  .sz-ring { right: auto; left: 50%; top: 4%; width: 12.5rem; margin: 0 0 0 -6.25rem; }
  .sz-ring b { font-size: 3.6rem; }
  .sz-befund, .sz-kalender { left: 5vw; right: 5vw; top: 3%; width: auto; margin-top: 0; padding: .9rem 1rem; font-size: .9rem; }
  .sz-befund svg { margin-top: .5rem; }
  .sz-befund ul { margin-top: .6rem; font-size: .74rem; }
  .sz-befund-fuss { margin-top: .5rem; padding-top: .5rem; font-size: .78rem; }
  .sz-kalender li { height: 3.8rem; }
  .sz-kalender-fuss { font-size: 1.15rem; }
  .sz-werk { right: auto; left: 50%; top: 3%; width: 9.5rem; margin: 0 0 0 -4.75rem; }
  .sz-werk .sz-stempel { left: -45%; font-size: .66rem; }
  .sz-massband { left: 6vw; right: 6vw; top: 34%; bottom: auto; }
  .sz-massband i { height: 1.8rem; }
  .sz-waage { left: 8vw; right: 8vw; top: 34%; bottom: auto; width: auto; }
  .sz-herkunft { left: 5vw; right: auto; top: 2%; width: 90vw; margin-top: 0; }
  .sz-tafel { left: 6vw; right: 6vw; top: 3%; width: auto; margin-top: 0; padding: 1rem 1.1rem; border-width: 7px; }
  .sz-tafel li { padding: .4rem 0; font-size: 1rem; }
  .sz-mittag { right: auto; left: 50%; top: 3%; width: 12rem; margin: 0 0 0 -6rem; }
  .sz-mittag .sz-uhr { font-size: 2.7rem; }
  .sz-faecher { right: auto; left: 50%; top: 4%; width: 4.4rem; height: 12.5rem; margin: 0 0 0 -2.2rem; }
  .sz-faecher p { margin-top: .9rem; }
  .sz-spiegel { right: auto; left: 50%; top: 3%; width: 11.5rem; margin: 0 0 0 -5.75rem; border-width: 4px; }
  .sz-woche { left: 7vw; right: 7vw; top: calc(3% + 12.4rem); width: auto; }
  .sz-woche li { width: 2.1rem; height: 2.1rem; font-size: .7rem; }
  .sz-schere { width: 4.6rem; height: 2.3rem; right: -1.6rem; top: calc(18% - 1.15rem); }
}

/* Kein Skript, ruhig, Druck: geteilte Bildhälften nie zeigen */
html:not([data-sz="an"]) .sz-teil { display: none; }

/* Schmal, zweite Runde: Karten kompakter, Dekor unter dem Demo-Schild */
@media (max-width: 47.99rem) {
  .sz-karte { padding: 1.1rem 1.1rem 1.2rem; }
  .sz-karte h2 { margin-top: .7rem; font-size: 1.75rem; }
  .sz-karte > p:not(.sz-nr) { margin-top: .7rem; font-size: .95rem; line-height: 1.5; }
  .sz-fakten { flex-wrap: nowrap; gap: 1.2rem; margin-top: 1rem; padding-top: .9rem; }
  .sz-fakten dt { font-size: 1.45rem; }
  .sz-fakten dd { font-size: .78rem; }
  .sz-weiter { margin-top: 1rem; }
  .sz-ring { top: 9%; width: 10rem; margin-left: -5rem; }
  .sz-ring b { font-size: 3rem; }
  .sz-befund, .sz-kalender, .sz-tafel { top: 9%; }
  .sz-werk { top: 9%; width: 8rem; margin-left: -4rem; }
  .sz-massband, .sz-waage { top: 30%; }
  .sz-herkunft { top: 8%; width: 84vw; left: 8vw; }
  .sz-mittag { top: 9%; width: 10rem; margin-left: -5rem; }
  .sz-faecher { top: 10%; height: 10rem; width: 3.6rem; margin-left: -1.8rem; }
  .sz-spiegel { top: 9%; width: 9.5rem; margin-left: -4.75rem; }
  .sz-woche { top: calc(9% + 10.4rem); }
}