/* K&K „Open Source Rebellen" – HTML-Foliensatz
   Logikgröße: 1280 × 720 (16:9). Skalierung per JS via transform. */

:root {
  --indigo:    #001478;
  --indigo-lt: #17277F;
  --lila:      #AA5AFF;
  --turkis:    #69F5C8;
  --t-dunk:    #00E1B9;
  --t-hell:    #A0FFDC;
  --blau:      #0AAEFE;
  --orange:    #FF6600;
  --white:     #FFFFFF;
  --ink:       #1A2230;
  --ink-soft:  #3A4658;
  --grey:      #5A6B80;
  --cloud:     #F1F4F9;
  --line:      #D6DEEA;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: #000;
  font-family: "Barlow", system-ui, -apple-system, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;
  font-feature-settings: "kern", "liga";
  color: var(--ink);
  overflow: hidden;
}

.deck-stage {
  position: fixed;
  inset: 0;
  overflow: hidden;
}

.deck {
  position: absolute;
  left: 0;
  top: 0;
  width: 1280px;
  height: 720px;
  transform: scale(1);
  transform-origin: 0 0;
  background: var(--white);
}

.slide {
  position: absolute;
  inset: 0;
  display: none;
  background: var(--white);
  overflow: hidden;
}

.slide.active { display: block; }

/* gemeinsame Sub-Elemente */
.kicker {
  position: absolute;
  left: 60px;
  top: 50px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.22em;
  color: var(--lila);
  text-transform: uppercase;
}
.kicker .num { margin-right: 50px; }
.kicker.dark { color: var(--turkis); }

.title {
  position: absolute;
  left: 60px;
  top: 77px;
  right: 60px;
  max-height: 92px;
  font-size: 38px;
  font-weight: 800;
  line-height: 1.08;
  color: var(--indigo);
  overflow: hidden;
}
.accent {
  position: absolute;
  left: 60px;
  top: 159px;
  width: 70px;
  height: 5px;
  background: var(--lila);
  border-radius: 3px;
}

.foot {
  position: absolute;
  left: 60px;
  bottom: 28px;
  font-size: 12px;
  color: var(--grey);
}
.foot .num { font-weight: 700; color: var(--ink); margin-right: 18px; }
.foot.dark { color: var(--t-hell); }
.foot.dark .num { color: var(--white); }

.logo-foot {
  position: absolute;
  right: 60px;
  bottom: 22px;
  height: 22px;
}

.callout {
  position: absolute;
  left: 60px;
  right: 60px;
  bottom: 88px;
  height: 63px;
  background: var(--indigo);
  color: var(--white);
  border-radius: 6px;
  display: flex;
  align-items: center;
  padding: 0 24px;
  font-size: 16px;
  line-height: 1.35;
  font-weight: 500;
}
.callout::before {
  content: "▸";
  color: var(--turkis);
  font-weight: 800;
  margin-right: 14px;
  font-size: 18px;
}

/* Bullet-Liste (geteilt) */
.bullets {
  position: absolute;
  left: 60px;
  right: 60px;
  top: 188px;
  bottom: 78px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  font-size: 18px;
  line-height: 1.45;
  color: var(--ink);
}
.bullets.has-callout { bottom: 165px; }
.bullets > li {
  list-style: none;
  position: relative;
  padding-left: 28px;
}
.bullets > li::before {
  content: "▸";
  position: absolute;
  left: 0;
  color: var(--lila);
  font-weight: 800;
}
.bullets b, .bullets strong { color: var(--indigo); font-weight: 700; }

/* COVER + CONTACT  (gleiches Layout) */
.slide-cover,
.slide-contact { background: var(--indigo); color: var(--white); }
.slide-cover .cover-title,
.slide-contact .cover-title {
  position: absolute;
  left: 80px;
  right: 80px;
  top: 200px;
  font-size: 56px;
  font-weight: 800;
  line-height: 1.05;
  color: var(--white);
}
.slide-cover .cover-sub,
.slide-contact .cover-sub {
  position: absolute;
  left: 80px;
  right: 80px;
  top: 360px;
  font-size: 26px;
  color: var(--turkis);
  font-weight: 500;
}
.slide-cover .cover-meta,
.slide-contact .cover-meta {
  position: absolute;
  left: 80px;
  bottom: 110px;
  color: var(--t-hell);
  font-size: 18px;
  line-height: 1.5;
}
.slide-cover .cover-meta .speaker,
.slide-contact .cover-meta .speaker {
  color: var(--white);
  font-weight: 700;
  font-size: 22px;
}
.slide-cover .cover-bar,
.slide-contact .cover-bar {
  position: absolute;
  left: 80px;
  top: 380px;
  width: 80px;
  height: 6px;
  background: var(--turkis);
  border-radius: 3px;
  display: none;
}

/* DIVIDER */
.slide-divider { background: var(--indigo); color: var(--white); }
.slide-divider .blk-num {
  position: absolute;
  left: 70px;
  top: 140px;
  font-size: 360px;
  font-weight: 800;
  color: rgba(255,255,255,0.06);
  line-height: 0.85;
  letter-spacing: -0.04em;
}
.slide-divider .blk-kicker {
  position: absolute;
  left: 80px;
  top: 200px;
  font-size: 13px;
  letter-spacing: 0.22em;
  color: var(--turkis);
  font-weight: 700;
  text-transform: uppercase;
}
.slide-divider .blk-title {
  position: absolute;
  left: 80px;
  right: 80px;
  top: 240px;
  font-size: 76px;
  font-weight: 800;
  line-height: 1.05;
  color: var(--white);
}
.slide-divider .blk-title::after {
  content: '';
  display: block;
  width: 80px;
  height: 6px;
  margin-top: 28px;
  background: var(--turkis);
  border-radius: 3px;
}
.slide-divider .blk-bar { display: none; }

/* TILES */
.tiles {
  position: absolute;
  left: 60px;
  right: 60px;
  top: 188px;
  bottom: 78px;
  display: grid;
  gap: 24px;
}
.tiles.cols-2 { grid-template-columns: repeat(2, 1fr); }
.tiles.cols-3 { grid-template-columns: repeat(3, 1fr); }
.tiles.has-callout { bottom: 165px; }
.tile {
  background: var(--cloud);
  border-radius: 10px;
  padding: 24px 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.tile h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 800;
  color: var(--indigo);
  line-height: 1.25;
}
.tile p {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--ink-soft);
}

/* TABLE */
.tbl {
  position: absolute;
  left: 60px;
  right: 60px;
  top: 188px;
  bottom: 78px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.tbl.has-callout { bottom: 165px; }
.tbl table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
.tbl thead th {
  background: var(--indigo);
  color: var(--white);
  text-align: left;
  padding: 10px 14px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.tbl tbody td {
  border-bottom: 1px solid var(--line);
  padding: 9px 14px;
  vertical-align: top;
  color: var(--ink);
  line-height: 1.4;
}
.tbl tbody tr:nth-child(even) td { background: var(--cloud); }
.tbl .extra { margin-top: 4px; }

/* BIGNUM */
.bignum {
  position: absolute;
  left: 60px;
  right: 60px;
  top: 188px;
  bottom: 78px;
  display: grid;
  gap: 32px;
  grid-template-columns: 1fr;
}
.bignum.cols-2 { grid-template-columns: 1fr 1fr; }
.bignum.has-callout { bottom: 165px; }
.bignum .num-box {
  background: var(--cloud);
  border-radius: 12px;
  padding: 30px 30px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  text-align: center;
}
.bignum .num-box .v {
  font-size: 120px;
  font-weight: 800;
  line-height: 0.95;
  color: var(--indigo);
}
.bignum .num-box .l {
  font-size: 15px;
  color: var(--ink-soft);
  max-width: 340px;
}

/* QUOTE */
.slide-quote { background: var(--indigo); color: var(--white); }
.slide-quote .qmark {
  position: absolute;
  left: 50px;
  top: 70px;
  font-size: 240px;
  font-weight: 800;
  color: var(--indigo-lt);
  line-height: 0.7;
}
.slide-quote .qbody {
  position: absolute;
  left: 60px;
  top: 180px;
  width: 700px;
  font-size: 36px;
  font-weight: 800;
  line-height: 1.15;
  color: var(--white);
}
.slide-quote.with-img .qbody { width: 600px; font-size: 30px; }
.slide-quote .qby {
  position: absolute;
  left: 60px;
  width: 700px;
  font-size: 15px;
  color: var(--turkis);
  font-weight: 700;
}
.slide-quote.with-img .qby { width: 600px; }
.slide-quote .qitems {
  position: absolute;
  left: 65px;
  width: 700px;
  font-size: 16px;
  color: var(--white);
  line-height: 1.5;
  list-style: none;
  padding: 0;
  margin: 0;
}
.slide-quote.with-img .qitems { width: 600px; }
.slide-quote .qitems li {
  padding-left: 28px;
  position: relative;
  margin-bottom: 10px;
}
.slide-quote .qitems li::before {
  content: "▸";
  position: absolute;
  left: 0;
  color: var(--turkis);
  font-weight: 800;
}
.slide-quote .qitems strong, .slide-quote .qitems b { color: var(--turkis); }
.slide-quote .qimg-frame {
  position: absolute;
  right: 60px;
  top: 100px;
  width: 360px;
  height: 540px;
  background: var(--white);
  border-radius: 6px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.slide-quote .qimg-frame img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.slide-quote .qimg-cap {
  position: absolute;
  right: 60px;
  width: 360px;
  text-align: center;
  font-size: 11px;
  font-style: italic;
  color: var(--t-hell);
}

/* PIC */
.pic-wrap {
  position: absolute;
  left: 60px;
  right: 60px;
  top: 188px;
  bottom: 78px;
  display: flex;
  gap: 32px;
}
.pic-wrap.has-callout { bottom: 165px; }
.pic-wrap .pic-bullets {
  flex: 0 0 460px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
  font-size: 14.5px;
  line-height: 1.45;
  color: var(--ink);
  justify-content: center;
}
.pic-wrap .pic-bullets > div {
  position: relative;
  padding-left: 28px;
}
.pic-wrap .pic-bullets > div::before {
  content: "▸";
  position: absolute;
  left: 0;
  color: var(--lila);
  font-weight: 800;
}
.pic-wrap .pic-bullets b { color: var(--indigo); font-weight: 700; }
.pic-wrap .pic-frame {
  flex: 1;
  min-width: 0;
  min-height: 0;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
}
.pic-wrap .pic-frame img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.pic-wrap .pic-cap {
  position: absolute;
  bottom: -28px;
  width: 100%;
  text-align: center;
  font-size: 11px;
  font-style: italic;
  color: var(--grey);
}
.pic-wrap.no-items .pic-bullets { display: none; }

/* DIAGRAM */
.diagram-wrap {
  position: absolute;
  left: 60px;
  right: 60px;
  top: 188px;
  bottom: 78px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.diagram-wrap.has-callout { bottom: 165px; }
.diagram-wrap img {
  max-width: 100%;
  max-height: 86%;
  object-fit: contain;
}
.diagram-wrap .cap {
  margin-top: 10px;
  font-size: 12px;
  font-style: italic;
  color: var(--grey);
  text-align: center;
}

/* ROADMAP */
.roadmap {
  position: absolute;
  left: 60px;
  right: 60px;
  top: 188px;
  bottom: 78px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  justify-content: center;
}
.roadmap.has-callout { bottom: 165px; }
.step {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  font-size: 16.5px;
  line-height: 1.45;
}
.step .step-num {
  flex: 0 0 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--lila);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 15px;
}
.step b { color: var(--indigo); }

/* DECISION */
.decision {
  position: absolute;
  left: 60px;
  right: 60px;
  top: 188px;
  bottom: 78px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  justify-content: center;
}
.decision-row {
  display: grid;
  grid-template-columns: 1fr 80px 1fr;
  align-items: center;
  gap: 18px;
}
.dec-q {
  background: var(--cloud);
  border-radius: 8px;
  padding: 18px 22px;
  font-weight: 700;
  color: var(--indigo);
  font-size: 18px;
}
.dec-arrow {
  text-align: center;
  font-weight: 800;
  color: var(--grey);
  font-size: 14px;
  letter-spacing: 0.1em;
}
.dec-a {
  border-radius: 8px;
  padding: 18px 22px;
  font-weight: 800;
  color: var(--white);
  font-size: 18px;
  text-align: center;
}
.dec-a.turkis { background: var(--t-dunk); color: var(--indigo); }
.dec-a.blau   { background: var(--blau); }
.dec-a.indigo { background: var(--indigo); }
.dec-a.lila   { background: var(--lila); }

/* COMPARE */
.compare {
  position: absolute;
  left: 60px;
  right: 60px;
  top: 188px;
  bottom: 78px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.compare.has-callout { bottom: 165px; }
.compare .intro {
  font-size: 16px;
  color: var(--ink-soft);
  font-style: italic;
  line-height: 1.45;
}
.compare .cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 38px;
  flex: 1;
}
.compare .col-head {
  border-radius: 8px;
  padding: 18px 22px;
  font-weight: 800;
  letter-spacing: 0.08em;
  font-size: 14px;
  text-align: center;
  text-transform: uppercase;
  margin-bottom: 16px;
}
.compare .col-items {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 17px;
  line-height: 1.4;
}
.compare .col-items li {
  position: relative;
  padding-left: 24px;
  margin-bottom: 10px;
  color: var(--ink);
}
.compare .col-items li::before {
  content: "›";
  position: absolute;
  left: 0;
  font-weight: 800;
  font-size: 20px;
}
.compare .col.col-0 .col-items li::before { color: var(--t-dunk); }
.compare .col.col-1 .col-items li::before { color: var(--lila); }

/* CONTACT */
.contact {
  position: absolute;
  left: 60px;
  right: 60px;
  top: 188px;
  bottom: 78px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 24px;
}
.contact .who {
  font-size: 32px;
  font-weight: 800;
  color: var(--indigo);
}
.contact .lines {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 18px;
  color: var(--ink-soft);
}
.contact .lines b { color: var(--indigo); margin-right: 12px; }
.contact .web {
  margin-top: 12px;
  font-size: 15px;
  color: var(--grey);
}

/* HUD: Folienzähler oben rechts */
.hud {
  position: fixed;
  bottom: 12px;
  right: 14px;
  font-size: 12px;
  color: #888;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  z-index: 100;
  user-select: none;
  background: rgba(0,0,0,0.45);
  padding: 4px 10px;
  border-radius: 4px;
  color: #ddd;
}
.hud:empty { display: none; }

/* OVERVIEW (Grid aller Folien, toggle über „O") */
.overview {
  position: fixed;
  inset: 0;
  background: #0a0d1a;
  z-index: 200;
  overflow: auto;
  padding: 24px;
  display: none;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 14px;
}
.overview.on { display: grid; }
.overview .thumb {
  background: var(--white);
  border-radius: 4px;
  overflow: hidden;
  cursor: pointer;
  position: relative;
  aspect-ratio: 16 / 9;
}
.overview .thumb .mini {
  width: 1280px;
  height: 720px;
  transform: scale(0.172);
  transform-origin: top left;
  pointer-events: none;
}
.overview .thumb .idx {
  position: absolute;
  left: 4px;
  top: 4px;
  color: #fff;
  background: rgba(0,0,0,0.6);
  padding: 1px 6px;
  font-size: 11px;
  border-radius: 3px;
  font-family: ui-monospace, monospace;
}
.overview .thumb.active { outline: 3px solid var(--turkis); }