img.portrait {
  height: 520px;
  width: auto;
  object-fit: contain;
}

img.fit {
  max-width: 100%;
  max-height: 520px;
  width: auto;
  height: auto;
  object-fit: contain;
}

/* Überschrift etwas klarer */
.reveal .slides section h3,
.reveal .slides section h2,
.reveal .slides section h1 {
  text-shadow: 0 2px 10px rgba(0,0,0,0.8);
}

/* Ganzes Bild dezent abdunkeln */
.reveal .slides section.dim {
  position: relative;
}
.reveal .slides section.dim::before{
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.35); /* Stärke nach Geschmack */
  pointer-events: none;
  z-index: 0;
}

/* Inhalt über das Overlay heben */
.reveal .slides section.dim > * {
  position: relative;
  z-index: 1;
}

/* Inhalte oben starten – robust, auch wenn Reveal mit top/transform zentriert */
.reveal .slides section.top {
  display: flex !important;
  flex-direction: column;
  justify-content: flex-start !important;
  top: 0 !important;
  transform: none !important;
}

/* Falls Reveal die transform auf present/past/future setzt */
.reveal .slides section.top.present,
.reveal .slides section.top.past,
.reveal .slides section.top.future {
  top: 0 !important;
  transform: none !important;
}




/* nur oben ein Verlauf / Streifen */
.reveal .slides section.titlebar {
  position: relative;
}

.reveal .slides section.titlebar::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 180px;
  background: linear-gradient(to bottom, rgba(0,0,0,0.65), rgba(0,0,0,0));
  pointer-events: none;
  z-index: 0;
}









/* Box-Grundstil */
.reveal .slides section .box {
  max-width: 550px;
  /* min-width: 500px; */
  padding: 24px 28px;
  background: rgba(0,0,0,0.65);
  border: 1px solid rgba(255,255,255,0.20);
  box-shadow: 0 10px 30px rgba(0,0,0,0.45);
  border-radius: 14px;
  backdrop-filter: blur(6px);        /* wirkt edel; wenn nicht supported, egal */ 
  color: rgba(255, 255, 255, 0.92);
  /* border-left: 4px solid rgba(255,255,255,0.18); */
  padding-left: 22px; /* weil links jetzt Linie ist */
  text-shadow: 0 2px 10px rgba(0,0,0,0.3);
}

/* Position links/rechts */
.reveal .slides section.box-left .box {
  margin-left: 40px;
  margin-right: auto;
}
.reveal .slides section.box-right .box {
  margin-left: auto;
  margin-right: 40px;
}
.reveal .slides section.box-center .box {
  margin-left: auto;
  margin-right: auto;
  /* margin-top: 200px !important; */
}
.reveal .slides section .box li {
  line-height: 1.25;
  margin: 10px 0;
}



/* Wenn du die Folieninhalte oben startest */
.reveal .slides section.top {
  justify-content: flex-start;
}
.reveal .slides section.top .box {
  margin-top: 90px; /* unter der Titlebar, anpassen */
}

/* Titlebar-Overlay muss hinter Box & Text bleiben */
.reveal .slides section.titlebar > * {
  position: relative;
  z-index: 1;
}




.reveal .slides img.inline-shot {
  display: block;
  margin-top: 12px;
  max-width: 100%;
  max-height: 240px;   /* anpassen */
  width: auto;
  height: auto;
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.45);
}




/* Box als Bühne (Bild-Sequenz) */
.reveal .slides section.centerbox {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Wichtig: überschreibt die normale .box (die max-width: 560px hat) */
.reveal .slides section.centerbox .box.image-sequence {
  max-width: none !important;
  width: 1024px !important;
  /* max-width: 92vw !important; */
  height: 786px;

  margin: 0 auto !important;
  padding: 18px;

  background: rgba(0,0,0,0.75);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 16px;
  box-shadow: 0 20px 50px rgba(0,0,0,0.6);
  backdrop-filter: blur(6px);

  position: relative;
  overflow: hidden;
}

/* Jeder Step liegt exakt übereinander (und wird per Fragment "ersetzt") */
.reveal .slides .image-sequence figure.step {
  position: absolute;
  inset: 18px;
  margin: 0;

  /* Standard: komplett aus dem Layout nehmen */
  display: none;

  flex-direction: column;
  justify-content: center;
  align-items: center;
}

/* Der erste Step (ohne .fragment) ist sofort sichtbar */
.reveal .slides .image-sequence figure.step:not(.fragment) {
  display: flex;
}

/* Sichtbare (alte) Fragmente NICHT dauerhaft anzeigen */
.reveal .slides .image-sequence figure.step.fragment.visible {
  display: none;
}

/* Nur das aktuell aktive Fragment anzeigen */
.reveal .slides .image-sequence figure.step.fragment.current-fragment {
  display: flex;
}

/* Bildgröße innerhalb der Bühne */
.reveal .slides .image-sequence figure.step img {
  /* max-width: 100%;
  max-height: 480px; */
  width: auto;
  height: auto;
  border-radius: 12px;
  box-shadow: 0 15px 40px rgba(0,0,0,0.5);
}

/* Caption-Stil */
.reveal .slides .image-sequence figure.step figcaption {
  /* margin-top: 14px; */
  padding: 10px 14px;
  /* background: rgba(0,0,0,0.55); */
  /* border: 1px solid rgba(255,255,255,0.10); */
  /* border-radius: 12px; */
  color: rgba(255,255,255,0.92);
  font-size: 0.75em;
}

/* Step 1 initial sichtbar */
.reveal .slides .image-sequence figure.step.first {
  display: flex;
}

/* Sobald irgendein Fragment sichtbar ist: Step 1 weg */
.reveal .slides section.present .image-sequence .fragment.visible ~ figure.step.first,
.reveal .slides section.present .image-sequence .fragment.current-fragment ~ figure.step.first {
  display: none;
}





.reveal .slides section .two-box {
  display: grid;
  grid-template-columns: auto auto;
  gap: 40px;
  align-items: start;
}

.reveal blockquote {
  width: 90%;
  /* margin: 1em auto; */
  /* padding: 0.8em 1.1em; */

  background: rgba(0, 0, 0, 0.537);
  /* border-left: 4px solid rgba(255, 255, 255, 0.18); */
  border-radius: 12px;

  box-shadow: none;
  color: rgba(255, 255, 255, 0.85);
}