/* Variante "Flaches Kupfer" (924): diese Zeile auskommentieren = wieder Goldverlauf */
@import url("ci-flat.css");

/* ============================================================================
   STIG ROCK, BASIS-LAYOUT UND KOMPONENTEN
   ----------------------------------------------------------------------------
   Gestaltungsprinzipien aus dem Brand Guide, Abschnitt 9:
     · Weissraum ist das Hauptgestaltungsmittel
     · Linksbuendiger Satz, keine zentrierten Bloecke ausser einzelnen Claims
     · Eyebrow-Label ueber jeder Section, darunter die grosse Headline
     · Haarlinien-Trenner statt Rahmen und Kaesten
     · Kein Border-Radius, keine Schatten, keine Verlaeufe
     · Ein Akzent: Kupfer, sparsam

   Jede Folie benutzt dieselben festen Zonen. Ueberschriften sitzen dadurch
   auf allen 40 Folien exakt an derselben Stelle.
   Keine Farbwerte hier, ausschliesslich Tokens aus tokens.css.
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden;
  /* PDF-Export: Flaechen und Hintergruende auch im Druck ausgeben */
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: var(--fs-body);
  font-weight: var(--w-regular);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; display: block; }
p { margin: 0; }
/* CI 924: Hervorhebung im Fliesstext immer Montserrat Bold, nie 'bolder' (ergaebe 900, den Schnitt gibt es nicht) */
b, strong { font-weight: var(--w-bold); }
ul, ol { list-style: none; margin: 0; padding: 0; }

/* ============================================================================
   BUEHNE, 1920 x 1080, per JS auf jede Bildschirmgroesse skaliert
   ========================================================================== */

/* Die Buehne ist 1080 hoch und in der Breite beweglich: sie uebernimmt das
   Seitenverhaeltnis des Fensters (begrenzt auf 1600 bis 2560). Dadurch fuellt
   die Praesentation den Bildschirm komplett aus, statt in einem Kasten mit
   schwarzen Balken zu sitzen. Die senkrechte Ordnung bleibt unveraendert,
   weil die Hoehe fix bleibt.

   Zentriert wird ueber absolute Positionierung, nicht ueber place-items.
   Ein Grid-Item, das groesser ist als sein Container, klemmt Chrome an den
   Rand statt es zu zentrieren. */

.stage-wrap {
  position: fixed;
  inset: 0;
  overflow: hidden;
  background: var(--bg-deep);
}

.stage {
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--stage-w, 1920px);
  height: 1080px;
  margin-top: -540px;
  margin-left: calc(var(--stage-w, 1920px) / -2);
  background: var(--bg);
  transform: scale(var(--scale, 1));
  transform-origin: center center;
  overflow: hidden;
}

/* ============================================================================
   RAHMEN, wie eine Doppelseite im Markenbuch
   Logo oben links, Haarlinien oben und unten. Im Player liefert die Shell
   diese Elemente, damit sie beim Blaettern stehen bleiben.
   ========================================================================== */

.slide-frame { position: absolute; inset: 0; z-index: 4; pointer-events: none; }

.slide-frame__logo {
  position: absolute;
  right: var(--pad-x);
  top: 20px;
  width: 102px;
  height: 27px;
  background-image: var(--logo);
  background-repeat: no-repeat;
  background-position: right center;
  background-size: contain;
}

.slide-frame__rule {
  position: absolute;
  left: var(--pad-x);
  right: var(--pad-x);
  height: 1px;
  background: var(--line);
}
.slide-frame__veil { position: absolute; left: 0; right: 0; height: 80px; pointer-events: none; }
.slide-frame__veil--top { top: 0; background: linear-gradient(180deg, var(--frame-veil-a), var(--frame-veil-b)); }
.slide-frame__veil--bottom { bottom: 0; background: linear-gradient(0deg, var(--frame-veil-a), var(--frame-veil-b)); }

.slide-frame__rule--top { top: 62px; }
.slide-frame__rule--bottom { bottom: 48px; }

html.embedded .slide-frame { display: none; }

/* ============================================================================
   FESTE ZONEN, auf allen Folien identisch
   ========================================================================== */

.slide-head {
  position: absolute;
  left: var(--pad-x);
  right: var(--pad-x);
  top: 104px;
  z-index: 3;
}

/* Kapitel-Label mit vorangestelltem Kupferstrich. Der Brand Guide setzt
   Kapitelmarken mit flankierenden Strichen; der Strich uebernimmt
   diese Geste. */
.eyebrow {
  font-size: var(--fs-eyebrow);
  font-weight: var(--w-semi);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 22px;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 14px;
}
.eyebrow::before {
  content: "";
  width: 26px;
  height: 1px;
  background: var(--accent);
  flex: none;
}

h1, .h1 {
  font-size: var(--fs-h1);
  font-weight: var(--w-bold);
  line-height: var(--lh-tight);
  letter-spacing: var(--track-h1);
  text-transform: uppercase;
  color: var(--text);
  margin: 0;
  max-width: 26ch;
}

.h1--wide { max-width: 30ch; }
.h1--tight { max-width: 18ch; }

/* Lead-Text, rechte Spalte, linksbuendig gesetzt.
   Breite und Grad sind so gewaehlt, dass auch der laengste Vorspann
   (Folie 46) in vier Zeilen bleibt und die Inhaltsflaeche frei laesst. */
/* Fassung 913: keine Vorspanntexte mehr, auf dem Beamer nicht lesbar.
   Der Platz gehoert dem Inhalt. Falls eine Folie doch einen hat: aus. */
.lead { display: none; }

/* Inhaltsflaeche.
   Vertikales Raster der Folie:
      126  Haarlinie oben
      168  Eyebrow
      196  Headline, maximal drei Zeilen
      392  Inhalt beginnt      (--top und --tall ab 356)
      900  Inhalt endet
      916  Fussnote
      984  Haarlinie unten
     1034  Kapitel und Paginierung                                       */
.content {
  position: absolute;
  left: var(--pad-x);
  right: var(--pad-x);
  top: 328px;
  bottom: 92px;
  z-index: 2;
}

.content--center { display: grid; place-items: center; }
.content--top    { top: 292px; }
.content--tall   { top: 308px; }
.content--wide   { left: 56px; right: 56px; }

/* Folien ohne Eyebrow: unsichtbarer Platzhalter, damit die H1 ueberall
   auf gleicher Hoehe sitzt. */
.eyebrow--spacer { visibility: hidden; }

/* Fussbereich unter der unteren Haarlinie: ausschliesslich Quellenangaben */
.foot {
  position: absolute;
  left: var(--pad-x);
  right: var(--pad-x);
  bottom: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: var(--fs-4);
  letter-spacing: 0.02em;
  color: var(--text-dim);
  z-index: 3;
  white-space: nowrap;
}

/* ============================================================================
   FACETTEN-WASSERZEICHEN
   Das einzige dekorative Grafikelement der Marke. Nur auf Flaechen ohne
   Fliesstext, Deckkraft bewusst sehr niedrig.
   ========================================================================== */

.facets { position: relative; overflow: hidden; }
.facets::before {
  content: "";
  position: absolute;
  inset: -20%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cg fill='none' stroke='%23B8956F' stroke-width='1'%3E%3Cpath d='M40 10h120l30 30v120l-30 30H40L10 160V40z'/%3E%3Cpath d='M40 10 100 100 160 10M10 40l90 60-90 60M190 40l-90 60 90 60M40 190l60-90 60 90'/%3E%3Cpath d='M10 40h180M10 160h180M40 10v180M160 10v180'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 280px 280px;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0.07;
  pointer-events: none;
  z-index: 0;
}
.facets > * { position: relative; z-index: 1; }

/* ============================================================================
   TITELFOLIEN UND VOLLBILD
   ========================================================================== */

.stage--full .content { inset: 0; }

.hero-center {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  z-index: 3;
}

.hero-title {
  font-size: var(--fs-h1-xl);
  font-weight: var(--w-bold);
  line-height: 1.04;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  margin: 0;
  color: var(--text);
}

.hero-sub {
  margin-top: 30px;
  font-size: var(--fs-eyebrow);
  font-weight: var(--w-semi);
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--accent);
}

.hero-note {
  margin-top: 18px;
  font-size: var(--fs-lead);
  font-weight: var(--w-regular);
  color: var(--text-muted);
}

.media-full {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

.media-scrim {
  position: absolute;
  inset: 0;
  background: var(--media-scrim);
  z-index: 1;
  pointer-events: none;
}

.media-bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.media-bg video, .media-bg img {
  width: 100%; height: 100%; object-fit: cover;
  opacity: var(--media-veil);
  filter: saturate(0.4) contrast(1.02);
}

/* Kein Bildblitzer vor dem Start: Videos bleiben unsichtbar (schwarzes
   Poster), bis sie tatsaechlich laufen, und blenden dann weich ein. */
video[data-autoplay] { background: #000; transition: opacity 600ms var(--ease); }
video[data-autoplay]:not(.is-playing) { opacity: 0 !important; }

/* Ersatz, falls der Browser Autoplay mit Ton blockiert */
.video-gate {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: grid;
  place-items: center;
  background: rgba(10, 10, 10, 0.42);
  cursor: pointer;
}
.video-gate[hidden] { display: none !important; }
.video-gate__btn {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 18px 34px;
  border: 1px solid var(--classic-white);
  background: transparent;
  font-size: var(--fs-micro);
  font-weight: var(--w-semi);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--classic-white);
}

/* ============================================================================
   GRUND-BAUSTEINE
   ========================================================================== */

.card {
  position: relative;
  background: var(--surface);
  border: var(--hairline) solid var(--line);
  border-radius: var(--radius);
  padding: 30px 28px;
}

.card--accent {
  border-color: var(--accent-line);
  background: var(--surface-2);
}

.card__num {
  font-size: var(--fs-micro);
  font-weight: var(--w-semi);
  letter-spacing: var(--track-wide);
  color: var(--accent);
  margin-bottom: 18px;
}

.card__title {
  font-size: var(--fs-2);
  font-weight: var(--w-semi);
  letter-spacing: 0.01em;
  text-transform: uppercase;
  line-height: 1.2;
  color: var(--text);
  margin: 0 0 10px;
}

.card__sub {
  font-size: var(--fs-small);
  font-weight: var(--w-regular);
  color: var(--accent);
  letter-spacing: 0.02em;
  margin: 0 0 14px;
}

.card__text {
  font-size: var(--fs-small);
  color: var(--text-muted);
  line-height: 1.55;
  margin: 0;
}

/* Raster */
.grid { display: grid; gap: 20px; height: 100%; }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
.grid--5 { grid-template-columns: repeat(5, 1fr); }
.grid--6 { grid-template-columns: repeat(6, 1fr); }
.grid--top { align-content: start; }
.grid--mid { align-content: center; }

.split { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; height: 100%; align-items: center; }

.stack { display: flex; flex-direction: column; }
.stack--12 { gap: 12px; }
.stack--20 { gap: 20px; }
.stack--32 { gap: 30px; }

/* Fliesstext */
.prose { font-size: var(--fs-body); color: var(--text-muted); max-width: 60ch; line-height: var(--lh-body); }
.prose p + p { margin-top: 18px; }
.prose strong, .prose b { color: var(--text); font-weight: var(--w-bold); }

.text-accent { color: var(--accent); }
.text-bright { color: var(--text); }
.text-dim { color: var(--text-dim); }

/* Hervorgehobene Aussage */
.claim {
  font-size: var(--fs-2);
  font-weight: var(--w-semi);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--accent);
  line-height: 1.3;
}
.claim--sm { font-size: var(--fs-3); letter-spacing: 0.06em; }

/* Kennzahlen */
.stat {
  font-size: var(--fs-stat);
  font-weight: var(--w-bold);
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}
.stat--accent { color: var(--accent); }
.stat--sm { font-size: var(--fs-stat-sm); }
.stat__unit {
  font-size: var(--fs-micro);
  font-weight: var(--w-semi);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--text-dim);
  margin-top: 14px;
}
.stat__label { font-size: var(--fs-small); color: var(--text-muted); margin-top: 10px; }
.stat__note { font-size: var(--fs-micro); color: var(--text-faint); margin-top: 6px; }

/* Linien */
.rule { height: 1px; background: var(--line); border: 0; margin: 0; }
.rule--accent { background: var(--accent-line); }

.arrow { color: var(--accent); font-size: var(--fs-2); line-height: 1; display: grid; place-items: center; }

/* Marker */
.badge {
  display: inline-block;
  padding: 6px 14px;
  background: var(--accent);
  color: var(--on-accent);
  font-size: 13px;
  font-weight: var(--w-semi);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
}
.badge--ghost { background: transparent; border: 1px solid var(--accent-line); color: var(--accent); }

.tag {
  font-size: var(--fs-micro);
  font-weight: var(--w-semi);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--text-dim);
}

/* Liste mit Haken */
.checklist { display: flex; flex-direction: column; gap: 14px; }
.checklist li {
  display: flex; align-items: center; gap: 16px;
  font-size: var(--fs-body); color: var(--text-muted);
}
.checklist__mark {
  width: 22px; height: 22px; flex: none;
  display: grid; place-items: center;
  border: 1px solid var(--accent-line);
  color: var(--accent);
  font-size: 13px;
}

/* Zitat */
.quote {
  font-size: var(--fs-2);
  font-weight: var(--w-regular);
  line-height: 1.38;
  color: var(--text);
  letter-spacing: 0.002em;
}
.quote__by {
  margin-top: 20px;
  font-size: var(--fs-micro);
  font-weight: var(--w-semi);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--accent);
}

/* Bildflaechen */
.frame { border: 1px solid var(--line); overflow: hidden; background: var(--surface); }
.frame img { width: 100%; height: 100%; object-fit: cover; }
.frame--contain img { object-fit: contain; }

/* Fremdlogos brauchen eine Platte, weil sie eigene Farben mitbringen */
.logo-plate {
  display: inline-flex;
  align-items: center;
  padding: 14px 22px;
  background: var(--plate);
}
.logo-plate img { height: 44px; width: auto; object-fit: contain; }
.logo-plate--sm { padding: 10px 16px; }
.logo-plate--sm img { height: 32px; }

.logo-row { display: flex; align-items: center; justify-content: flex-start; gap: 64px; flex-wrap: wrap; }
.logo-row img {
  height: 54px; width: auto; object-fit: contain;
  opacity: 0.78;
  filter: grayscale(1) brightness(1.7);
}
:root[data-theme="light"] .logo-row img { filter: grayscale(1) brightness(0.35); opacity: 0.7; }

/* ============================================================================
   TABELLE, Solution Plaene (Folien 27 und 29)
   ========================================================================== */

.ptable {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-small);
  font-variant-numeric: tabular-nums;
}
.ptable th, .ptable td {
  padding: 12px 10px;
  text-align: center;
  border-bottom: 1px solid var(--line-soft);
  color: var(--text-muted);
  white-space: nowrap;
}
.ptable thead th {
  font-size: var(--fs-2);
  font-weight: var(--w-semi);
  letter-spacing: 0.06em;
  color: var(--text);
  border-bottom: 1px solid var(--line-strong);
  padding-bottom: 16px;
  vertical-align: bottom;
}
.ptable tbody th {
  text-align: left;
  font-size: var(--fs-micro);
  font-weight: var(--w-semi);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--text-dim);
  width: 200px;
  padding-left: 0;
}
.ptable tr:last-child td, .ptable tr:last-child th { border-bottom: 0; }
.ptable .row-total td { color: var(--text); font-weight: var(--w-semi); }
.ptable .col-hero { background: var(--accent-soft); color: var(--text); }
.ptable thead .col-hero { color: var(--accent); }
.ptable .row-total .col-hero { color: var(--accent); }
.ptable .is-empty { color: var(--text-faint); }
.ptable thead .col-hero .badge { display: block; width: max-content; margin: 0 auto 12px; }

/* ============================================================================
   KETTE, Lieferkette (Folien 33 und 34)
   ========================================================================== */

.chain { display: grid; gap: 16px; height: 100%; align-content: center; }
.chain--8 { grid-template-columns: repeat(8, 1fr); }
.chain--4 { grid-template-columns: repeat(4, 1fr); gap: 56px; max-width: 1320px; margin: 0 auto; }

.chain__item { text-align: left; position: relative; }
.chain__img {
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border: 1px solid var(--line);
  margin-bottom: 16px;
  background: var(--surface);
  filter: grayscale(1) contrast(1.04);
}
.chain__img img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.14); }
.chain__num {
  font-size: var(--fs-4);
  font-weight: var(--w-semi);
  letter-spacing: var(--track-wide);
  color: var(--accent);
  margin-bottom: 8px;
}
.chain__title {
  font-size: var(--fs-3);
  font-weight: var(--w-semi);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--text);
  margin-bottom: 6px;
  line-height: 1.25;
}
.chain__sub { font-size: var(--fs-micro); color: var(--text-dim); line-height: 1.45; }
.chain__arrow { position: absolute; top: 36%; right: -34px; color: var(--accent); font-size: var(--fs-3); }

/* ============================================================================
   RAENGE (Folien 42, 44, 45, 46)
   ========================================================================== */

.rank { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; }
.rank__medal { width: 86px; height: 86px; object-fit: contain; }

/* Die Rang-Medaillen sind silberne Renderings mit transparentem Grund.
   Auf dem warmen Off-White des Hellmodus verlieren sie sonst ihre Kanten. */
:root[data-theme="light"] .rank__medal,
:root[data-theme="light"] .wp-col__medal,
:root[data-theme="light"] .rb-rank__medal,
:root[data-theme="light"] .kr__medal img,
:root[data-theme="light"] .ul-row__medal,
:root[data-theme="light"] .bar-col__medal {
  filter: contrast(1.14) brightness(0.92) saturate(0.92);
}
.rank__medal--sm { width: 64px; height: 64px; }
.rank__name {
  font-size: var(--fs-micro);
  font-weight: var(--w-semi);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text);
  line-height: 1.3;
}
.rank__value {
  font-size: var(--fs-2);
  font-weight: var(--w-bold);
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.rank__meta { font-size: var(--fs-micro); color: var(--text-dim); }

/* ============================================================================
   BONUS-LISTEN (Folien 40, 41, 43)
   ========================================================================== */

.bonus-row {
  display: grid;
  grid-template-columns: 56px 1fr auto;
  align-items: center;
  gap: 26px;
  padding: 20px 24px;
  border: 1px solid var(--line);
  background: var(--surface);
}
.bonus-row__icon { width: 40px; height: 40px; object-fit: contain; }
.bonus-row__title {
  font-size: var(--fs-3);
  font-weight: var(--w-semi);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--text);
}
.bonus-row__desc { font-size: var(--fs-micro); color: var(--text-muted); margin-top: 5px; }
.bonus-row__value {
  font-size: var(--fs-2);
  font-weight: var(--w-bold);
  color: var(--accent);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.level-row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 24px;
  padding: 20px 24px;
  border: 1px solid var(--line);
  background: var(--surface);
}
.level-row__name {
  font-size: var(--fs-3);
  font-weight: var(--w-semi);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--text);
}
.level-row__cond { font-size: var(--fs-micro); color: var(--text-dim); margin-top: 4px; }
.level-row__value { font-size: var(--fs-2); font-weight: var(--w-bold); color: var(--accent); }

.total-box {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 8px;
  border: 1px solid var(--accent-line);
  background: var(--accent-soft);
  padding: 32px 34px;
}
.total-box__label {
  font-size: var(--fs-micro);
  font-weight: var(--w-semi);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--text-dim);
}
.total-box__value {
  font-size: var(--fs-stat-sm);
  font-weight: var(--w-bold);
  line-height: 1;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}

/* ============================================================================
   TEAM (Folie 20)
   ========================================================================== */

.person { text-align: left; }
.person__photo {
  width: 104px; height: 104px;
  object-fit: cover;
  margin: 0 0 14px;
  border: 1px solid var(--line);
  filter: grayscale(1) contrast(1.05);
}
.person__name { font-size: var(--fs-3); font-weight: var(--w-semi); text-transform: uppercase; letter-spacing: 0.02em; color: var(--text); }
.person__role {
  font-size: var(--fs-4); font-weight: var(--w-semi);
  letter-spacing: var(--track-label); text-transform: uppercase;
  color: var(--accent); margin-top: 7px;
}
.person__region {
  font-size: var(--fs-4); letter-spacing: var(--track-label);
  text-transform: uppercase; color: var(--text-faint); margin-top: 3px;
}
.person__mail { font-size: var(--fs-4); color: var(--text-dim); margin-top: 9px; word-break: break-word; line-height: 1.45; }

/* ============================================================================
   ZEITSTRAHL (Folie 35)
   ========================================================================== */

.tl { display: flex; flex-direction: column; gap: 16px; height: 100%; justify-content: center; }

/* ============================================================================
   OEKOSYSTEM-DIAMANT (Folie 10)
   ========================================================================== */

.gem { position: relative; width: 520px; height: 520px; margin: 0 auto; }
.gem__layer {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: contain;
  opacity: 0;
  transition: opacity var(--t-mid) var(--ease);
}
.gem__layer--base { opacity: 1; }
.gem__hit {
  position: absolute;
  width: 46%; height: 46%;
  border: 0; background: transparent; cursor: pointer; padding: 0;
}
.gem__hit--top { top: 0; left: 27%; }
.gem__hit--right { top: 27%; right: 0; }
.gem__hit--bottom { bottom: 0; left: 27%; }
.gem__hit--left { top: 27%; left: 0; }
.gem.is-group .gem__layer[data-brand="stig-group"],
.gem.is-international .gem__layer[data-brand="stig-international"],
.gem.is-mines .gem__layer[data-brand="ethical-mines"],
.gem.is-rock .gem__layer[data-brand="stig-rock"] { opacity: 1; }

.gem-nav { display: flex; gap: 8px; margin-top: 30px; }
.gem-nav button {
  flex: none;
  padding: 9px 16px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--text-dim);
  font-family: var(--font);
  font-size: 10px;
  font-weight: var(--w-semi);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  cursor: pointer;
  transition: all var(--t-fast) var(--ease);
}
.gem-nav button:hover { color: var(--accent); border-color: var(--accent-line); }
.gem-nav button[aria-selected="true"] {
  border-color: var(--accent);
  color: var(--on-accent);
  background: var(--accent);
}

/* ============================================================================
   SONSTIGES
   ========================================================================== */

.qr { width: 220px; height: 220px; padding: 12px; background: #FFFFFF; }
.qr img { width: 100%; height: 100%; object-fit: contain; }

.countdown {
  font-size: 128px;
  font-weight: var(--w-bold);
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--text);
  line-height: 1;
}

.big-mark { font-size: 160px; font-weight: var(--w-bold); color: var(--accent); line-height: 1; }

.hashtags {
  display: flex; gap: 20px; align-items: center;
  font-size: var(--fs-micro);
  font-weight: var(--w-semi);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--accent);
}

.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; align-items: start; }
.step__num {
  font-size: 52px;
  font-weight: var(--w-bold);
  color: var(--accent);
  line-height: 1;
  margin-bottom: 18px;
}
.step__title {
  font-size: 21px;
  font-weight: var(--w-semi);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--text);
  margin-bottom: 12px;
}
.step__text { font-size: var(--fs-small); color: var(--text-muted); line-height: 1.55; }

.sources {
  border-top: 1px solid var(--line);
  padding-top: 18px;
  font-size: var(--fs-micro);
  color: var(--text-faint);
  line-height: 1.7;
}
.sources b { color: var(--text-dim); font-weight: var(--w-semi); letter-spacing: 0.02em; }
.sources__title {
  font-size: var(--fs-micro);
  font-weight: var(--w-semi);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 12px;
}

/* ============================================================================
   STANDALONE-ANSICHT
   Wird eine Folie direkt geoeffnet, bringt sie Hintergrund und Rahmen selbst
   mit. Im Player ist sie transparent, dort liefert die Shell beides.
   ========================================================================== */

.slide-bg { position: fixed; inset: 0; z-index: -1; pointer-events: none; background: var(--bg); }

html.embedded body { background: transparent; }
html.embedded .stage { background: transparent; }
html.embedded .stage-wrap { background: transparent; }
html.embedded .slide-bg { display: none; }
html.embedded .bg-canvas { display: none; }

/* Hilfsklassen */
.u-center { text-align: center; }
.u-right { text-align: right; }
.u-nowrap { white-space: nowrap; }
.u-mt-8 { margin-top: 8px; }
.u-mt-16 { margin-top: 16px; }
.u-mt-24 { margin-top: 24px; }
.u-mt-40 { margin-top: 40px; }
.u-full { width: 100%; height: 100%; }

/* ============================================================================
   SPRACHEN MIT EIGENER SCHRIFT
   Arabisch, Persisch, Urdu und Hebraeisch laufen von rechts nach links: jede Textstelle bestimmt ihre
   Richtung selbst, das Layout der Folie bleibt unveraendert.
   Arabisch, Hindi, Bengalisch und Chinesisch vertragen keine Sperrung
   (Buchstaben wuerden auseinanderreissen), Grossbuchstaben gibt es dort nicht.
   ========================================================================== */
html:is([lang="ar"], [lang="arz"], [lang="fa"], [lang="ur"], [lang="he"]) [data-i18n] { unicode-bidi: plaintext; }
html:is([lang="ar"], [lang="arz"], [lang="fa"], [lang="ur"], [lang="hi"], [lang="bn"], [lang="ta"], [lang="zh"], [lang="ja"], [lang="ko"], [lang="th"]) [data-i18n],
html:is([lang="ar"], [lang="arz"], [lang="fa"], [lang="ur"], [lang="hi"], [lang="bn"], [lang="ta"], [lang="zh"], [lang="ja"], [lang="ko"], [lang="th"]) [data-i18n] * { letter-spacing: 0 !important; }
html:is([lang="hi"], [lang="bn"], [lang="ta"], [lang="th"]) [data-i18n] { line-height: 1.3; }
/* Japanisch und Koreanisch: Zeilenumbruch nur zwischen Woertern */
html:is([lang="ko"]) [data-i18n] { word-break: keep-all; }

/* ============================================================================
   MASTEREBENE (Fassung 916)
   Das Facettengitter aus Folie 1 liegt auf jeder Folie im Hintergrund,
   rechts oben und links unten, in derselben Deckkraft. js/stage.js setzt es
   ein (nicht auf reinen Videofolien und nicht auf Folie 1, die ihr Gitter
   links oben und rechts unten selbst mitbringt).
   ========================================================================== */
.master-grid { position: absolute; z-index: 2; width: 420px; height: 420px; opacity: .245;   /* 917: 30 % schwaecher (vorher .35) */ pointer-events: none; }
.master-grid path { fill: none; stroke: var(--accent); stroke-width: 1; }
.master-grid--tr { right: -40px; top: -40px; transform: scaleX(-1); }
.master-grid--bl { left: -40px; bottom: -40px; transform: scaleY(-1); }

/* ============================================================================
   HELLE FOLIEN (Fassung 917)
   Einzelne Folien stehen zusaetzlich in einer hellen Variante daneben
   (<html data-theme-lock="light">). Player und PDF-Export schalten Logo,
   Linien und Hintergrund fuer diese Folie mit um, Kopf und Fuss bleiben
   an exakt derselben Stelle (Masterfolie).
   .gold-text: Kupfer mit leichtem Glanz fuer grosse Kennzahlen und
   Schluesselwoerter, auf Hell und Dunkel.
   .light-sheen: weiches Licht von oben rechts, nur auf hellen Folien.
   ========================================================================== */
.gold-text {
  background: linear-gradient(180deg, #E2C69C 0%, #B8956F 48%, #8E6445 100%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
}
/* auf hellen Folien bewusst derselbe Verlauf wie auf dunklen (Fassung 917) */
.light-sheen { position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 60% 70% at 88% 8%, rgba(255, 255, 255, .95), rgba(255, 255, 255, 0) 70%),
    radial-gradient(ellipse 70% 60% at 10% 100%, rgba(214, 190, 150, .22), rgba(214, 190, 150, 0) 70%); }
:root[data-theme="dark"] .light-sheen { display: none; }

/* Fassung 917: Arabisch/Persisch, Ueberschriften bleiben links wie das
   Layout, sonst ruecken sie nach rechts ueber Bilder. Titel, die sonst
   buchstabenweise einblenden, erscheinen dort als Ganzes (js/stage.js). */
html:is([lang="ar"], [lang="arz"], [lang="fa"], [lang="ur"], [lang="he"]) .slide-head [data-i18n] { text-align: left; }
.letters-whole { animation: revealUp var(--t-slow) var(--ease) both; }

/* Fassung 920: keine Trennlinien unter der Kopf- und ueber der Fusszeile
   (Standalone-Ansicht, gleiches Verhalten wie im Player, css/shell.css) */
.slide-frame__rule { display: none; }