/* =========================================================================
   JadeMind × Maierhofer — Präsentation
   Tokens vom Design-System, plus Präsentations-Layer (Navigation, Slides,
   Animationen, Print).
   ========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Sora:wght@200;300;400;500;600;700;800&family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  /* Brand */
  --jm-mint:        #ADEAA5;
  --jm-mint-deep:   #7BD673;
  --jm-teal:        #57E9CE;
  --jm-teal-deep:   #2EC9AB;
  --jm-navy:        #2F4051;
  --jm-navy-deep:   #1E2A36;
  --jm-navy-soft:   #4A5C70;

  /* Neutrals */
  --jm-paper:       #FAFAF7;
  --jm-paper-2:     #F2F2EC;
  --jm-line:        #E6E6DF;
  --jm-line-strong: #C9C9BF;
  --jm-mute:        #8A8A82;
  --jm-white:       #FFFFFF;
  --jm-line-dark:   rgba(255,255,255,0.10);
  --jm-mute-dark:   rgba(255,255,255,0.55);

  /* Semantic */
  --jm-warning:     #F4C95D;
  --jm-danger:      #E5604D;
  --jm-info:        #6CA9F4;

  /* FG/BG */
  --fg-1:           var(--jm-navy);
  --fg-2:           var(--jm-navy-soft);
  --fg-3:           var(--jm-mute);
  --fg-accent:      var(--jm-navy-deep);
  --fg-on-dark-1:   var(--jm-white);
  --fg-on-dark-2:   rgba(255,255,255,0.72);
  --fg-on-dark-3:   var(--jm-mute-dark);

  --bg-1:           var(--jm-paper);
  --bg-2:           var(--jm-paper-2);
  --bg-card:        var(--jm-white);
  --bg-ink:         var(--jm-navy);
  --bg-ink-deep:    var(--jm-navy-deep);

  --line-1:         var(--jm-line);
  --line-2:         var(--jm-line-strong);

  --accent:         var(--jm-mint);
  --accent-deep:    var(--jm-mint-deep);
  --accent-2:       var(--jm-teal);

  /* Type */
  --font-display:   "Sora", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-sans:      "Sora", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body:      "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:      "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --lh-display:     1.02;
  --lh-tight:       1.1;
  --lh-snug:        1.25;
  --lh-body:        1.55;

  --tracking-tight: -0.022em;
  --tracking-snug:  -0.012em;
  --tracking-eyebrow: 0.14em;

  /* Spacing */
  --space-1:  4px;  --space-2:  8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 24px;  --space-6: 32px;  --space-7: 48px; --space-8: 64px;
  --space-9: 96px;  --space-10: 128px;

  /* Radii */
  --radius-xs:  2px; --radius-sm:  4px; --radius-md:  8px;
  --radius-lg:  14px; --radius-xl:  20px; --radius-pill: 999px;

  /* Shadow */
  --shadow-1: 0 1px 0 rgba(47,64,81,0.04), 0 1px 2px rgba(47,64,81,0.06);
  --shadow-2: 0 2px 4px rgba(47,64,81,0.06), 0 6px 16px rgba(47,64,81,0.08);
  --shadow-3: 0 8px 24px rgba(47,64,81,0.10), 0 24px 64px rgba(47,64,81,0.10);
  --shadow-ink: 0 30px 80px -20px rgba(47,64,81,0.45);

  /* Motion */
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1);
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --dur-fast:      120ms;
  --dur-base:      220ms;
  --dur-slow:      420ms;
  --dur-entrance:  520ms;
}

/* =========================================================================
   GLOBAL RESET
   ========================================================================= */

*, *::before, *::after { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0;
  background: #1A1A1A;
  color: var(--fg-1);
  font-family: var(--font-body);
  height: 100%;
  overflow: hidden;
}
body.is-overview { overflow: auto; background: var(--jm-navy-deep); }
body.is-printing { background: var(--jm-paper); overflow: visible; }
body.is-blackout { background: #000; }
body.is-blackout .slide-stage { opacity: 0; }

img { display: block; max-width: 100%; }
button { font: inherit; cursor: pointer; }

/* =========================================================================
   SLIDE STAGE — pseudo-fullscreen container scaling 1280×720 to viewport
   ========================================================================= */

.slide-stage {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  perspective: 1200px;
}

.slide {
  width: 1280px;
  height: 720px;
  background: var(--bg-1);
  color: var(--fg-1);
  font-family: var(--font-body);
  position: absolute;
  overflow: hidden;
  transform-origin: center center;
  transform: scale(var(--slide-scale, 1));
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity var(--dur-entrance) var(--ease-out),
    transform var(--dur-entrance) var(--ease-out),
    visibility 0s linear var(--dur-entrance);
}

.slide.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition:
    opacity var(--dur-entrance) var(--ease-out),
    transform var(--dur-entrance) var(--ease-out),
    visibility 0s linear 0s;
}

/* Slide variants */
.slide.ink       { background: var(--bg-ink);      color: var(--fg-on-dark-1); }
.slide.ink-deep  { background: var(--bg-ink-deep); color: var(--fg-on-dark-1); }
.slide.paper2    { background: var(--bg-2); }

/* =========================================================================
   SLIDE BUILDING BLOCKS
   ========================================================================= */

.slide-pad {
  position: absolute;
  top: 128px;
  right: 88px;
  bottom: 80px;
  left: 88px;
  display: flex;
  flex-direction: column;
}

.slide-logo {
  position: absolute;
  top: 40px;
  right: 88px;
  height: 26px;
  width: auto;
  z-index: 2;
}

.slide-page {
  position: absolute;
  bottom: 40px;
  right: 88px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--fg-3);
  letter-spacing: 0.06em;
}
.ink .slide-page, .ink-deep .slide-page { color: rgba(255,255,255,0.5); }

.slide-foot {
  position: absolute;
  bottom: 40px;
  left: 88px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--fg-3);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.ink .slide-foot, .ink-deep .slide-foot { color: rgba(255,255,255,0.5); }

.eyebrow-slide {
  font-family: var(--font-sans);
  font-size: 14px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--fg-2);
  display: inline-flex;
  align-items: center;
  gap: 14px;
}
.eyebrow-slide::before {
  content: "";
  width: 32px;
  height: 1px;
  background: currentColor;
  opacity: 0.6;
}
.ink .eyebrow-slide, .ink-deep .eyebrow-slide { color: rgba(255,255,255,0.65); }

.dot-mint { color: var(--jm-mint); }
.dot-teal { color: var(--jm-teal); }

.mint-wash {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 55% 45% at 85% 10%, rgba(173,234,165,0.10), transparent 70%);
  pointer-events: none;
}

/* =========================================================================
   TYPOGRAPHY HELPERS (slide-scope)
   ========================================================================= */

.slide h1, .slide h2, .slide h3, .slide h4 {
  font-family: var(--font-display);
  color: var(--fg-accent);
  text-wrap: balance;
  margin: 0;
  font-weight: 600;
}
.slide.ink h1, .slide.ink h2, .slide.ink h3, .slide.ink h4,
.slide.ink-deep h1, .slide.ink-deep h2, .slide.ink-deep h3, .slide.ink-deep h4 {
  color: #fff;
}

.slide-h1 { font-size: 64px; line-height: 1.04; letter-spacing: -0.024em; }
.slide-h2 { font-size: 48px; line-height: 1.08; letter-spacing: -0.020em; }
.slide-h3 { font-size: 28px; line-height: 1.2;  letter-spacing: -0.012em; }
.slide-display { font-size: 96px; line-height: 0.98; letter-spacing: -0.028em; font-weight: 600; }
.slide-display-xl { font-size: 120px; line-height: 0.98; letter-spacing: -0.030em; font-weight: 600; }

.slide p { margin: 0; text-wrap: pretty; }
.slide p + p { margin-top: 0.8em; }
.slide .lead {
  font-family: var(--font-body);
  font-size: 22px;
  line-height: 1.45;
  color: var(--fg-2);
}
.slide.ink .lead, .slide.ink-deep .lead { color: rgba(255,255,255,0.78); }

.slide .meta {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--fg-3);
  letter-spacing: 0.08em;
}

/* =========================================================================
   ANIMATIONS — entrance fade + up-translate per slide-child
   ========================================================================= */

.slide.is-active .anim-in {
  opacity: 1;
  transform: translateY(0);
  transition:
    opacity var(--dur-entrance) var(--ease-out),
    transform var(--dur-entrance) var(--ease-out);
}
.anim-in {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0s, transform 0s;
}
/* Stagger children */
.slide.is-active .anim-in:nth-child(1) { transition-delay: 60ms; }
.slide.is-active .anim-in:nth-child(2) { transition-delay: 140ms; }
.slide.is-active .anim-in:nth-child(3) { transition-delay: 220ms; }
.slide.is-active .anim-in:nth-child(4) { transition-delay: 300ms; }
.slide.is-active .anim-in:nth-child(5) { transition-delay: 380ms; }
.slide.is-active .anim-in:nth-child(6) { transition-delay: 460ms; }
.slide.is-active .anim-in:nth-child(7) { transition-delay: 540ms; }
.slide.is-active .anim-in:nth-child(8) { transition-delay: 620ms; }

/* =========================================================================
   CONTROL CHROME — bottom nav + progress + hint
   ========================================================================= */

.nav-chrome {
  position: fixed;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 8px 12px;
  background: rgba(30, 42, 54, 0.55);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-pill);
  z-index: 1000;
  opacity: 0;
  transition: opacity var(--dur-base) var(--ease-out);
  pointer-events: none;
}
body:hover .nav-chrome,
.nav-chrome:hover,
body.is-overview .nav-chrome {
  opacity: 1;
  pointer-events: auto;
}

.nav-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px; height: 32px;
  background: transparent;
  color: rgba(255, 255, 255, 0.85);
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.nav-btn:hover, .nav-btn:focus-visible {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  outline: none;
}

.nav-counter {
  font-family: var(--font-mono);
  font-size: 12px;
  color: rgba(255, 255, 255, 0.7);
  letter-spacing: 0.08em;
  padding: 0 4px;
  min-width: 56px;
  text-align: center;
}

.nav-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 2px;
  background: var(--jm-mint);
  z-index: 1000;
  transition: width var(--dur-base) var(--ease-out);
}

/* =========================================================================
   OVERVIEW MODE — ESC toggles a contact-sheet of all slides
   ========================================================================= */

body.is-overview .slide-stage {
  position: static;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  padding: 48px;
  perspective: none;
}

body.is-overview .slide {
  position: relative;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: scale(var(--ov-scale, 0.25));
  transform-origin: top left;
  margin-right: calc(-1280px * (1 - var(--ov-scale, 0.25)));
  margin-bottom: calc(-720px * (1 - var(--ov-scale, 0.25)));
  cursor: pointer;
  border: 2px solid transparent;
  border-radius: 4px;
  transition: none;
}

/* Kinder-Inhalte im Overview sofort sichtbar (nicht via .is-active gesteuert) */
body.is-overview .slide .anim-in {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}
body.is-overview .slide:hover {
  border-color: var(--jm-mint);
}
body.is-overview .slide.is-active {
  border-color: var(--jm-mint);
  box-shadow: 0 0 0 4px rgba(173, 234, 165, 0.25);
}

/* =========================================================================
   HINT / HELP OVERLAY
   ========================================================================= */

.help-toggle {
  position: fixed;
  bottom: 16px;
  right: 16px;
  width: 32px; height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(30, 42, 54, 0.55);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 50%;
  color: rgba(255, 255, 255, 0.85);
  z-index: 1000;
  opacity: 0;
  transition: opacity var(--dur-base) var(--ease-out);
}
body:hover .help-toggle,
.help-toggle:hover { opacity: 1; }

.help-panel {
  position: fixed;
  bottom: 64px;
  right: 16px;
  width: 320px;
  padding: 20px 22px;
  background: rgba(30, 42, 54, 0.92);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-lg);
  color: rgba(255, 255, 255, 0.85);
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.6;
  z-index: 1001;
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.help-panel.is-open {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.help-panel h4 {
  font-family: var(--font-display);
  font-size: 14px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin: 0 0 12px;
  color: #fff;
  font-weight: 500;
}
.help-panel kbd {
  font-family: var(--font-mono);
  font-size: 11px;
  padding: 2px 6px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  color: #fff;
}
.help-panel dl { margin: 0; }
.help-panel dt { color: #fff; margin-top: 8px; }
.help-panel dt:first-child { margin-top: 0; }
.help-panel dd { margin: 0; color: rgba(255,255,255,0.65); }

/* =========================================================================
   PRINT — flatten all slides for PDF export
   ========================================================================= */

@page { size: 1280px 720px; margin: 0; }

@media print {
  *, *::before, *::after {
    transition: none !important;
    animation: none !important;
  }
  html, body {
    background: #fff !important;
    overflow: visible !important;
    height: auto !important;
    width: auto !important;
  }
  .nav-chrome, .nav-progress, .help-toggle, .help-panel { display: none !important; }
  .slide-stage {
    position: static !important;
    display: block !important;
    perspective: none !important;
    width: 1280px !important;
    height: auto !important;
    inset: auto !important;
  }
  .slide {
    position: relative !important;
    inset: auto !important;
    transform: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    page-break-after: always;
    break-after: page;
    margin: 0 auto !important;
    box-shadow: none !important;
    width: 1280px !important;
    height: 720px !important;
  }
  .slide:last-child { page-break-after: auto; }
  .slide .anim-in {
    opacity: 1 !important;
    transform: none !important;
  }
}

body.is-printing {
  overflow: auto;
  height: auto;
  background: #888;
}
body.is-printing .slide-stage {
  position: static;
  display: block;
  perspective: none;
  inset: auto;
}
body.is-printing .slide {
  position: relative;
  inset: auto;
  transform: none;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  margin: 0 auto 24px;
  box-shadow: var(--shadow-3);
}
body.is-printing .slide .anim-in {
  opacity: 1;
  transform: none;
}
body.is-printing .nav-chrome,
body.is-printing .nav-progress,
body.is-printing .help-toggle,
body.is-printing .help-panel { display: none; }