@import url("./media/bgb-book/bgb-book.css");

/* Bausteine nur für dieses Deck: Startfolie mit Referenten und Spielregeln, Leitsätze auf Papier, Gesetzestext */

/* ---------- Startfolie ---------- */
.reveal .cover {
  /* Porträthöhe (inkl. Rahmen) und Abstand der beiden Referenten; die Spielregeln-Box
     rechts übernimmt daraus ihre Höhe, damit ihre Kanten auf den Bildkanten liegen. */
  --portrait-h: 202px;
  --portrait-gap: 64px;
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  grid-template-rows: 226px minmax(0, 1fr);
  grid-template-areas:
    "heading time"
    "persons rules";
  gap: 64px 80px;
  align-items: stretch;
  flex: 1;
  min-height: 0;
}
.reveal .cover-heading {
  grid-area: heading;
}
.reveal .cover .eyebrow {
  margin-bottom: 26px;
}
.reveal .cover h2 {
  margin: 0;
}
.reveal .event-time {
  /* Kein Kasten: Uhr, Datum als Eyebrow und Uhrzeit in Serifen wiederholen die Grammatik
     der linken Spalte (Eyebrow + Überschrift), wie die Website ohne gefüllte Flächen arbeitet. */
  grid-area: time;
  display: flex;
  align-items: flex-start;
  gap: 40px;
  padding: 0;
}
.reveal .event-time .clock-button {
  /* Text oben bündig mit der Eyebrow der linken Spalte, die Uhr mittig auf dem Textblock */
  align-self: center;
}
.reveal .clock-button {
  position: relative;
  display: block;
  width: 160px;
  height: 160px;
  flex: 0 0 160px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--gold);
  cursor: pointer;
  font: inherit;
  transition: box-shadow 0.4s ease;
}
.reveal .clock-button:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 6px;
}
.reveal .live-clock {
  display: block;
  width: 160px;
  height: 160px;
  transition:
    opacity 0.25s ease,
    transform 0.25s ease;
}
.clock-face {
  fill: var(--navy);
  stroke: currentColor;
  stroke-width: 2;
}
.clock-tick {
  stroke: currentColor;
  stroke-width: 2;
}
.clock-hour,
.clock-minute {
  stroke: var(--fg);
  stroke-width: 5;
  stroke-linecap: round;
}
.clock-minute {
  stroke-width: 3;
}
.clock-second {
  stroke: currentColor;
  stroke-width: 1.5;
}
.clock-pin {
  fill: currentColor;
}

/* Gong: `.is-ringing` (talk.js) lässt die Uhr etwa 4,5 s lang schwingen wie nach einem Anschlag
   (kurzes Kippen, das ausklingt, Zifferblatt leuchtet auf), drei Schallringe laufen von der Uhr
   nach außen (über ihren Rand hinaus, das Feld schneidet sie an seinen runden Ecken ab). */
.reveal .gong {
  position: absolute;
  inset: 0;
  display: block;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}
.reveal .gong-wave {
  position: absolute;
  inset: 0;
  border: 3px solid var(--gold);
  border-radius: 50%;
  opacity: 0;
  transform: scale(1);
}
.reveal .is-ringing .live-clock {
  position: relative;
  z-index: 1;
  transform-origin: 50% 50%;
  animation: gong-strike 4.6s cubic-bezier(0.2, 0.7, 0.3, 1) both;
  filter: drop-shadow(0 0 14px rgb(199 170 106 / 0.55));
  transition: filter 0.4s ease;
}
.reveal .is-ringing .clock-face {
  animation: gong-glow 4.6s ease both;
}
.reveal .is-ringing .gong {
  visibility: visible;
  opacity: 1;
}
.reveal .is-ringing .gong-wave {
  animation: gong-wave 2.8s cubic-bezier(0.1, 0.6, 0.4, 1) both;
}
.reveal .is-ringing .gong-wave:nth-child(2) {
  animation-delay: 0.35s;
}
.reveal .is-ringing .gong-wave:nth-child(3) {
  animation-delay: 0.7s;
}
.reveal .event-time .event-hours {
  transition: color 0.4s ease;
}
.reveal .event-time:has(.is-ringing) .event-hours {
  color: var(--gold);
}
@keyframes gong-strike {
  0% {
    transform: scale(1) rotate(0deg);
  }
  4% {
    transform: scale(1.08) rotate(-5deg);
  }
  10% {
    transform: scale(1.03) rotate(4deg);
  }
  17% {
    transform: scale(1.01) rotate(-3deg);
  }
  25% {
    transform: scale(1) rotate(2deg);
  }
  34% {
    transform: scale(1) rotate(-1.2deg);
  }
  44% {
    transform: scale(1) rotate(0.6deg);
  }
  55%,
  100% {
    transform: scale(1) rotate(0deg);
  }
}
@keyframes gong-glow {
  0% {
    fill: var(--navy);
  }
  5%,
  40% {
    fill: #3a4a3a;
    fill: color-mix(in srgb, var(--gold) 22%, var(--navy));
  }
  100% {
    fill: var(--navy);
  }
}
@keyframes gong-wave {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  10% {
    opacity: 0.75;
  }
  100% {
    opacity: 0;
    transform: scale(2.6);
  }
}
@media (prefers-reduced-motion: reduce) {
  .reveal .is-ringing .live-clock,
  .reveal .is-ringing .gong-wave {
    animation: none;
  }
  .reveal .is-ringing .gong-wave {
    opacity: 0;
  }
}
html.print-pdf .reveal .gong {
  display: none;
}
.reveal .event-date {
  white-space: nowrap;
}
.reveal .event-hours {
  /* Wie die Titelzeile links: Eyebrow, dann Serifen in h2-Größe, gleiche Oberkanten */
  margin-top: 26px;
  font-family: "Playfair Display", Georgia, serif;
  font-size: var(--fs-h2);
  line-height: 1.14;
  letter-spacing: -0.01em;
  color: var(--fg-strong);
}
.reveal .event-channel {
  margin-top: 8px;
  font-size: 25px;
}
.reveal .persons {
  grid-area: persons;
  display: grid;
  grid-template-rows: auto auto;
  align-content: center;
  gap: var(--portrait-gap);
  margin: 0;
  padding: 0;
}
.reveal .persons li {
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 30px;
  align-items: center;
}
.reveal .persons img {
  box-sizing: border-box;
  width: 150px;
  height: var(--portrait-h);
  object-fit: cover;
  border-radius: 12px;
  display: block;
  margin: 0;
  border: 1px solid var(--line);
}
.reveal .persons .label {
  margin-bottom: 6px;
}
.reveal .persons h3 {
  font-size: 36px;
  margin-bottom: 6px;
}
.reveal .persons p {
  font-size: 25px;
  line-height: 1.32;
}
.reveal .persons p + p {
  margin-top: 4px;
}
.reveal .rules {
  grid-area: rules;
  /* Gleich hoch wie die beiden Porträts samt Abstand und wie sie in der Zeile zentriert:
     Oberkante auf dem oberen, Unterkante auf dem unteren Porträt. */
  align-self: center;
  box-sizing: border-box;
  height: calc(2 * var(--portrait-h) + var(--portrait-gap));
  display: grid;
  /* Haarlinien statt Kasten, wie die Leistungsliste der Website: obere und untere Linie
     liegen auf den Bildkanten, eine dritte trennt die beiden Regeln. */
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 0;
}
.reveal .rules ul {
  display: grid;
  grid-template-rows: repeat(2, minmax(0, 1fr));
}
.reveal .rules li {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 28px;
  align-items: center;
  padding-block: 8px;
}
.reveal .rules li + li {
  border-top: 1px solid var(--line);
}
.reveal .rule-icon {
  /* Blanke Linien-Icons in Gold wie in den Kontaktkästen der Website, ohne Kreisplakette */
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  color: var(--gold);
  font-size: 48px;
}
.reveal .rules h3 {
  font-size: 30px;
  margin-bottom: 4px;
}
.reveal .rules p {
  font-size: 25px;
  line-height: 1.32;
  color: var(--muted);
}

/* ---------- Leitsätze: zwei DIN-A4-Blätter auf dem Schreibtisch, zoom- und schwenkbar ---------- */
/* Schreibtisch und Buchbereich reichen bis zu den Folienrändern und enden genau an der Linie
   über der Fußzeile: hineingezoomt läuft der Inhalt bis an den Rand, Schatten (und im
   Einzelblatt das Blatt) werden erst dort abgeschnitten. Der Kopfabstand von 28 px liegt auf
   der Leinwand (.desk-canvas, .book-zoom), so dass die Lage bei Zoom 1 unverändert ist */
.reveal section#leitsaetze,
html.print-pdf .reveal .slides section#leitsaetze,
html.print-pdf .reveal .slides section#bgb {
  padding: 0 0 var(--footer-h) !important;
}
.reveal .desk-scene {
  position: relative;
  flex: 1;
  min-height: 0;
  display: flex;
}
/* Sichtfenster: scrollt nativ (Zwei-Finger-Schieben, Trägheit), Zoom liegt auf der Leinwand */
.reveal .desk {
  --zoom: 1;
  flex: 1;
  min-height: 0;
  display: flex;
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
}
.reveal .desk::-webkit-scrollbar {
  display: none;
}
.reveal .desk.is-zoomed {
  cursor: grab;
}
.reveal .desk.is-dragging {
  cursor: grabbing;
  user-select: none;
}
.reveal .desk-canvas {
  zoom: var(--zoom);
  margin: auto;
  display: flex;
  gap: 64px;
  padding: 42px 40px 36px; /* 28 px Kopfabstand der Folie + 14 px */
  transition:
    gap 0.42s cubic-bezier(0.33, 1, 0.68, 1),
    padding 0.42s cubic-bezier(0.33, 1, 0.68, 1);
}
/* Einzelblatt (talk.js): das andere Blatt schrumpft auf Null und blendet aus, Lücke und Rand
   der Leinwand fallen weg; die Kamerafahrt (0,48 s) misst je Bild nach und endet zuletzt */
.reveal .desk.is-focused .desk-canvas {
  gap: 0;
  padding-left: 0;
  padding-right: 0;
}
.reveal .desk:not(.is-focused) .paper {
  cursor: zoom-in;
}
/* Im Einzelblatt führt ein Klick zurück zu beiden Blättern (talk.js) */
.reveal .desk.is-focused .paper.is-focus {
  cursor: zoom-out;
}
.reveal .desk.is-dragging .paper {
  cursor: grabbing;
}
.reveal .paper.is-away {
  width: 0;
  padding-left: 0;
  padding-right: 0;
  opacity: 0;
  box-shadow: none;
  pointer-events: none;
}
.reveal .desk.is-instant .desk-canvas,
.reveal .desk.is-instant .paper {
  transition: none;
}
@media (prefers-reduced-motion: reduce) {
  .reveal .desk-canvas,
  .reveal .paper {
    transition: none;
  }
}
/* Das Blatt: 620 × 877 px, Verhältnis 1 : √2, gesetzt in EB Garamond wie das BGB */
.reveal .paper {
  --paper-fs: 15.5px;
  flex: none;
  box-sizing: border-box;
  width: 620px;
  height: 877px;
  padding: 46px 50px 36px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: linear-gradient(180deg, #fdfcf8 0%, #fbf9f4 60%, #f8f5ee 100%);
  color: #141414;
  font-family: "BGB Garamond", Georgia, serif;
  font-size: var(--paper-fs);
  line-height: 1.38;
  text-align: left;
  hyphens: manual;
  -webkit-hyphens: manual;
  box-shadow:
    0 1px 2px rgb(1 32 48 / 0.16),
    0 2px 8px rgb(1 32 48 / 0.1),
    0 28px 48px -22px rgb(1 32 48 / 0.55);
  -webkit-font-smoothing: antialiased;
  transition:
    width 0.42s cubic-bezier(0.33, 1, 0.68, 1),
    padding 0.42s cubic-bezier(0.33, 1, 0.68, 1),
    opacity 0.3s ease;
}
/* Feste Satzbreite (Blattbreite minus Ränder): beim Weichen wird der Text am rechten Rand
   beschnitten statt umgebrochen */
.reveal .paper > * {
  width: 520px;
  flex: none;
}
.reveal .paper p {
  color: inherit;
  line-height: inherit;
}
/* Kopf wie der Briefkopf der NRW-Justiz: Wappen, Gerichtsname und Entscheidungsart in fetter Grotesk */
.reveal .paper-head {
  text-align: center;
  padding-bottom: 12px;
  margin-bottom: 18px;
  border-bottom: 1px solid #b9b2a3;
}
.reveal .paper-wappen {
  display: block;
  width: auto;
  height: 3.6em;
  margin: 0 auto 0.55em;
}
.reveal .paper-court,
.reveal .paper-kind {
  font-family:
    "Helvetica Neue", Helvetica, Arial, "Liberation Sans", sans-serif;
  font-weight: 700;
  color: #111;
}
.reveal .paper-court {
  font-size: 1.15em;
  line-height: 1.2;
  letter-spacing: 0.06em;
  margin-bottom: 0.3em;
}
.reveal .paper-kind {
  font-size: 0.95em;
  line-height: 1.2;
  letter-spacing: 0.1em;
  margin-bottom: 0.55em;
}
.reveal .paper-meta {
  font-size: 0.95em;
  color: #333;
}
.reveal .paper-title {
  font-family: inherit;
  font-weight: 400;
  font-style: italic;
  font-size: 1.2em;
  line-height: 1.2;
  letter-spacing: 0.05em;
  color: #141414;
  margin: 0 0 12px;
}
.reveal .paper-list {
  display: flex;
  flex-direction: column;
  gap: 0.62em;
}
.reveal .paper-list li {
  position: relative;
  padding-left: 2em;
  line-height: inherit;
  text-align: justify;
}
.reveal .paper-num {
  position: absolute;
  left: 0;
  top: 0;
}
.reveal .paper-foot {
  margin-top: auto;
  padding-top: 10px;
  border-top: 1px solid #d5cfc2;
  font-size: 0.72em;
  line-height: 1.35;
  color: #4a4a4a;
}

/* ---------- Gesetzestext ---------- */
.reveal .law {
  display: flex;
  flex-direction: column;
  gap: 26px;
  margin-top: 8px;
}
.reveal .law p {
  font-size: 36px;
  line-height: 1.38;
  padding-left: 90px;
  position: relative;
}
.reveal .law-absatz {
  position: absolute;
  left: 0;
  color: var(--accent-ink);
}

/* Fragenfolie: drei gleich aufgebaute Kontaktspalten. */
.reveal #fragen .contact {
  max-width: none;
  margin-top: 34px;
  gap: 48px;
}
.reveal #fragen .contact-card {
  min-width: 0;
}
.reveal #fragen .contact h3 {
  font-size: 32px;
  margin-bottom: 10px;
  white-space: nowrap;
}
.reveal #fragen .contact p {
  font-size: 28px;
  line-height: 1.5;
}
.reveal #fragen .contact .contact-firm {
  min-height: 84px;
}
.reveal #fragen .contact .contact-address {
  margin: 22px 0 26px;
}
.reveal #fragen .contact .label {
  font-size: 18px;
  margin-bottom: 8px;
}
.reveal #fragen .contact .contact-person {
  font-size: 32px;
  margin-bottom: 18px;
}
.reveal #fragen .contact a {
  white-space: nowrap;
}

/* ---------- BGB-Buch: allein auf der Folie, Zoom und Blättern ---------- */
/* Die Folie zeigt nur das Buch: wenig Kopfabstand, Buch so hoch wie der Platz über der Fußzeile */
.reveal section#bgb {
  padding: 0 0 var(--footer-h); /* Buchbereich bis zu den Rändern und zur Linie über der Fußzeile */
}
.reveal .book-scene {
  /* Seitenmaßstab: 541,4pt Seitenhöhe × 1,25 = 902px, passt in 944px Platz samt Deckelrand */
  --book-zoom: 1.25;
  /* Einband und Titelblatt sind für 0,86 gesetzt und wachsen mit */
  --cover-zoom: calc(var(--book-zoom) / 0.86);
  --board-overhang: calc(5px * var(--cover-zoom));
  display: flex;
  /* Sichtfenster wie der Schreibtisch: Zwei-Finger-Schieben scrollt nativ, Pinch zoomt die
     Leinwand .book-zoom (talk.js, trackpadZoom); keine sichtbare Leiste */
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
}
.reveal .book-scene::-webkit-scrollbar {
  display: none;
}
.reveal .book-zoom {
  --zoom: 1;
  margin: auto;
  zoom: var(--zoom);
  padding: 28px 0 0; /* Kopfabstand der Folie, skaliert mit */
}
.reveal .bgb-spread .cover-front,
.reveal .bgb-spread .cover-inside,
.reveal .bgb-spread .sheet--mini,
.reveal .leaf .cover-front,
.reveal .leaf .cover-inside,
.reveal .leaf .sheet--mini {
  zoom: var(--cover-zoom);
}
/* Im Fluss der Leinwand (die Bühnenregel weiter unten positioniert das Mini-Buch absolut), damit
   die Leinwand die Buchgröße hat und der Zoom um den Zeiger rechnen kann */
.reveal .book-zoom .book3d {
  position: relative;
  left: auto;
  top: auto;
  transform: none;
}
.reveal .book-live {
  position: absolute;
  inset: 0;
  display: none;
  cursor: pointer;
}
.reveal .book-scene.is-live .book-block {
  visibility: hidden;
}
.reveal .book-scene.is-live .book-live {
  display: block;
}
.reveal .book-print {
  display: none;
  position: absolute;
  inset: 0;
}
/* Direktaufruf: statische Doppelseite, bis das Buch geladen ist */
.reveal .book-scene.is-static .book-block {
  visibility: hidden;
}
.reveal .book-scene.is-static .book-print {
  display: block;
}
.reveal .book-tools {
  position: absolute;
  left: 50%;
  bottom: 10px;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgb(255 255 255 / 0.9);
  border: 1px solid var(--line);
  box-shadow: 0 10px 30px -18px rgb(1 32 48 / 0.5);
  z-index: 6;
  opacity: 0;
  transition: opacity 0.3s;
}
/* Leiste nur, wenn die Maus im unteren Streifen des Buchbereichs ist (talk.js setzt
   is-near-tools) oder ein Feld den Fokus hat */
.reveal .book-scene.is-live.is-near-tools .book-tools,
.reveal .book-scene.is-live:focus-within .book-tools,
.reveal .desk-scene.is-near-tools .book-tools,
.reveal .desk-scene:focus-within .book-tools {
  opacity: 1;
}
.reveal .book-tools button {
  height: 44px;
  min-width: 44px;
  padding: 0 14px;
  white-space: nowrap;
  border-radius: 22px;
  border: 1px solid var(--gold);
  background: #fff;
  color: var(--gold-ink);
  font:
    26px/1 "Varela Round",
    system-ui,
    sans-serif;
  cursor: pointer;
}
.reveal .book-tools .pg-nav {
  font:
    34px/1 "Playfair Display",
    serif;
  padding: 0 0 4px;
  border-radius: 50%;
}
.reveal .book-tools .zoom-reset {
  font-size: 20px;
}
.reveal .book-tools .zoom-value {
  min-width: 80px;
  text-align: center;
  font-size: 22px;
  color: var(--muted);
}
/* Seite oder Paragraph aufschlagen */
.reveal .book-tools .pg-pages {
  margin-left: 6px;
  padding-left: 16px;
  border-left: 1px solid var(--line);
  font-size: 20px;
  color: var(--muted);
  white-space: nowrap;
}
.reveal .book-tools .pg-goto {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 20px;
  color: var(--muted);
}
.reveal .book-tools .pg-goto input {
  width: 4.2em;
  height: 40px;
  padding: 0 10px;
  border: 1px solid var(--gold);
  border-radius: 20px;
  background: #fff;
  color: var(--ink);
  font:
    22px/1 "Varela Round",
    system-ui,
    sans-serif;
  text-align: center;
  -moz-appearance: textfield;
  appearance: textfield;
}
.reveal .book-tools .pg-goto input::-webkit-outer-spin-button,
.reveal .book-tools .pg-goto input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.reveal .book-tools .pg-goto input:focus {
  outline: 2px solid var(--gold);
  outline-offset: 1px;
}
.reveal .book-tools .pg-goto input.is-invalid {
  border-color: #b3261e;
  color: #b3261e;
}
.reveal .bgb-page {
  text-align: justify;
}
.reveal .bgb-page p {
  line-height: var(--lead);
}
.reveal .bgb-page sup {
  vertical-align: 0.45em;
}
.reveal .bgb-page b {
  color: inherit;
}
.print-pdf .reveal .book-block,
.print-pdf .reveal .book-live,
.print-pdf .reveal .book-tools {
  display: none;
}
.print-pdf .reveal .book-print {
  display: block;
}

/* Titelseite im Mini-Buch (Grotesk-frei, wie die Beck-Titelseite gesetzt) */
.reveal .bgb-sheet {
  background: #fbf9f4;
  color: #141414;
  font-family: "BGB Garamond", Georgia, serif;
  line-height: 1.2;
  box-sizing: border-box;
}
.reveal .bgb-sheet p {
  margin: 0;
  color: #141414;
  line-height: 1.25;
}
.reveal .bgb-sheet .sheet-title {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  height: 100%;
  gap: 1.1em;
  padding: 0 1em;
}
.reveal .bgb-sheet .sheet-title-main {
  font-size: 2em;
  line-height: 1.1;
}
.reveal .bgb-sheet .sheet-title-sub {
  font-size: 0.95em;
  max-width: 22em;
}
.reveal .bgb-sheet .sheet-title-kind {
  font-size: 0.95em;
  max-width: 22em;
}
.reveal .bgb-sheet .sheet-title-edition {
  font-size: 1em;
}
.reveal .bgb-sheet .sheet-title-note {
  font-size: 0.78em;
  color: #444;
  max-width: 24em;
}
.reveal .bgb-sheet .sheet-title-publisher {
  margin-top: auto;
  padding-bottom: 0.5em;
  font-size: 0.95em;
}

/* ---------- BGB-Buch: geschlossener Rückfall (Mini-Buch) und Bühne ---------- */
.reveal .book-scene {
  position: relative;
  flex: 1;
  min-height: 0;
}
.reveal .book3d {
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(703pt * var(--book-zoom));
  height: calc(541.4pt * var(--book-zoom));
  transform: translate(-50%, -50%);
  perspective: 2600px;
}
.reveal .book-block {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transform: translateX(calc(-175.75pt * var(--book-zoom)));
}
.reveal .book-base {
  position: absolute;
  left: 50%;
  top: -8px;
  width: calc(50% + 8px);
  height: calc(100% + 16px);
  background: #f9f8f6;
  border: 1px solid #d4d4d4;
  border-left: none;
  border-radius: 0 4px 4px 0;
  box-shadow: 0 24px 50px -20px rgb(1 32 48 / 0.45);
}
.reveal .leaf {
  position: absolute;
  left: 50%;
  top: 0;
  width: 50%;
  height: 100%;
  transform-origin: left center;
  transform-style: preserve-3d;
  z-index: calc(20 - var(--i));
}
.reveal .leaf .face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  overflow: hidden;
}
.reveal .leaf .face.back {
  transform: rotateY(180deg);
}
.reveal .leaf .sheet--mini {
  width: 100%;
  height: 100%;
  padding: 26px 24px;
  font-size: 17px;
  box-shadow: inset 8px 0 14px -10px rgb(0 0 0 / 0.35);
}
.reveal .leaf .face.back .sheet--mini {
  box-shadow: inset -8px 0 14px -10px rgb(0 0 0 / 0.35);
}
.reveal .leaf .face .bgb-page {
  zoom: var(--book-zoom);
}
.reveal .leaf .face.front .bgb-page {
  box-shadow: inset 8px 0 14px -10px rgb(0 0 0 / 0.35);
}
.reveal .leaf .face.back .bgb-page {
  box-shadow: inset -8px 0 14px -10px rgb(0 0 0 / 0.35);
}
/* Titelei im blätterbaren Buch: Einband und Titelblatt in Seitengröße */
.reveal .bgb-spread .cover-front,
.reveal .bgb-spread .cover-inside {
  inset: 0;
  border: none;
  border-radius: 0;
}
/* liegender Deckel: ragt wie der Buchkörper 5px über die Seiten hinaus */
.reveal .bgb-spread .bgb-spread-page.is-board .cover-front {
  inset: -5px -5px -5px 0;
  border: 1px solid #d4d4d4;
  border-left: none;
  border-radius: 0 4px 4px 0;
}
.reveal .bgb-spread .bgb-spread-page.is-board .cover-inside {
  inset: -5px 0 -5px -5px;
  border: 1px solid #d4d4d4;
  border-right: none;
  border-radius: 4px 0 0 4px;
}
.reveal .bgb-spread .sheet--mini {
  width: 100%;
  height: 100%;
  padding: 26px 24px;
  font-size: 17px;
}

/* Einband: weiß mit grauem Rücken, Logotype in Blau, Sand und Rot, Titel in Rot, Grotesk */
.reveal .cover-front,
.reveal .cover-inside {
  position: absolute;
  inset: -8px -8px -8px 0;
  background: #f9f8f6;
  border: 1px solid #d4d4d4;
  border-left: none;
  border-radius: 0 4px 4px 0;
  font-family:
    "Helvetica Neue", Helvetica, Arial, "Liberation Sans", sans-serif;
  color: #0a0a0a;
}
.reveal .cover-front {
  display: grid;
  grid-template-columns: 44px 1fr;
}
.reveal .cover-inside {
  border-radius: 4px 0 0 4px;
  border-left: 1px solid #d4d4d4;
  border-right: none;
}
.reveal .cover-spine {
  background: #d4d4d4;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  padding: 26px 0 22px;
  font-size: 12px;
  letter-spacing: 0.02em;
  color: #222;
}
.reveal .cover-spine span {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  white-space: nowrap;
}
.reveal .cover-face {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 34px 20px 24px;
}
.reveal .cover-face p {
  margin: 0;
  line-height: 1.12;
}
.reveal .cover-face .cover-logo {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  font-weight: 700;
  font-size: 118px;
  line-height: 0.9;
  letter-spacing: -0.02em;
  margin-bottom: 30px;
}
.reveal .cover-logo span {
  display: inline-block;
}
.reveal .cover-logo-b1 {
  color: #2d4c9f;
  position: relative;
  z-index: 2;
}
.reveal .cover-logo-g {
  color: #ebcfa7;
  margin: 0 -0.28em;
  position: relative;
  z-index: 1;
}
.reveal .cover-logo-b2 {
  color: #dd2d20;
  position: relative;
  z-index: 2;
}
.reveal .cover-face .cover-name {
  color: #d0281b;
  font-size: 34px;
  line-height: 1.12;
  margin-bottom: 26px;
}
.reveal .cover-face .cover-laws {
  font-size: 15.5px;
  line-height: 1.35;
  color: #0a0a0a;
}
.reveal .cover-face .cover-edition {
  margin-top: auto;
  color: #dd2d20;
  font-size: 19px;
  line-height: 1.25;
  padding-top: 40px;
}
.reveal .cover-face .cover-publisher {
  margin-top: 22px;
  font-size: 15px;
  color: #0a0a0a;
}

/* Partner der Auftaktveranstaltung, in der Reihenfolge F&M, Pilz, Kohnen. */
.reveal .deck-footer .footer-partner {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-shrink: 0;
}
/* Mittig im bestehenden 48-px-Abstand, passend zur dezenten Fußlinie. */
.reveal .deck-footer .footer-partner::before {
  content: "";
  position: absolute;
  left: -24px;
  top: 50%;
  width: 1px;
  height: 30px;
  transform: translateY(-50%);
  background: var(--line);
  pointer-events: none;
}
.reveal .footer-partner img {
  display: block;
  width: auto;
  height: 30px;
  margin: 0;
}
.reveal .footer-partner img[src$="pilz-logo.png"] {
  /* Transparente Bildränder: 38 px ergeben rund 30 px sichtbare Logohöhe. */
  height: 38px;
}
.reveal
  section[data-surface="light"]
  .footer-partner
  img[src$="pilz-logo.png"] {
  filter: brightness(0) saturate(100%);
}
/* Original-PNG direkt skalieren, ohne SVG-Filter und Alpha-Masken.
   Das Signet wird an seinen Originalkanten ausgeschnitten. Die Schrift
   blendet ihren weißen Hintergrund per multiply bzw. screen aus. */
.reveal .footer-partner:has(> img[src$="kohnen-partner-logo.png"]) {
  position: relative;
  isolation: isolate;
  background: var(--paper);
}
.reveal .footer-partner img[src$="kohnen-partner-logo.png"] {
  clip-path: polygon(
    0 13.513514%,
    10.698198% 13.513514%,
    10.698198% 35.135135%,
    5.405405% 35.135135%,
    5.405405% 56.306306%,
    0 56.306306%
  );
}
.reveal .footer-partner:has(> img[src$="kohnen-partner-logo.png"])::after {
  content: "";
  position: absolute;
  inset: 0;
  background: url("./media/kohnen-partner-logo.png") center / contain no-repeat;
  clip-path: inset(0 0 0 14%);
  mix-blend-mode: multiply;
  pointer-events: none;
}
.reveal
  section[data-surface="dark"]
  .footer-partner:has(> img[src$="kohnen-partner-logo.png"]) {
  background: var(--navy);
}
.reveal
  section[data-surface="dark"]
  .footer-partner:has(> img[src$="kohnen-partner-logo.png"])::after {
  filter: invert(1) grayscale(1) brightness(1.14);
  mix-blend-mode: screen;
}

/* ---------- Fragenfolie: wechselnde Frage in der Überschrift ---------- */
/* Alle Fragen liegen in derselben Rasterzelle: die Überschrift ist so hoch wie die längste,
   die Kontaktspalten darunter rücken beim Wechsel nicht. Sichtbar ist nur `is-current`;
   ohne JavaScript und im PDF ist das die erste. */
.reveal #fragen .question-cycle {
  display: grid;
}
/* Nacheinander statt übereinander: die alte Frage blendet in 1,2 s aus, dann die neue in
   1,2 s ein, beide mit derselben symmetrischen Kurve, so überlagern sich nie zwei Texte und
   nichts springt. Nur die Deckkraft wechselt; keine Sichtbarkeitsumschaltung, die als Schnitt
   wirken könnte. */
.reveal #fragen .question {
  grid-area: 1 / 1;
  opacity: 0;
  pointer-events: none;
  transition: opacity 1.2s cubic-bezier(0.45, 0, 0.55, 1);
}
.reveal #fragen .question.is-current {
  opacity: 1;
  pointer-events: auto;
  transition: opacity 1.2s cubic-bezier(0.45, 0, 0.55, 1) 1.2s;
}
@media (prefers-reduced-motion: reduce) {
  .reveal #fragen .question,
  .reveal #fragen .question.is-current {
    transition: none;
  }
}