/* Pult – Folienflächen-Stile, geteilt von Editor, Präsentation und Export */
@import url("fonts/fonts.css");

.slide-surface {
  position: relative;
  width: 1280px;
  height: 720px;
  overflow: hidden;
  background: #fff;
  font-family: 'IBM Plex Sans', sans-serif;
}

.slide-surface .el {
  position: absolute;
  box-sizing: border-box;
}

.slide-surface .el > svg { position: absolute; inset: 0; }

.el-textlayer {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  /* PowerPoint schneidet überlaufenden Text nicht ab und bricht nie im Wort um */
  overflow: visible;
  outline: none;
}

.el-textlayer .para { min-height: 1em; white-space: pre-wrap; }
.el-textlayer .para.has-bullet { display: flex; }
.el-textlayer .para.has-bullet .bullet { flex: 0 0 auto; user-select: none; }
.el-textlayer .para.has-bullet .run:last-child { flex: 1 1 auto; }
.el-textlayer .run { font-size: 18pt; }

.el-imgwrap {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.el-imgwrap img {
  width: 100%;
  height: 100%;
  object-fit: fill;
  display: block;
  user-select: none;
}

/* Aufbau-Animationen: Blur-Reveal je Eintrag und Highlight-Durchschalten (nach CW-Referenz) */
.slide-surface [data-item] {
  transition: filter 0.65s ease, opacity 0.55s ease, transform 0.4s ease;
}
.slide-surface .pult-blur {
  filter: blur(5px);
  opacity: 0.35;
}
.slide-surface .pult-item-active {
  filter: none;
}
/* Aktiver Eintrag nach v2-Referenz: oranger Punkt mit weichem Ring, oranger Unterstrich am Titel */
.slide-surface .pult-item-active[data-ar="dot"] {
  background: #F39325 !important;
  box-shadow: 0 0 0 5px rgba(243, 147, 37, 0.20);
}
.slide-surface .pult-item-active[data-ar="title"] {
  text-decoration: underline;
  text-decoration-color: #F39325;
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
}
/* Spot auf einer Karte: farbiger Rand, leicht angehoben. Die Farbe kommt aus
   dem Baustein, siehe --spot-farbe; ohne Angabe gilt Orange. So laesst sich der
   Rand auch gruen oder gelb setzen, ohne das Stilblatt anzufassen. */
.slide-surface .pult-item-active[data-ar="karte"] {
  outline: 2px solid var(--spot-farbe, #F39325);
  outline-offset: -1px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.14);
  transform: translateY(-1px);
}
/* Kein Glow und kein Schmier-Schatten auf aktiven Eintraegen */
.slide-surface .pult-item-active:not([data-ar]) {
  filter: none;
}

/* --- Ebenen-Stapel mit Detailtext, nach Folie 07 des KI-Workshops --- */
/* Ablauf beim ersten Schritt, wie in der Vorlage:
   1. Der Stapel gleitet in 720 ms nach links, bis er buendig steht.
   2. Erst wenn die Bewegung steht, erscheinen zugleich der orange Rahmen um die
      aktive Ebene, der Trennstrich und der Erklaertext.
   3. Das Leitwort bleibt blau. Akzentuiert wird allein der Rahmen.
   Schritt 3 haelt die Klasse pult-warte-text zurueck, sie wird nach 720 ms entfernt. */
.slide-surface [data-ar="layer"],
.slide-surface [data-ar="layertitle"],
.slide-surface [data-ar="layertext"] {
  transition: transform 720ms cubic-bezier(0.2, 0, 0.2, 1),
              outline-color 180ms ease, box-shadow 180ms ease, color 180ms ease;
}
/* Der Umriss ist von Anfang an vorhanden, nur durchsichtig. Ohne diese Zeile
   erbt er die Textfarbe der Oberflaeche und blitzt beim Umschalten hellblau auf. */
/* Wichtig: die Bewegung muss hier mit aufgefuehrt sein. Eine zweite Regel mit
   nur border-color und box-shadow loescht die transform-Angabe von oben, dann
   springen die Ebenen an ihre neue Stelle, statt zu gleiten. */
.slide-surface [data-ar="layer"] {
  transition: transform 720ms cubic-bezier(0.2, 0, 0.2, 1),
              border-color 180ms ease, box-shadow 180ms ease;
}
.slide-surface .el-design.pult-detail-offen [data-ar="layer"],
.slide-surface .el-design.pult-detail-offen [data-ar="layertitle"],
.slide-surface .el-design.pult-detail-offen [data-ar="layertext"] {
  transform: translateX(calc(-1 * var(--pult-schub, 0px)));
}
.slide-surface .pult-item-active[data-ar="layer"] {
  border-color: #F39325 !important;
  box-shadow: 0 5px 18px rgba(243, 147, 37, 0.22);
}
/* Solange der Stapel gleitet, bleibt auch der Rahmen aus. Er erscheint zusammen
   mit Trennstrich und Erklaertext, wenn die Bewegung steht.
   Wichtig ist outline: none statt einer durchsichtigen Farbe. Sonst blendet der
   Umriss von der geerbten Textfarbe nach durchsichtig aus und blitzt dabei
   sichtbar auf, was wie ein Zucken der Karte wirkt. */
.slide-surface .el-design.pult-warte-text .pult-item-active[data-ar="layer"] {
  border-color: #D8D8D8 !important;
  box-shadow: none;
}
.slide-surface .el-design.pult-detail-offen .pult-item-active[data-ar="layer"] {
  transform: translateX(calc(-1 * var(--pult-schub, 0px))) translateY(-1px);
}
/* Erklaertexte liegen uebereinander. Sichtbar ist allein der Text der aktiven Ebene. */
.slide-surface [data-ar="detail"] {
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}
.slide-surface .el-design.pult-detail-offen .pult-item-active[data-ar="detail"] {
  opacity: 1;
  filter: none;
  pointer-events: auto;
}
.slide-surface [data-ar="detailrule"] {
  opacity: 0;
  transition: opacity 0.3s ease;
}
.slide-surface .el-design.pult-detail-offen [data-ar="detailrule"] {
  opacity: 1;
}
/* Solange der Stapel noch gleitet, bleiben Strich und Text zurueck. */
.slide-surface .el-design.pult-warte-text [data-ar="detailrule"],
.slide-surface .el-design.pult-warte-text [data-ar="detail"] {
  opacity: 0 !important;
}

/* Hervorhebung einer Karte. Die Vorlage aendert allein die Randfarbe, sie setzt
   keinen zweiten Rahmen darum: .card.interactive.active traegt border-color
   var(--cw-orange) bei unveraenderten 1 px Breite, dazu box-shadow
   0 5px 18px rgba(243,147,37,.22) und translateY(-1px). */
.slide-surface .el.pult-active-hl [data-ar="karte"] {
  /* Der Rahmen der Karte steht als Inline-Stil, deshalb hier mit Vorrang */
  border-color: #F39325 !important;
  box-shadow: 0 5px 18px rgba(243, 147, 37, 0.22);
  transition: border-color 180ms ease, box-shadow 180ms ease;
}
.slide-surface .el.pult-active-hl {
  transform: translateY(-1px);
  transition: transform 180ms ease;
}
/* Elemente ohne eigene Kartenform behalten den Rahmen am Element */
.slide-surface .el.pult-active-hl:not(:has([data-ar="karte"])) {
  outline: 1px solid #F39325;
  outline-offset: 0;
  box-shadow: 0 5px 18px rgba(243, 147, 37, 0.22);
}
/* Wandernde Markierung: die aktive Form wird in der Hervorhebungsfarbe gefuellt, die Beschriftung weiss.
   Kein fill-Transition, sonst blitzt beim Umfaerben ein magenta Rechteck auf, das die Pfeilspitze verdeckt. */
/* Nur die FORM (Chevron) wird magenta gefuellt, nicht die Textbox der Nummer. Sonst faerbt die Regel
   die unsichtbare rect-Form der Nummer-Box magenta und legt so ein Rechteck ueber die Pfeilspitze. */
.slide-surface .el-shape.pult-mark-active svg path { fill: #F39325 !important; stroke: #F39325 !important; }
.slide-surface .el.pult-mark-active .run { color: #FFFFFF !important; font-weight: 700 !important; }
/* Aktive Elemente nach vorne (Form UND die Nummer darueber, sonst deckt der Pfeil die Zahl zu) */
.slide-surface .el.pult-mark-active { z-index: 5; }

/* Gewaehlter Eintrag innerhalb eines Designelements. Der erste Klick waehlt die
   Gruppe, ein weiterer greift den Eintrag darunter. */
.slide-surface .pult-eintrag-aktiv {
  outline: 1.5px dashed var(--accent-strong, #38BDF8);
  outline-offset: 2px;
}

/* Detailtafel unter einem durchschaltbaren Kartenraster. Sichtbar ist allein der
   Text des aktiven Eintrags, die Trennlinie erscheint mit dem ersten Schritt. */
.slide-surface [data-ar="tafeltext"] {
  opacity: 0;
  transition: opacity 0.3s ease;
}
.slide-surface .el-design.pult-tafel-offen .pult-item-active[data-ar="tafeltext"] {
  opacity: 1;
  filter: none;
}
.slide-surface [data-ar="tafelrule"] {
  opacity: 0;
  transition: opacity 0.3s ease;
}
.slide-surface .el-design.pult-tafel-offen [data-ar="tafelrule"] {
  opacity: 1;
}

/* Stufe eines Bandes, etwa die Risikoklassen. Beim Durchschalten aendert die
   aktive Stufe allein ihre Randfarbe, wie .risk-stage.interactive.active in der
   Vorlage: border-color var(--cw-orange), box-shadow und translateY(-1px). */
.slide-surface [data-ar="stufe"] {
  transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}
.slide-surface .pult-item-active[data-ar="stufe"] {
  border-color: #F39325 !important;
  box-shadow: 0 5px 18px rgba(243, 147, 37, 0.22);
  transform: translateY(-1px);
}