/* ============================================================
   Stadt Leipzig // Auftragsverwaltung Kickoff
   16:9 Slide-Deck · Retro-Arcade-Theme · Leipzig-Farben
   ============================================================ */

/* ------------------------------------------------------------
   Tokens
   ------------------------------------------------------------ */
:root {
  /* Leipzig + Arcade */
  --lpz-yellow:   #FFD700;
  --lpz-yellow-2: #FFC72C;
  --lpz-blue:     #003E7E;
  --arcade-cyan:    #00f0ff;
  --arcade-magenta: #ff37b8;
  --arcade-green:   #39ff14;
  --arcade-orange:  #ff8c1a;
  --arcade-violet:  #b86bff;

  /* Partner Logos */
  --ms-red:    #f25022;
  --ms-green:  #7fba00;
  --ms-blue:   #00a4ef;
  --ms-yellow: #ffb900;
  --syntax-blue: #0632a0;

  /* Backgrounds */
  --bg-0:   #07060c;
  --bg-1:   #0d0a18;
  --bg-2:   #14102a;
  --paper:  #18142e;
  --paper-2:#221a3d;

  /* Ink */
  --ink:      #f4ecd8;
  --ink-soft: #cfc8de;
  --ink-mute: #8a82a3;
  --ink-dim:  #5a5470;

  /* Lines */
  --line:   rgba(255, 215, 0, 0.18);
  --line-2: rgba(255, 215, 0, 0.32);
  --line-3: rgba(255, 215, 0, 0.55);

  /* Fonts */
  --font-display: 'Bricolage Grotesque', system-ui, sans-serif;
  --font-pixel: 'Press Start 2P', system-ui, sans-serif;
  --font-term:  'VT323', monospace;
  --font-mono:  'JetBrains Mono', monospace;
}

/* ------------------------------------------------------------
   Reset + Base
   ------------------------------------------------------------ */
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body {
  width: 100%; height: 100%;
  overflow: hidden;
  background: var(--bg-0);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 16px;
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
}

/* CRT Scanlines + Vignette */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  background:
    repeating-linear-gradient(
      0deg,
      rgba(0,0,0,0) 0px,
      rgba(0,0,0,0) 2px,
      rgba(255,215,0,0.025) 2px,
      rgba(255,215,0,0.025) 3px
    ),
    radial-gradient(ellipse 100% 70% at 50% 50%, transparent 50%, rgba(0,0,0,0.55) 100%);
  pointer-events: none;
  z-index: 999;
  mix-blend-mode: overlay;
}

/* ------------------------------------------------------------
   Deck Container - 16:9 Slide-Snap
   ------------------------------------------------------------ */
.deck {
  width: 100vw;
  height: 100vh;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  display: flex;
  scrollbar-width: none;
}
.deck::-webkit-scrollbar { display: none; }

.slide {
  flex: 0 0 100vw;
  height: 100vh;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2vh 2vw;
  position: relative;
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(255,215,0,0.06) 0%, transparent 50%),
    radial-gradient(ellipse 80% 60% at 50% 100%, rgba(0,240,255,0.04) 0%, transparent 50%),
    var(--bg-0);
}

.slide-inner {
  width: 100%;
  height: 100%;
  max-width: calc(100vh * 16 / 9 - 4vw);
  display: flex;
  flex-direction: column;
  gap: 1.6vh;
  padding: 2.5vh 3vw 9vh 3vw; /* extra bottom für HUD-Reservat */
  background:
    linear-gradient(180deg, rgba(255,215,0,0.04) 0%, transparent 100%),
    var(--bg-1);
  border: 2px solid var(--line-2);
  border-radius: 8px;
  position: relative;
  overflow: hidden;
}

/* corner brackets - arcade frame */
.slide-inner::before,
.slide-inner::after {
  content: "";
  position: absolute;
  width: 32px; height: 32px;
  border: 3px solid var(--lpz-yellow);
  pointer-events: none;
}
.slide-inner::before {
  top: -2px; left: -2px;
  border-right: none; border-bottom: none;
}
.slide-inner::after {
  bottom: -2px; right: -2px;
  border-left: none; border-top: none;
}

/* ------------------------------------------------------------
   Slide Header (gemeinsam)
   ------------------------------------------------------------ */
.slide-head {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 6px;
  padding-bottom: 1.4vh;
  border-bottom: 1px dashed var(--line-2);
}

.slide-eyebrow {
  font-family: var(--font-pixel);
  font-size: 10px;
  letter-spacing: 1.5px;
  color: var(--arcade-cyan);
  text-shadow: 0 0 8px rgba(0,240,255,0.5);
}

.slide-title {
  font-family: var(--font-pixel);
  font-size: clamp(18px, 2.6vw, 30px);
  line-height: 1.3;
  color: var(--lpz-yellow);
  text-shadow:
    2px 2px 0 var(--bg-0),
    0 0 14px rgba(255,215,0,0.35);
  letter-spacing: 1px;
}
.slide-title .accent {
  color: var(--arcade-magenta);
  text-shadow:
    2px 2px 0 var(--bg-0),
    0 0 14px rgba(255,55,184,0.5);
}

.slide-lead {
  font-family: var(--font-term);
  font-size: clamp(16px, 1.6vw, 22px);
  color: var(--ink-soft);
  line-height: 1.3;
}

/* ------------------------------------------------------------
   HUD - Bottom Navigation
   ------------------------------------------------------------ */
.hud {
  position: fixed;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 8px 14px;
  background: rgba(7,6,12,0.92);
  border: 2px solid var(--lpz-yellow);
  border-radius: 4px;
  box-shadow:
    0 0 0 1px var(--bg-0),
    0 0 18px rgba(255,215,0,0.35);
  z-index: 100;
  font-family: var(--font-pixel);
  font-size: 9px;
}

.hud-arrow {
  width: 28px; height: 28px;
  background: transparent;
  border: 2px solid var(--lpz-yellow);
  color: var(--lpz-yellow);
  font-size: 12px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .12s;
}
.hud-arrow:hover {
  background: var(--lpz-yellow);
  color: var(--bg-0);
  box-shadow: 0 0 10px rgba(255,215,0,0.6);
}
.hud-arrow:disabled {
  opacity: 0.25;
  cursor: not-allowed;
}

.hud-dots {
  display: flex;
  gap: 6px;
}
.hud-dot {
  width: 10px; height: 10px;
  background: rgba(255,215,0,0.18);
  border: 1px solid var(--lpz-yellow);
  cursor: pointer;
  transition: all .15s;
}
.hud-dot:hover {
  background: rgba(255,215,0,0.5);
}
.hud-dot.active {
  background: var(--lpz-yellow);
  box-shadow: 0 0 8px rgba(255,215,0,0.8);
}

.hud-counter {
  color: var(--lpz-yellow);
  letter-spacing: 1px;
}
.hud-counter .dim {
  color: var(--ink-dim);
  margin: 0 2px;
}

/* ============================================================
   SLIDE 1 - HERO
   ============================================================ */
.hero-slide {
  display: grid !important;
  grid-template-columns: 1.2fr 1fr;
  gap: 3vw;
  align-items: center;
}

.hero-left {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 2.5vh;
}

.hero-badge {
  font-family: var(--font-pixel);
  font-size: 9px;
  letter-spacing: 1.5px;
  color: var(--bg-0);
  background: var(--lpz-yellow);
  padding: 8px 12px;
  align-self: center;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 0 16px rgba(255,215,0,0.4);
  position: relative;
}
.hero-badge::after {
  content: "";
  position: absolute;
  inset: -3px;
  border: 1px solid var(--lpz-yellow);
  pointer-events: none;
}
.led {
  width: 8px; height: 8px;
  background: #ff2d55;
  border-radius: 50%;
  animation: ledBlink 1s infinite;
  box-shadow: 0 0 6px #ff2d55;
}
@keyframes ledBlink {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0.3; }
}

.hero-title {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 4px;
  font-family: var(--font-pixel);
  line-height: 1;
}
.hero-title-l1 {
  font-size: clamp(22px, 3.6vw, 44px);
  color: var(--ink);
  text-shadow:
    3px 3px 0 var(--bg-0),
    0 0 18px rgba(255,215,0,0.25);
  letter-spacing: 2px;
}
.hero-title-l2 {
  font-size: clamp(22px, 3.6vw, 44px);
  color: var(--lpz-yellow);
  text-shadow:
    3px 3px 0 var(--bg-0),
    0 0 22px rgba(255,215,0,0.6);
  letter-spacing: 2px;
}

.hero-pitch {
  font-family: var(--font-term);
  font-size: clamp(18px, 2vw, 26px);
  color: var(--arcade-green);
  line-height: 1.3;
  text-shadow: 0 0 6px rgba(57,255,20,0.4);
}
.hero-pitch .blink {
  display: inline-block;
  color: var(--arcade-green);
  animation: cursorBlink 1s steps(2) infinite;
}
@keyframes cursorBlink {
  50% { opacity: 0; }
}

.hero-meta-row {
  display: flex;
  gap: 24px;
  padding: 14px 18px;
  background: rgba(0,0,0,0.45);
  border: 1px solid var(--line-2);
  border-left: 4px solid var(--lpz-yellow);
}
.hero-meta-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.hero-meta-label {
  font-family: var(--font-pixel);
  font-size: 8px;
  color: var(--arcade-cyan);
  letter-spacing: 1px;
}
.hero-meta-value {
  font-family: var(--font-mono);
  font-size: clamp(14px, 1.2vw, 18px);
  font-weight: 700;
  color: var(--ink);
}

/* Hero right: Coaches + Monkey */
.hero-right {
  display: flex;
  flex-direction: column;
  gap: 2vh;
  align-items: center;
  justify-content: center;
}

.hero-coach-strip {
  display: flex;
  gap: 12px;
  width: 100%;
}
.hero-coach {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 10px 8px;
  background: rgba(0,0,0,0.45);
  border: 1px solid var(--line-2);
  position: relative;
  transition: all .15s;
}
.hero-coach:hover {
  border-color: var(--lpz-yellow);
  background: rgba(255,215,0,0.08);
  transform: translateY(-2px);
}
.hero-coach-img {
  width: 64px; height: 64px;
  border: 2px solid var(--lpz-yellow);
  overflow: hidden;
  background: var(--bg-2);
  flex: 0 0 auto;
}
.hero-coach-img img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.1) brightness(1.05);
  transition: filter .2s;
}
.hero-coach:hover .hero-coach-img img {
  filter: grayscale(0) contrast(1.05);
}
.hero-coach-name {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 12px;
  color: var(--ink);
  text-align: center;
  line-height: 1.2;
}
.hero-coach-role {
  font-family: var(--font-pixel);
  font-size: 7px;
  color: var(--lpz-yellow);
  letter-spacing: 0.5px;
  text-align: center;
}
.hero-coach-company {
  font-family: var(--font-term);
  font-size: 14px;
  color: var(--ink-mute);
}

.hero-monkey {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 12px;
  background: rgba(0,0,0,0.45);
  border: 2px solid var(--lpz-yellow);
  box-shadow:
    inset 0 0 0 1px var(--bg-0),
    0 0 20px rgba(255,215,0,0.3);
  position: relative;
  width: 100%;            /* gleiche Breite wie coach-strip */
  box-sizing: border-box;
}
.hero-monkey::before {
  content: "● ● ●";
  position: absolute;
  top: -22px; left: 0; right: 0;
  text-align: center;
  font-size: 8px;
  color: var(--lpz-yellow);
  letter-spacing: 4px;
  opacity: 0.6;
}
.hero-monkey img {
  width: 100%;
  max-width: none;
  height: auto;
  image-rendering: pixelated;
  display: block;
}
.hero-monkey-cap {
  font-family: var(--font-pixel);
  font-size: 9px;
  color: var(--arcade-magenta);
  letter-spacing: 1px;
  text-shadow: 0 0 6px rgba(255,55,184,0.4);
}

/* ============================================================
   SLIDE 2 - AGENDA (2 Spalten)
   ============================================================ */
.agenda-grid {
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.4vh 2vw;
  align-content: start;
  padding-top: 1.5vh;
}

.agenda-item {
  position: relative;
  display: grid;
  grid-template-columns: 80px 1fr 110px;
  gap: 14px;
  align-items: center;
  padding: 10px 14px;
  background: rgba(0,0,0,0.4);
  border-left: 4px solid var(--lpz-yellow);
  border-top: 1px solid var(--line);
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
  transition: all .15s;
}
.agenda-item:hover {
  background: rgba(255,215,0,0.06);
  border-left-color: var(--arcade-cyan);
  transform: translateX(2px);
}
.agenda-item.farbe-pause   { border-left-color: var(--ink-mute); opacity: 0.7; }
.agenda-item.farbe-demo    { border-left-color: var(--arcade-magenta); }
.agenda-item.farbe-deepdive{ border-left-color: var(--arcade-cyan); }
.agenda-item.farbe-discuss { border-left-color: var(--arcade-violet); }
.agenda-item.farbe-teams   { border-left-color: var(--arcade-orange); }
.agenda-item.farbe-build   { border-left-color: var(--arcade-green); }
.agenda-item.farbe-next    { border-left-color: var(--lpz-yellow); }

/* Locked-State muss jede Farbvariante schlagen — zwei Klassen für gleiche Specificity */
.agenda-item.agenda-item--locked,
.agenda-total.agenda-item--locked {
  opacity: 0;
}

.agenda-zeit {
  font-family: var(--font-pixel);
  font-size: 11px;
  color: var(--lpz-yellow);
  letter-spacing: 0.5px;
  white-space: nowrap;
}
.agenda-marker {
  display: inline-block;
  margin-right: 5px;
  color: var(--arcade-cyan);
  text-shadow: 0 0 6px rgba(0, 240, 255, 0.6);
  transform-origin: center;
}
.agenda-titel {
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.2;
}
.agenda-host {
  font-family: var(--font-term);
  font-size: 16px;
  color: var(--ink-mute);
  line-height: 1.1;
  margin-top: 2px;
}
.agenda-dauer {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  color: var(--lpz-yellow);
  text-align: right;
  letter-spacing: 0.5px;
  text-shadow: 0 0 6px rgba(255, 215, 0, 0.35);
  white-space: nowrap;
}
.agenda-xp {
  font-family: var(--font-pixel);
  font-size: 9px;
  margin-left: 2px;
  color: var(--arcade-cyan);
  text-shadow: 0 0 6px rgba(0, 240, 255, 0.5);
}

/* ---- Quest-Reveal: Items spawnen einzeln rein, wenn Slide 2 aktiv wird ---- */
.agenda-flash {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 55, 184, 0.55) 35%,
    rgba(0, 240, 255, 0.55) 65%,
    transparent 100%
  );
  mix-blend-mode: screen;
  opacity: 0;
  transform: translateX(-110%);
}

.agenda-item--locked {
  opacity: 0;
  transform: translateX(-60px) skewX(-12deg) scale(0.94);
  filter: blur(6px) brightness(0.4);
}

.agenda-item--unlocked {
  animation: agenda-quest-unlock 620ms cubic-bezier(0.16, 0.84, 0.32, 1.18) var(--reveal-delay, 0s) both;
}
.agenda-item--unlocked .agenda-flash {
  animation: agenda-flash-sweep 720ms ease-out var(--reveal-delay, 0s) both;
}
.agenda-item--unlocked .agenda-marker {
  animation: agenda-marker-pulse 1.1s ease-out var(--reveal-delay, 0s) both;
}
.agenda-item--unlocked .agenda-dauer {
  animation: agenda-xp-pop 720ms ease-out calc(var(--reveal-delay, 0s) + 180ms) both;
}

@keyframes agenda-quest-unlock {
  0% {
    opacity: 0;
    transform: translateX(-60px) skewX(-12deg) scale(0.94);
    filter: blur(6px) brightness(0.4);
    box-shadow: none;
  }
  35% {
    opacity: 1;
    filter: blur(0) brightness(1.7);
    box-shadow:
      inset 0 0 24px rgba(255, 55, 184, 0.55),
      0 0 18px rgba(0, 240, 255, 0.35);
  }
  60% {
    transform: translateX(6px) skewX(2deg) scale(1.02);
    filter: blur(0) brightness(1.2);
  }
  100% {
    opacity: 1;
    transform: none;
    filter: none;
    box-shadow: none;
  }
}

@keyframes agenda-flash-sweep {
  0%   { opacity: 0;    transform: translateX(-110%); }
  35%  { opacity: 0.95; }
  100% { opacity: 0;    transform: translateX(110%); }
}

@keyframes agenda-marker-pulse {
  0%   { transform: scale(1);   text-shadow: 0 0 6px rgba(0, 240, 255, 0.6); }
  20%  { transform: scale(1.5); text-shadow: 0 0 14px var(--arcade-cyan), 0 0 22px var(--arcade-magenta); }
  60%  { transform: scale(0.95); }
  100% { transform: scale(1);   text-shadow: 0 0 6px rgba(0, 240, 255, 0.6); }
}

@keyframes agenda-xp-pop {
  0%   { transform: scale(1);    color: var(--arcade-cyan); text-shadow: none; }
  35%  { transform: scale(1.28); color: var(--lpz-yellow);  text-shadow: 0 0 16px rgba(255, 215, 0, 0.95), 0 0 26px rgba(255, 55, 184, 0.5); }
  100% { transform: scale(1);    color: var(--lpz-yellow);  text-shadow: 0 0 6px rgba(255, 215, 0, 0.35); }
}

/* ---- Total Quest Reward Bar ---- */
.agenda-total {
  position: relative;
  grid-column: 1 / -1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 0.6vh;
  padding: 12px 18px;
  background:
    linear-gradient(90deg, rgba(255, 55, 184, 0.14), rgba(0, 240, 255, 0.14)),
    rgba(0, 0, 0, 0.55);
  border: 1px solid var(--lpz-yellow);
  border-left: 4px solid var(--lpz-yellow);
  box-shadow:
    0 0 22px rgba(255, 215, 0, 0.22),
    inset 0 0 30px rgba(255, 55, 184, 0.1);
  overflow: hidden;
}
.agenda-total::before {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    0deg,
    rgba(255, 255, 255, 0.04) 0 1px,
    transparent 1px 3px
  );
  pointer-events: none;
}
.agenda-total-label {
  font-family: var(--font-pixel);
  font-size: 11px;
  letter-spacing: 1.5px;
  color: var(--ink-mute);
}
.agenda-total-xp {
  font-family: var(--font-pixel);
  font-size: 18px;
  color: var(--lpz-yellow);
  text-shadow: 0 0 10px rgba(255, 215, 0, 0.6), 0 0 18px rgba(255, 55, 184, 0.35);
}
.agenda-total.agenda-item--unlocked {
  animation: agenda-total-bloom 820ms cubic-bezier(0.18, 0.89, 0.32, 1.28) var(--reveal-delay, 0s) both;
}
@keyframes agenda-total-bloom {
  0%   { opacity: 0; transform: translateY(20px) scale(0.92); filter: blur(8px) brightness(0.6); }
  55%  { opacity: 1; filter: blur(0) brightness(1.4); transform: translateY(0) scale(1.04); }
  100% { opacity: 1; filter: none; transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .agenda-item--locked,
  .agenda-item--unlocked,
  .agenda-item--unlocked .agenda-flash,
  .agenda-item--unlocked .agenda-marker,
  .agenda-item--unlocked .agenda-dauer,
  .agenda-total.agenda-item--unlocked {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    box-shadow: none !important;
    animation: none !important;
  }
  .agenda-flash { display: none; }
}

/* ---- Click-Hint (Press-Start-Style, pulsiert bis alle Quests offen) ---- */
.agenda-clickhint {
  align-self: center;
  margin-top: 0.8vh;
  margin-bottom: 4vh; /* Abstand zum fixed HUD am Slide-Boden */
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 8px 18px;
  background: transparent;
  border: 1px dashed rgba(0, 240, 255, 0.45);
  font-family: var(--font-pixel);
  font-size: 11px;
  color: var(--arcade-cyan);
  letter-spacing: 1.5px;
  cursor: pointer;
  text-shadow: 0 0 8px rgba(0, 240, 255, 0.4);
  animation: agenda-clickhint-pulse 1.6s ease-in-out infinite;
  transition: background-color .2s, color .2s, border-color .2s;
}
.agenda-clickhint:hover {
  background: rgba(0, 240, 255, 0.06);
  color: var(--lpz-yellow);
  border-color: var(--lpz-yellow);
}
.agenda-clickhint:focus-visible {
  outline: 2px solid var(--lpz-yellow);
  outline-offset: 2px;
}
.agenda-clickhint-icon {
  display: inline-block;
  color: var(--arcade-magenta);
  text-shadow: 0 0 8px rgba(255, 55, 184, 0.6);
}
.agenda-clickhint-count {
  color: var(--lpz-yellow);
  text-shadow: 0 0 6px rgba(255, 215, 0, 0.5);
  font-variant-numeric: tabular-nums;
}
.agenda-clickhint--done {
  animation: none;
  border-style: solid;
  border-color: var(--arcade-green);
  color: var(--arcade-green);
  text-shadow: 0 0 8px rgba(120, 255, 80, 0.5);
  cursor: default;
}
.agenda-clickhint--done .agenda-clickhint-icon {
  color: var(--arcade-green);
  text-shadow: 0 0 8px rgba(120, 255, 80, 0.6);
}
.agenda-clickhint--done .agenda-clickhint-count {
  color: var(--arcade-green);
  text-shadow: 0 0 6px rgba(120, 255, 80, 0.5);
}
@keyframes agenda-clickhint-pulse {
  0%, 100% { opacity: 0.55; transform: translateY(0); }
  50%      { opacity: 1;    transform: translateY(-2px); }
}
@media (prefers-reduced-motion: reduce) {
  .agenda-clickhint { animation: none; }
}

/* ============================================================
   SLIDE 3 - DEMO
   ============================================================ */
.demo-layout {
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 1.4vw;
  padding-top: 1.5vh;
  min-height: 0;
  overflow: hidden;
}

.demo-hero {
  background: rgba(255,215,0,0.06);
  border: 2px solid var(--lpz-yellow);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  position: relative;
  overflow: hidden;
}
.demo-hero::before {
  content: "// HERO-AUFTRAG";
  position: absolute;
  top: -10px; left: 12px;
  background: var(--bg-1);
  padding: 0 8px;
  font-family: var(--font-pixel);
  font-size: 9px;
  color: var(--lpz-yellow);
  letter-spacing: 1px;
}
.demo-hero-nr {
  font-family: var(--font-pixel);
  font-size: 16px;
  color: var(--lpz-yellow);
  letter-spacing: 1px;
  text-shadow: 0 0 8px rgba(255, 215, 0, 0.4);
}
.demo-hero-titel {
  font-family: var(--font-mono);
  font-size: 17px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.3;
}
.demo-hero-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding-top: 10px;
  border-top: 1px dashed var(--line-2);
}
.demo-hero-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.demo-hero-stat-label {
  font-family: var(--font-pixel);
  font-size: 10px;
  color: var(--arcade-cyan);
  letter-spacing: 1px;
}
.demo-hero-stat-val {
  font-family: var(--font-mono);
  font-size: 17px;
  font-weight: 700;
  color: var(--ink);
}
.demo-hero-warum {
  font-family: var(--font-term);
  font-size: 17px;
  color: var(--ink-soft);
  line-height: 1.35;
  padding-top: 10px;
  border-top: 1px dashed var(--line-2);
}

.demo-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 12px;
  min-height: 0;
  overflow: hidden;
}

/* ---- Icon-Tiles (Pixel-Art-Anker, kein Beschreibungstext) ---- */
.demo-card {
  position: relative;
  background:
    radial-gradient(ellipse 140% 80% at 50% 110%, rgba(255, 55, 184, 0.08), transparent 60%),
    rgba(0, 0, 0, 0.55);
  border: 2px solid var(--card-color, var(--line-2));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 8px;
  min-height: 0;
  overflow: hidden;
  transition: transform .18s, box-shadow .18s, background-color .18s;
}
.demo-card::before,
.demo-card::after {
  content: "";
  position: absolute;
  width: 12px; height: 12px;
  border: 2px solid var(--card-color, var(--lpz-yellow));
  pointer-events: none;
}
.demo-card::before { top: -2px; left: -2px;  border-right: none; border-bottom: none; }
.demo-card::after  { bottom: -2px; right: -2px; border-left: none; border-top: none; }
.demo-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 0 22px color-mix(in srgb, var(--card-color, var(--lpz-yellow)) 40%, transparent);
}

.demo-card.farbe-demo     { --card-color: var(--arcade-magenta); }
.demo-card.farbe-deepdive { --card-color: var(--arcade-cyan); }
.demo-card.farbe-discuss  { --card-color: var(--arcade-violet); }
.demo-card.farbe-teams    { --card-color: var(--arcade-orange); }
.demo-card.farbe-build    { --card-color: var(--arcade-green); }
.demo-card.farbe-next     { --card-color: var(--lpz-yellow); }

.demo-card-lvl {
  position: absolute;
  top: 8px;
  right: 10px;
  font-family: var(--font-pixel);
  font-size: 8px;
  letter-spacing: 1.4px;
  color: color-mix(in srgb, var(--card-color, var(--lpz-yellow)) 80%, var(--ink-mute));
  opacity: 0.55;
  white-space: nowrap;
  padding: 2px 4px;
  border: 1px solid color-mix(in srgb, var(--card-color, var(--lpz-yellow)) 40%, transparent);
  pointer-events: none;
  z-index: 2;
}
.demo-card-icon {
  font-family: var(--font-mono);
  font-size: clamp(36px, 4.8vw, 72px);
  line-height: 1;
  font-weight: 700;
  color: var(--card-color, var(--arcade-cyan));
  text-shadow:
    0 0 12px color-mix(in srgb, var(--card-color, var(--arcade-cyan)) 70%, transparent),
    0 0 24px color-mix(in srgb, var(--card-color, var(--arcade-cyan)) 35%, transparent);
  /* leicht „bitmap-ig" */
  -webkit-font-smoothing: none;
  font-smoothing: none;
}
.demo-card-titel {
  font-family: var(--font-pixel);
  font-size: clamp(11px, 0.95vw, 15px);
  line-height: 1.25;
  letter-spacing: 1px;
  color: var(--ink);
  text-align: center;
  text-transform: uppercase;
  text-shadow: 0 0 10px color-mix(in srgb, var(--card-color, var(--lpz-yellow)) 55%, transparent);
  padding: 0 6px;
  max-width: 100%;
  overflow-wrap: normal;
  word-break: keep-all;
  hyphens: none;
}

/* ---- Reveal-Animation (analog Slide 2) ---- */
.demo-flash {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 55, 184, 0.55) 35%,
    rgba(0, 240, 255, 0.55) 65%,
    transparent 100%
  );
  mix-blend-mode: screen;
  opacity: 0;
  transform: translateX(-110%);
}
.demo-card--locked {
  opacity: 0;
  transform: translateY(20px) scale(0.85);
  filter: blur(6px) brightness(0.4);
}
.demo-card--unlocked {
  animation: demo-tile-unlock 620ms cubic-bezier(0.16, 0.84, 0.32, 1.18) both;
}
.demo-card--unlocked .demo-flash {
  animation: demo-flash-sweep 720ms ease-out both;
}
.demo-card--unlocked .demo-card-icon {
  animation: demo-icon-pop 700ms ease-out 120ms both;
}

@keyframes demo-tile-unlock {
  0%   { opacity: 0; transform: translateY(20px) scale(0.85); filter: blur(6px) brightness(0.4); box-shadow: none; }
  35%  { opacity: 1; filter: blur(0) brightness(1.7); box-shadow: 0 0 28px color-mix(in srgb, var(--card-color, var(--lpz-yellow)) 60%, transparent); }
  60%  { transform: translateY(0) scale(1.06); filter: blur(0) brightness(1.2); }
  100% { opacity: 1; transform: none; filter: none; box-shadow: none; }
}
@keyframes demo-flash-sweep {
  0%   { opacity: 0;    transform: translateX(-110%); }
  35%  { opacity: 0.95; }
  100% { opacity: 0;    transform: translateX(110%); }
}
@keyframes demo-icon-pop {
  0%   { transform: scale(0.6) rotate(-8deg); }
  50%  { transform: scale(1.25) rotate(4deg); }
  100% { transform: scale(1) rotate(0); }
}
@media (prefers-reduced-motion: reduce) {
  .demo-card--locked,
  .demo-card--unlocked,
  .demo-card--unlocked .demo-flash,
  .demo-card--unlocked .demo-card-icon {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    box-shadow: none !important;
    animation: none !important;
  }
  .demo-flash { display: none; }
}

/* ============================================================
   SLIDE 4 - DEEP-DIVE
   ============================================================ */
.dd-layout {
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 1.6vw;
  padding-top: 1.5vh;
  min-height: 0;
}

.dd-nav {
  display: flex;
  flex-direction: column;
  gap: 6px;
  overflow-y: auto;
  padding-right: 4px;
}
.dd-nav-item {
  text-align: left;
  background: rgba(0,0,0,0.4);
  border: 1px solid var(--line);
  border-left: 3px solid var(--ink-dim);
  padding: 8px 10px;
  cursor: pointer;
  transition: all .15s;
  font-family: var(--font-mono);
  display: flex;
  flex-direction: column;
  gap: 2px;
  color: var(--ink-soft);
}
.dd-nav-item:hover {
  background: rgba(255,215,0,0.06);
  border-left-color: var(--lpz-yellow);
}
.dd-nav-item.active {
  background: rgba(255,215,0,0.12);
  border-color: var(--lpz-yellow);
  border-left-width: 3px;
  color: var(--ink);
}
.dd-nav-nr {
  font-family: var(--font-pixel);
  font-size: 11px;
  color: var(--lpz-yellow);
  letter-spacing: 1px;
}
.dd-nav-name {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.2;
}

.dd-content {
  display: flex;
  flex-direction: column;
  gap: 1vh;
  min-height: 0;
  background: rgba(0,0,0,0.35);
  border: 1px solid var(--line-2);
  padding: 14px 16px;
  overflow: hidden;
}
.dd-loading {
  font-family: var(--font-term);
  font-size: 18px;
  color: var(--ink-mute);
  text-align: center;
  padding: 40px;
}

.dd-frage {
  font-family: var(--font-term);
  font-size: 22px;
  color: var(--arcade-cyan);
  font-style: italic;
  border-left: 3px solid var(--arcade-cyan);
  padding-left: 12px;
  line-height: 1.3;
}
.dd-titel-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.dd-titel-nr {
  font-family: var(--font-pixel);
  font-size: 16px;
  color: var(--lpz-yellow);
}
.dd-titel {
  font-family: var(--font-pixel);
  font-size: 19px;
  color: var(--ink);
  letter-spacing: 1px;
}
.dd-kern {
  font-family: var(--font-term);
  font-size: 20px;
  color: var(--ink-soft);
  line-height: 1.4;
}

.dd-karten {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
  flex: 0 0 auto;
  margin: auto 0;
  width: 100%;
}
.dd-karte {
  background: rgba(0,0,0,0.35);
  border: 1px solid var(--line-2);
  border-top: 3px solid var(--lpz-yellow);
  padding: 14px 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  justify-content: flex-start;
  gap: 12px;
  min-height: 0;
  overflow: hidden;
  position: relative;
}
.dd-karte::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(255,215,0,0.045) 1px, transparent 1px),
    linear-gradient(0deg, rgba(255,215,0,0.035) 1px, transparent 1px);
  background-size: 18px 18px;
  opacity: 0.5;
  pointer-events: none;
}
.dd-karte > * { position: relative; z-index: 1; }
.dd-karte.f-cyan   { border-top-color: var(--arcade-cyan); }
.dd-karte.f-pink   { border-top-color: var(--arcade-magenta); }
.dd-karte.f-yellow { border-top-color: var(--lpz-yellow); }
.dd-karte.f-violet { border-top-color: var(--arcade-violet); }
.dd-karte.f-orange { border-top-color: var(--arcade-orange); }
.dd-karte-top {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.dd-karte-titel {
  font-family: var(--font-mono);
  font-size: 17px;
  font-weight: 700;
  color: var(--ink);
  text-align: center;
}
.dd-karte-tag {
  font-family: var(--font-pixel);
  font-size: 9px;
  color: var(--bg-0);
  background: var(--lpz-yellow);
  padding: 4px 7px;
  letter-spacing: 1px;
}
.dd-karte-was {
  font-family: var(--font-term);
  font-size: 18px;
  color: var(--ink-soft);
  line-height: 1.35;
  text-align: center;
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.dd-karte-signal {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 4px;
  padding: 4px 0;
}
.dd-karte-signal span {
  height: 6px;
  border: 1px solid var(--line-2);
  background: rgba(255,215,0,0.08);
}
.dd-karte-signal span:nth-child(1),
.dd-karte-signal span:nth-child(2),
.dd-karte-signal span:nth-child(3) {
  background: var(--lpz-yellow);
  box-shadow: 0 0 8px rgba(255,215,0,0.28);
}
.dd-karte-pipeline {
  flex: 1 1 auto;
  min-height: 56px;
  display: grid;
  grid-template-rows: repeat(4, 1fr);
  gap: 4px;
  padding: 8px;
  border: 1px dashed var(--line);
  background: rgba(0,0,0,0.16);
}
.dd-karte-pipeline span {
  display: flex;
  align-items: center;
  padding-left: 8px;
  font-family: var(--font-pixel);
  font-size: 9px;
  letter-spacing: 1px;
  color: var(--ink-mute);
  border-left: 3px solid var(--line-2);
  background: rgba(255,215,0,0.04);
}
.dd-karte-pipeline span:nth-child(2),
.dd-karte-pipeline span:nth-child(4) {
  color: var(--lpz-yellow);
  border-left-color: var(--lpz-yellow);
}
.dd-karte-matrix {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-top: auto;
  padding-top: 8px;
  border-top: 1px dashed var(--line);
}
.dd-karte-matrix div {
  display: grid;
  grid-template-columns: 54px 1fr;
  gap: 8px;
  align-items: start;
}
.dd-karte-matrix b {
  font-family: var(--font-pixel);
  font-size: 9px;
  color: var(--arcade-cyan);
  letter-spacing: 1px;
}
.dd-karte-matrix span {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--ink-soft);
  line-height: 1.3;
}
.dd-karte-bsp {
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--arcade-cyan);
  padding-top: 8px;
  border-top: 1px dashed var(--line);
  width: 100%;
  text-align: center;
}

.dd-diagramm-wrap, .dd-screenshot-wrap {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 0;
  position: relative;
}
.dd-fullscreen-btn {
  align-self: flex-end;
  background: var(--lpz-yellow);
  color: var(--bg-0);
  border: none;
  padding: 6px 12px;
  font-family: var(--font-pixel);
  font-size: 9px;
  letter-spacing: 1px;
  cursor: pointer;
  transition: all .15s;
}
.dd-fullscreen-btn:hover {
  box-shadow: 0 0 10px rgba(255,215,0,0.6);
}
.dd-diagramm {
  flex: 1 1 auto;
  background: var(--ink);
  padding: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  min-height: 0;
}
.dd-diagramm svg {
  max-width: 100%;
  max-height: 100%;
  height: auto;
}

.dd-screenshot-placeholder {
  flex: 1 1 auto;
  background:
    repeating-linear-gradient(
      45deg,
      rgba(255,215,0,0.04),
      rgba(255,215,0,0.04) 10px,
      rgba(255,215,0,0.08) 10px,
      rgba(255,215,0,0.08) 20px
    );
  border: 2px dashed var(--line-3);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 24px;
  min-height: 200px;
}
.ph-icon {
  font-family: var(--font-pixel);
  font-size: 32px;
  color: var(--lpz-yellow);
  letter-spacing: 4px;
}
.ph-text {
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--ink);
  text-align: center;
  white-space: pre-line;
}
.ph-hint {
  font-family: var(--font-term);
  font-size: 14px;
  color: var(--ink-mute);
  letter-spacing: 0.5px;
}

/* ============================================================
   SLIDE 5 - OFFENE TAVERNE
   Pixel-Tavernen-Setting: Banner oben, NPC-Table mittig,
   Pinnwand unten. Warmer Holzton, Kerzenlicht-Glow.
   ============================================================ */
.tavern-stage {
  flex: 1 1 auto;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 18px;
  padding: 20px 22px;
  margin-top: 1.2vh;
  background:
    linear-gradient(180deg, rgba(64, 36, 18, 0.55), rgba(28, 14, 6, 0.85)),
    repeating-linear-gradient(0deg, rgba(0,0,0,0.18) 0 2px, transparent 2px 6px);
  border: 2px solid color-mix(in srgb, var(--lpz-yellow) 40%, #2a1608);
  box-shadow:
    inset 0 0 0 1px rgba(255, 215, 0, 0.08),
    inset 0 0 60px rgba(0, 0, 0, 0.7),
    0 0 30px rgba(255, 165, 0, 0.08);
  position: relative;
  overflow: hidden;
}
.tavern-stage::before {
  /* Lagerfeuer-Glow von unten */
  content: "";
  position: absolute;
  left: 50%;
  bottom: -120px;
  width: 480px;
  height: 240px;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at center, rgba(255, 140, 40, 0.22) 0%, transparent 70%);
  pointer-events: none;
  animation: tavernFlicker 3.2s ease-in-out infinite;
}
@keyframes tavernFlicker {
  0%, 100% { opacity: 0.9; transform: translateX(-50%) scale(1); }
  50%      { opacity: 1.0; transform: translateX(-50%) scale(1.05); }
}

/* ----- Banner ----- */
.tavern-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 18px;
  background: linear-gradient(180deg, #6b3f1c 0%, #4a2a10 100%);
  border-top: 2px solid color-mix(in srgb, var(--lpz-yellow) 70%, transparent);
  border-bottom: 2px solid #1a0a02;
  box-shadow: inset 0 0 0 1px rgba(255, 215, 0, 0.18);
  position: relative;
  z-index: 2;
}
.tavern-banner-emblem {
  font-size: 22px;
  color: var(--lpz-yellow);
  text-shadow: 0 0 8px rgba(255, 215, 0, 0.7);
}
.tavern-banner-text {
  flex: 1;
  font-family: var(--font-pixel);
  font-size: 18px;
  letter-spacing: 3px;
  color: var(--lpz-yellow);
  text-shadow: 2px 2px 0 #1a0a02;
}
.tavern-banner-xp {
  font-family: var(--font-pixel);
  font-size: 10px;
  letter-spacing: 1.5px;
  color: var(--bg-0);
  background: var(--arcade-green);
  padding: 5px 10px;
  border: 1px solid #1a0a02;
  box-shadow: 0 0 10px rgba(57, 255, 20, 0.45);
}

/* ----- NPC-Table ----- */
.tavern-table {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
  align-items: stretch;
  position: relative;
  z-index: 2;
}
.tavern-npc {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 14px;
  align-items: stretch;
}

/* Portrait + Sprite */
.tavern-npc-portrait {
  position: relative;
  background: rgba(0, 0, 0, 0.55);
  border: 2px solid var(--card-color, var(--lpz-yellow));
  box-shadow:
    inset 0 0 0 2px rgba(0, 0, 0, 0.6),
    0 0 18px color-mix(in srgb, var(--card-color, var(--lpz-yellow)) 35%, transparent);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.tavern-npc-sprite {
  font-family: var(--font-pixel);
  font-size: 38px;
  color: var(--card-color, var(--lpz-yellow));
  text-shadow: 3px 3px 0 #000, 0 0 12px color-mix(in srgb, var(--card-color, var(--lpz-yellow)) 60%, transparent);
  line-height: 1;
}
.tavern-npc-candle {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: radial-gradient(circle, #fff5b8 0%, #ffae3a 60%, transparent 100%);
  box-shadow: 0 0 14px 4px rgba(255, 174, 58, 0.55);
  animation: candleFlicker 1.4s ease-in-out infinite;
}
@keyframes candleFlicker {
  0%, 100% { opacity: 1; transform: scale(1); }
  40%      { opacity: 0.78; transform: scale(0.9); }
  60%      { opacity: 1; transform: scale(1.1); }
}

/* Sprechblase */
.tavern-npc-bubble {
  position: relative;
  background: rgba(15, 8, 4, 0.9);
  border: 2px solid var(--card-color, var(--lpz-yellow));
  padding: 14px 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, 0.6),
    0 0 18px color-mix(in srgb, var(--card-color, var(--lpz-yellow)) 25%, transparent);
}
.tavern-npc-bubble::before {
  /* Pixel-Sprechpfeil nach links zum Portrait */
  content: "";
  position: absolute;
  left: -12px;
  top: 26px;
  width: 0;
  height: 0;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-right: 12px solid var(--card-color, var(--lpz-yellow));
}
.tavern-npc-bubble::after {
  content: "";
  position: absolute;
  left: -8px;
  top: 28px;
  width: 0;
  height: 0;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-right: 9px solid rgba(15, 8, 4, 0.9);
}
.tavern-npc-name {
  font-family: var(--font-pixel);
  font-size: 11px;
  letter-spacing: 1.5px;
  color: var(--card-color, var(--lpz-yellow));
  text-shadow: 1px 1px 0 #000;
}
.tavern-npc-rolle {
  color: color-mix(in srgb, var(--card-color, var(--lpz-yellow)) 60%, var(--ink-mute));
  letter-spacing: 1px;
}
.tavern-npc-frage {
  font-family: var(--font-term);
  font-size: 19px;
  color: var(--ink);
  line-height: 1.35;
}

/* Farb-Varianten */
.tavern-npc--yellow { --card-color: var(--lpz-yellow); }
.tavern-npc--cyan   { --card-color: var(--arcade-cyan); }
.tavern-npc--pink   { --card-color: var(--arcade-pink); }

/* ----- Pinnwand ----- */
.tavern-board {
  background:
    linear-gradient(180deg, rgba(80, 50, 22, 0.55), rgba(40, 22, 8, 0.7)),
    repeating-linear-gradient(45deg, rgba(0,0,0,0.12) 0 4px, transparent 4px 8px);
  border: 2px solid color-mix(in srgb, var(--lpz-yellow) 28%, #2a1608);
  padding: 12px 16px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  position: relative;
  z-index: 2;
}
.tavern-board-head {
  display: flex;
  align-items: baseline;
  gap: 14px;
  flex-wrap: wrap;
}
.tavern-board-title {
  font-family: var(--font-pixel);
  font-size: 11px;
  letter-spacing: 1.5px;
  color: var(--lpz-yellow);
  text-shadow: 1px 1px 0 #000;
}
.tavern-board-hint {
  font-family: var(--font-term);
  font-size: 13px;
  color: var(--ink-mute);
  font-style: italic;
}
.tavern-board-notes {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 12px;
}
.tavern-note {
  position: relative;
  background: linear-gradient(180deg, #f8e7b4 0%, #e8d090 100%);
  color: #2a1a05;
  padding: 8px 12px 8px 24px;
  font-family: var(--font-term);
  font-size: 13px;
  line-height: 1.3;
  max-width: 320px;
  flex: 1 1 280px;
  transform: rotate(var(--rot, 0deg));
  box-shadow: 2px 3px 0 rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(0, 0, 0, 0.25);
}
.tavern-note-pin {
  position: absolute;
  left: 6px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--arcade-pink);
  text-shadow: 0 0 6px rgba(255, 51, 153, 0.8);
  font-size: 14px;
}
.tavern-note-text {
  display: inline-block;
}

/* ============================================================
   SLIDE 6 - TEAMS
   ============================================================ */
.teams-row {
  flex: 0 0 auto;
  margin: auto 0;
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.4vw;
  padding-top: 1.5vh;
}
.team-card {
  background: transparent;
  border: none;
  border-top: none;
  padding: 0;
  position: relative;
  perspective: 1400px;
  cursor: pointer;
  /* Höhe wachsen lassen, damit die größeren Texte + 4 Mitglieder sicher reinpassen */
  min-height: 540px;
  display: block;
  overflow: visible;
}
.team-card::before {
  content: none; /* Pattern wandert in .team-card-front */
}

.team-card-flipper {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: inherit;
  transform-style: preserve-3d;
  transition: transform 0s; /* Klick-Animation \u00fcber keyframes */
}

/* Lift + schneller Flip, sobald --flipping gesetzt ist */
.team-card--flipping .team-card-flipper {
  animation: team-card-flip 620ms cubic-bezier(0.45, 0.05, 0.25, 1) forwards;
}
@keyframes team-card-flip {
  0%   { transform: translateY(0)    rotateY(0deg)   scale(1); }
  35%  { transform: translateY(-22px) rotateY(70deg)  scale(1.05); }
  70%  { transform: translateY(-22px) rotateY(140deg) scale(1.05); }
  100% { transform: translateY(0)    rotateY(180deg) scale(1); }
}

/* Im Endzustand: Front statisch zeigen */
.team-card--front .team-card-flipper { transform: rotateY(180deg); }

.team-card-back,
.team-card-front {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  display: flex;
  flex-direction: column;
  border: 2px solid var(--line-2);
  border-top: 4px solid var(--lpz-yellow);
  background: rgba(0, 0, 0, 0.45);
}
.team-card.f-yellow .team-card-back,
.team-card.f-yellow .team-card-front { border-top-color: var(--lpz-yellow); }
.team-card.f-pink   .team-card-back,
.team-card.f-pink   .team-card-front { border-top-color: var(--arcade-magenta); }
.team-card.f-cyan   .team-card-back,
.team-card.f-cyan   .team-card-front { border-top-color: var(--arcade-cyan); }
.team-card.f-violet .team-card-back,
.team-card.f-violet .team-card-front { border-top-color: var(--arcade-violet); }
.team-card.f-orange .team-card-back,
.team-card.f-orange .team-card-front { border-top-color: var(--arcade-orange); }

/* ----- Vorderseite (alle bisherigen Inhalte) ----- */
.team-card-front {
  transform: rotateY(180deg);
  padding: 18px 14px;
  gap: 11px;
  overflow: hidden;
}
.team-card-front::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 28%, rgba(255,215,0,0.08), transparent 34%),
    linear-gradient(90deg, rgba(255,215,0,0.04) 1px, transparent 1px),
    linear-gradient(0deg, rgba(255,215,0,0.03) 1px, transparent 1px);
  background-size: auto, 18px 18px, 18px 18px;
  opacity: 0.65;
  pointer-events: none;
}
.team-card-front > * { position: relative; z-index: 1; }

/* ----- R\u00fcckseite (Trading-Card-Style mit Shimmer) ----- */
.team-card-back {
  align-items: stretch;
  justify-content: stretch;
  padding: 0;
  overflow: hidden;
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(255, 55, 184, 0.12), transparent 60%),
    radial-gradient(ellipse 80% 60% at 50% 100%, rgba(0, 240, 255, 0.10), transparent 60%),
    linear-gradient(180deg, #14092a 0%, #0a0418 100%);
}
.team-card-back-frame {
  position: relative;
  flex: 1;
  margin: 12px;
  border: 2px solid color-mix(in srgb, var(--card-color, var(--lpz-yellow)) 50%, transparent);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  overflow: hidden;
}
.team-card.f-yellow { --card-color: var(--lpz-yellow); }
.team-card.f-pink   { --card-color: var(--arcade-magenta); }
.team-card.f-cyan   { --card-color: var(--arcade-cyan); }
.team-card.f-violet { --card-color: var(--arcade-violet); }
.team-card.f-orange { --card-color: var(--arcade-orange); }

.team-card-back-pattern {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(45deg, color-mix(in srgb, var(--card-color, var(--lpz-yellow)) 14%, transparent) 25%, transparent 25%, transparent 75%, color-mix(in srgb, var(--card-color, var(--lpz-yellow)) 14%, transparent) 75%),
    linear-gradient(45deg, color-mix(in srgb, var(--card-color, var(--lpz-yellow)) 14%, transparent) 25%, transparent 25%, transparent 75%, color-mix(in srgb, var(--card-color, var(--lpz-yellow)) 14%, transparent) 75%);
  background-size: 22px 22px;
  background-position: 0 0, 11px 11px;
  opacity: 0.45;
  pointer-events: none;
}
.team-card-back-emblem {
  font-family: var(--font-pixel);
  font-size: 56px;
  line-height: 1;
  color: var(--card-color, var(--lpz-yellow));
  text-shadow:
    0 0 18px color-mix(in srgb, var(--card-color, var(--lpz-yellow)) 70%, transparent),
    0 0 32px color-mix(in srgb, var(--card-color, var(--lpz-yellow)) 35%, transparent);
  position: relative;
  z-index: 1;
}
.team-card-back-kuerzel {
  font-family: var(--font-pixel);
  font-size: 22px;
  letter-spacing: 3px;
  color: var(--ink);
  text-shadow: 0 0 10px color-mix(in srgb, var(--card-color, var(--lpz-yellow)) 60%, transparent);
  padding: 6px 14px;
  border-top: 1px dashed color-mix(in srgb, var(--card-color, var(--lpz-yellow)) 50%, transparent);
  border-bottom: 1px dashed color-mix(in srgb, var(--card-color, var(--lpz-yellow)) 50%, transparent);
  position: relative;
  z-index: 1;
}
.team-card-back-label {
  font-family: var(--font-pixel);
  font-size: 9px;
  letter-spacing: 2px;
  color: var(--ink-mute);
  position: relative;
  z-index: 1;
}

/* Diagonaler Shimmer-Sweep */
.team-card-shimmer {
  position: absolute;
  top: -50%;
  left: -60%;
  width: 60%;
  height: 200%;
  background: linear-gradient(
    115deg,
    transparent 0%,
    transparent 35%,
    rgba(255, 255, 255, 0.18) 47%,
    rgba(255, 255, 255, 0.55) 50%,
    rgba(255, 255, 255, 0.18) 53%,
    transparent 65%,
    transparent 100%
  );
  mix-blend-mode: screen;
  pointer-events: none;
  animation: team-card-shimmer 2.6s ease-in-out infinite;
}
@keyframes team-card-shimmer {
  0%   { transform: translateX(0); }
  60%  { transform: translateX(360%); }
  100% { transform: translateX(360%); }
}

/* Hover auf R\u00fcckseite: Karte hebt sich leicht, Glow um den Rahmen */
.team-card.team-card--back:hover .team-card-flipper {
  transform: translateY(-4px);
  transition: transform .18s ease-out;
}
.team-card.team-card--back:hover .team-card-back-frame {
  border-color: var(--card-color, var(--lpz-yellow));
  box-shadow: 0 0 28px color-mix(in srgb, var(--card-color, var(--lpz-yellow)) 55%, transparent);
}

/* --- alt: .team-card-head etc. galten direkt am .team-card; jetzt alles innerhalb von .team-card-front --- */
.team-card-front .team-card-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.team-card-icon {
  font-size: 32px;
  line-height: 1;
  font-family: var(--font-pixel);
  font-variant-emoji: text;
  color: var(--ink);
}
.team-card-meta {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 6px;
}
.team-card-kuerzel {
  font-family: var(--font-pixel);
  font-size: 10px;
  color: var(--arcade-cyan);
  letter-spacing: 1px;
}
.team-card-name {
  font-family: var(--font-pixel);
  font-size: 13px;
  color: var(--ink);
  line-height: 1.25;
  letter-spacing: 0.5px;
}
.team-card-domain {
  font-family: var(--font-term);
  font-size: 18px;
  color: var(--lpz-yellow);
  line-height: 1.3;
  font-style: italic;
  text-align: center;
  min-height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.team-card-beschreibung {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--ink-soft);
  line-height: 1.35;
  text-align: center;
  min-height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.team-card-terminal {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  padding: 9px 10px;
  border: 1px solid var(--line);
  background: rgba(0,0,0,0.22);
  min-height: 175px;
}
.term-line {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 3px;
  font-family: var(--font-term);
  font-size: 16px;
  color: var(--ink-soft);
  line-height: 1.2;
}
.term-line span {
  font-family: var(--font-pixel);
  font-size: 9px;
  color: var(--arcade-cyan);
  letter-spacing: 1px;
}
.team-card-artifacts {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 5px;
}
.team-card-artifacts span {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--bg-0);
  background: var(--lpz-yellow);
  padding: 3px 5px;
  line-height: 1.2;
}
.team-card-loop {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
}
.team-card-loop span {
  min-width: 0;
  border: 1px solid var(--line-2);
  padding: 5px 2px;
  text-align: center;
  font-family: var(--font-pixel);
  font-size: 6px;
  color: var(--lpz-yellow);
  background: rgba(255,215,0,0.06);
}
.team-card-minimap {
  flex: 1 1 auto;
  min-height: 58px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 1fr;
  gap: 4px;
  padding: 8px;
  border: 1px dashed var(--line);
  background: rgba(255,215,0,0.035);
}
.team-card-minimap span {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  font-family: var(--font-pixel);
  font-size: 6px;
  color: var(--ink-mute);
  border: 1px solid rgba(255,215,0,0.14);
  background: rgba(0,0,0,0.18);
}
.team-card-minimap span:nth-child(1),
.team-card-minimap span:nth-child(4),
.team-card-minimap span:nth-child(7),
.team-card-minimap span:nth-child(10) {
  color: var(--bg-0);
  background: var(--lpz-yellow);
}
.team-card-mitglieder {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 3px;
  padding-top: 8px;
  border-top: 1px dashed var(--line);
}
.team-card-mitglied {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-mute);
}
.team-card-mitglied b {
  color: var(--ink);
}

@media (prefers-reduced-motion: reduce) {
  .team-card-shimmer { display: none; }
  .team-card--flipping .team-card-flipper {
    animation: none;
    transform: rotateY(180deg);
  }
}

/* ============================================================
   SLIDE 7 - WORKING PACKAGES
   ============================================================ */
.wp-layout {
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 1.4vw;
  padding-top: 1.5vh;
  min-height: 0;
}
.wp-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: minmax(60px, 1fr);
  gap: 8px;
  align-content: start;
}
.wp-card {
  --rarity: var(--lpz-yellow);
  --rarity-soft: rgba(255, 215, 0, 0.07);
  background: rgba(0,0,0,0.4);
  border: 1px solid var(--line);
  border-left: 3px solid var(--rarity);
  padding: 8px 10px 6px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  cursor: pointer;
  transition: all .12s;
  position: relative;
}
.wp-card.rarity-common    { --rarity: #b1b5be; --rarity-soft: rgba(177,181,190,0.08); }
.wp-card.rarity-uncommon  { --rarity: #4ade80; --rarity-soft: rgba(74,222,128,0.10); }
.wp-card.rarity-rare      { --rarity: #60a5fa; --rarity-soft: rgba(96,165,250,0.10); }
.wp-card.rarity-epic      { --rarity: #c084fc; --rarity-soft: rgba(192,132,252,0.12); }
.wp-card.rarity-legendary {
  --rarity: #fbbf24;
  --rarity-soft: rgba(251,191,36,0.14);
  box-shadow: inset 0 0 0 1px rgba(251,191,36,0.35), 0 0 12px rgba(251,191,36,0.18);
}
.wp-card:hover {
  background: var(--rarity-soft);
  border-left-color: var(--rarity);
}
.wp-card.active {
  background: var(--rarity-soft);
  border-color: var(--rarity);
  box-shadow: 0 0 0 1px var(--rarity);
}
.wp-card.done {
  border-left-color: var(--arcade-green);
  border-color: rgba(57, 255, 20, 0.55);
  background: linear-gradient(
    180deg,
    rgba(57, 255, 20, 0.10) 0%,
    rgba(57, 255, 20, 0.05) 100%
  ), rgba(0, 0, 0, 0.4);
  box-shadow:
    inset 0 0 0 1px rgba(57, 255, 20, 0.20),
    0 0 12px rgba(57, 255, 20, 0.18);
}
.wp-card.done::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(
    135deg,
    transparent 0,
    transparent 10px,
    rgba(57, 255, 20, 0.06) 10px,
    rgba(57, 255, 20, 0.06) 11px
  );
}
.wp-card.done::after {
  content: "\2713"; /* Häkchen */
  position: absolute;
  top: -8px;
  left: -8px;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  color: var(--bg-0);
  background: var(--arcade-green);
  border: 2px solid rgba(0, 0, 0, 0.85);
  border-radius: 50%;
  box-shadow: 0 0 12px rgba(57, 255, 20, 0.65);
  z-index: 3;
}
.wp-card.done .wp-card-titel,
.wp-card.done .wp-card-rarity {
  text-decoration: line-through;
  text-decoration-color: rgba(57, 255, 20, 0.6);
  text-decoration-thickness: 1px;
}
.wp-card.done .wp-icon {
  filter: drop-shadow(0 0 6px rgba(57, 255, 20, 0.6));
}

/* ----- Gesperrt: leicht ausgegraut, keine Hover-Reaktion, sonst nichts ----- */
.wp-card.wp-card--locked {
  opacity: 0.55;
  filter: grayscale(0.7);
  cursor: not-allowed;
  pointer-events: none;
}
.wp-card-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.wp-card-nr {
  font-family: var(--font-pixel);
  font-size: 9px;
  color: var(--rarity);
  letter-spacing: 1px;
}
.wp-card-xp {
  font-family: var(--font-pixel);
  font-size: 8px;
  color: var(--arcade-green);
  letter-spacing: 0.5px;
  text-shadow: 0 0 4px rgba(57,255,20,0.4);
}
.wp-card-titel {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.2;
  text-align: center;
  padding: 0 4px;
}
.wp-card-icon-wrap {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px 0;
  color: var(--rarity);
}
.wp-icon {
  width: 60px;
  height: 60px;
  image-rendering: pixelated;
  image-rendering: -moz-crisp-edges;
  image-rendering: crisp-edges;
  -ms-interpolation-mode: nearest-neighbor;
  /* kein drop-shadow — der weicht die Pixel auf */
}
.wp-card.rarity-legendary .wp-card-icon-wrap {
  animation: wp-icon-pulse 2.4s ease-in-out infinite;
}
@keyframes wp-icon-pulse {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-1px); }
}
@media (prefers-reduced-motion: reduce) {
  .wp-card.rarity-legendary .wp-card-icon-wrap { animation: none; }
}
.wp-card-stats {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  margin-top: 4px;
  padding-top: 4px;
  border-top: 1px dashed rgba(255,255,255,0.06);
}
.wp-card-rarity {
  font-family: var(--font-pixel);
  font-size: 7px;
  letter-spacing: 1px;
  color: var(--rarity);
  text-transform: uppercase;
}
.wp-card-gold {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-mono);
  font-size: 9px;
  color: #ffd60a;
  font-weight: 700;
}
.gp-coin {
  width: 9px;
  height: 9px;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  flex: none;
}

.wp-detail {
  background: rgba(0,0,0,0.4);
  border: 1px solid var(--line-2);
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow-y: auto;
  overflow-x: hidden;
  min-width: 0;
  word-break: break-word;
  overflow-wrap: anywhere;
}
.wp-detail * {
  min-width: 0;
}
.wp-detail-empty {
  margin: auto;
  font-family: var(--font-term);
  font-size: 18px;
  color: var(--ink-mute);
  text-align: center;
  line-height: 1.3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}
.wp-detail-empty-text {
  letter-spacing: 0.5px;
}
.dragon-stage {
  position: relative;
  width: 220px;
  height: 140px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.pixel-dragon {
  width: 168px;
  height: 126px;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  filter: drop-shadow(0 0 6px rgba(57, 255, 20, 0.35));
  animation: dragon-breathe 2.4s steps(2, end) infinite;
}
@keyframes dragon-breathe {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-2px); }
}
.dragon-flame {
  position: absolute;
  left: 124px;
  top: 58px;
  width: 90px;
  height: 14px;
  display: flex;
  align-items: center;
  gap: 1px;
  pointer-events: none;
}
.flame-px {
  display: block;
  width: 14px;
  height: 14px;
  background: #ffd60a;
  box-shadow:
    0 0 6px rgba(255, 102, 0, 0.9),
    0 0 12px rgba(255, 45, 0, 0.6);
  transform-origin: left center;
  animation: flame-spit 1.6s steps(4, end) infinite;
}
.flame-px.f1 { animation-delay: 0s;    background: #ffe066; }
.flame-px.f2 { animation-delay: 0.08s; background: #ffaa00; width: 12px; height: 12px; }
.flame-px.f3 { animation-delay: 0.16s; background: #ff6a00; width: 10px; height: 10px; }
.flame-px.f4 { animation-delay: 0.24s; background: #ff2d2d; width: 8px;  height: 8px; }
.flame-px.f5 { animation-delay: 0.32s; background: #c40000; width: 6px;  height: 6px; }
@keyframes flame-spit {
  0%   { opacity: 0;   transform: translateX(-6px) scale(0.4); }
  20%  { opacity: 1;   transform: translateX(0)    scale(1);   }
  60%  { opacity: 0.9; transform: translateX(8px)  scale(1);   }
  100% { opacity: 0;   transform: translateX(20px) scale(0.7); }
}
@media (prefers-reduced-motion: reduce) {
  .pixel-dragon, .flame-px { animation: none; }
}
.wp-detail-head {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-bottom: 8px;
  border-bottom: 1px dashed var(--line);
}
.wp-detail-nr {
  font-family: var(--font-pixel);
  font-size: 10px;
  color: var(--lpz-yellow);
  letter-spacing: 1px;
}
.wp-detail-titel {
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 800;
  color: var(--ink);
}
.wp-detail-meta {
  font-family: var(--font-pixel);
  font-size: 9px;
  color: var(--arcade-green);
  letter-spacing: 1px;
  text-shadow: 0 0 4px rgba(57,255,20,0.4);
}
.wp-detail-text {
  font-family: var(--font-term);
  font-size: 16px;
  color: var(--ink-soft);
  line-height: 1.3;
}
.wp-detail-todos {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.wp-detail-todo {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-soft);
  line-height: 1.3;
  cursor: pointer;
  padding: 2px 0;
}
.wp-detail-todo:hover { color: var(--ink); }
.wp-detail-todo input {
  appearance: none;
  width: 14px; height: 14px;
  border: 1px solid var(--lpz-yellow);
  background: transparent;
  cursor: pointer;
  flex: 0 0 auto;
  margin-top: 1px;
  position: relative;
}
.wp-detail-todo input:checked {
  background: var(--lpz-yellow);
}
.wp-detail-todo input:checked::after {
  content: "✓";
  position: absolute;
  top: -2px; left: 1px;
  color: var(--bg-0);
  font-size: 12px;
  font-weight: 800;
}
.wp-detail-docs {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-top: 8px;
  border-top: 1px dashed var(--line);
}
.wp-detail-docs-label {
  font-family: var(--font-pixel);
  font-size: 8px;
  color: var(--arcade-cyan);
  letter-spacing: 1px;
}
.wp-detail-doc {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--lpz-yellow);
  text-decoration: none;
  border-bottom: 1px dashed transparent;
  transition: border-color .15s;
}
.wp-detail-doc:hover {
  border-bottom-color: var(--lpz-yellow);
}
.wp-detail-doc::before {
  content: "→ ";
  color: var(--ink-mute);
}

/* ============================================================
   SLIDE 8 - CHECK-INS
   ============================================================ */
.checkin-layout {
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: 1fr 260px;
  gap: 2vw;
  padding-top: 1.5vh;
  align-items: center;
  min-height: 0;
}
.checkin-col {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 0;
}
.checkin-grid {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 0;
  width: 100%;
  max-width: 760px;
  margin-inline: auto;
}
.checkin-card {
  background: rgba(0,0,0,0.4);
  border: 1px solid var(--line-2);
  border-left: 4px solid var(--lpz-yellow);
  padding: 10px 14px;
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 16px;
  align-items: center;
}
.checkin-wann {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.checkin-quest {
  font-family: var(--font-pixel);
  font-size: 8px;
  letter-spacing: 1.5px;
  color: var(--arcade-magenta);
  opacity: 0.75;
  text-shadow: 0 0 6px rgba(255, 55, 184, 0.35);
}
.checkin-wann-date {
  font-family: var(--font-pixel);
  font-size: 13px;
  color: var(--lpz-yellow);
  letter-spacing: 1px;
  text-shadow: 0 0 8px rgba(255,215,0,0.4);
  white-space: pre-line;
  line-height: 1.45;
}
.checkin-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.checkin-fokus {
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
}
.checkin-themen {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.checkin-themen-chip {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-soft);
  background: rgba(255,215,0,0.08);
  border: 1px solid rgba(255,215,0,0.35);
  padding: 2px 8px;
  white-space: nowrap;
}
.checkin-ergebnis {
  font-family: var(--font-term);
  font-size: 13px;
  color: var(--ink-mute);
  line-height: 1.3;
}
.checkin-reward-tag {
  font-family: var(--font-pixel);
  font-size: 9px;
  letter-spacing: 1px;
  color: var(--arcade-cyan);
  opacity: 0.85;
  text-shadow: 0 0 6px rgba(0, 240, 255, 0.35);
  margin-right: 8px;
}
.checkin-qa {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: rgba(0,0,0,0.4);
  border: 1px dashed var(--arcade-cyan);
  width: 100%;
  max-width: 760px;
  margin-inline: auto;
  box-sizing: border-box;
}
.checkin-qa-tag {
  font-family: var(--font-pixel);
  font-size: 10px;
  letter-spacing: 1px;
  color: var(--arcade-cyan);
  text-shadow: 0 0 8px color-mix(in srgb, var(--arcade-cyan) 40%, transparent);
  white-space: nowrap;
}
.checkin-qa-text {
  font-family: var(--font-term);
  font-size: 13px;
  color: var(--ink);
  line-height: 1.3;
}

.checkin-help {
  justify-self: end;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px;
  background: rgba(0,0,0,0.45);
  border: 2px solid var(--lpz-yellow);
  box-shadow:
    inset 0 0 0 1px var(--bg-0),
    0 0 20px rgba(255,215,0,0.3);
}
.checkin-help img {
  width: 100%;
  max-width: 220px;
  height: auto;
  border: 1px solid var(--line);
}
.checkin-help-cap {
  font-family: var(--font-pixel);
  font-size: 9px;
  color: var(--arcade-magenta);
  letter-spacing: 1px;
  text-shadow: 0 0 6px rgba(255,55,184,0.4);
  text-align: center;
}

.coaches-row {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  border-top: 1px dashed var(--line-2);
  padding: 1.5vh 0 0 0;
}
.coach-final {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: rgba(0,0,0,0.4);
  border: 1px solid var(--line);
  border-left: 3px solid var(--lpz-yellow);
}
.coach-final-img {
  width: 56px; height: 56px;
  border: 2px solid var(--lpz-yellow);
  overflow: hidden;
  flex: 0 0 auto;
}
.coach-final-img img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.05);
}
.coach-final-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.coach-final-name {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
}
.coach-final-rolle {
  font-family: var(--font-term);
  font-size: 14px;
  color: var(--ink-soft);
  line-height: 1.2;
}
.coach-final-company {
  font-family: var(--font-pixel);
  font-size: 8px;
  color: var(--lpz-yellow);
  letter-spacing: 1px;
}

/* ============================================================
   LIGHTBOX
   ============================================================ */
.lightbox {
  position: fixed;
  inset: 0;
  background: rgba(7,6,12,0.96);
  z-index: 200;
  display: none;
  padding: 40px;
}
.lightbox.open {
  display: flex;
  align-items: stretch;
  justify-content: stretch;
}
.lightbox-inner {
  width: 100%;
  background: var(--bg-1);
  border: 2px solid var(--lpz-yellow);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.lightbox-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 18px;
  border-bottom: 1px solid var(--line-2);
  background: rgba(255,215,0,0.06);
}
.lightbox-head span {
  font-family: var(--font-pixel);
  font-size: 11px;
  color: var(--lpz-yellow);
  letter-spacing: 1px;
}
.lightbox-controls {
  display: flex;
  gap: 6px;
}
.lightbox-btn {
  width: 32px; height: 32px;
  background: transparent;
  border: 1px solid var(--lpz-yellow);
  color: var(--lpz-yellow);
  font-size: 16px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all .12s;
}
.lightbox-btn:hover {
  background: var(--lpz-yellow);
  color: var(--bg-0);
}
.lightbox-body {
  flex: 1;
  overflow: auto;
  padding: 24px;
  background: var(--ink);
}
.lightbox-body svg {
  display: block;
  margin: 0 auto;
  transform-origin: top left;
  transition: width .2s ease, height .2s ease;
}

/* ============================================================
   TOAST + EASTER EGGS
   ============================================================ */
.toast {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%) translateY(-200%);
  background: var(--lpz-yellow);
  color: var(--bg-0);
  padding: 12px 22px;
  font-family: var(--font-pixel);
  font-size: 10px;
  letter-spacing: 1px;
  z-index: 300;
  transition: transform .3s ease;
  box-shadow: 0 0 24px rgba(255,215,0,0.5);
}
.toast.show {
  transform: translateX(-50%) translateY(0);
}

/* ============================================================
   VERSION SWITCH + PARTNER LOGOS
   ============================================================ */
.variant-switch {
  position: fixed;
  top: 14px;
  right: 16px;
  z-index: 180;
  display: flex;
  gap: 8px;
  font-family: var(--font-pixel);
  font-size: 8px;
  letter-spacing: 1px;
}
.variant-pill {
  color: var(--lpz-yellow);
  background: rgba(7,6,12,0.86);
  border: 1px solid var(--line-3);
  padding: 7px 9px;
  text-decoration: none;
  box-shadow: 0 0 12px rgba(255,215,0,0.18);
}
.variant-pill.active {
  color: var(--bg-0);
  background: var(--lpz-yellow);
}
.variant-pill:not(.active):hover {
  border-color: var(--lpz-yellow);
  background: rgba(255,215,0,0.12);
}

.company-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-height: 14px;
  font-family: var(--font-pixel);
  font-size: 7px;
  line-height: 1;
  letter-spacing: 0.5px;
  white-space: nowrap;
}
.company-word { display: inline-block; }
.ms-window {
  display: grid;
  grid-template-columns: repeat(2, 5px);
  grid-template-rows: repeat(2, 5px);
  gap: 1px;
}
.ms-window span { width: 5px; height: 5px; display: block; }
.ms-red { background: var(--ms-red); }
.ms-green { background: var(--ms-green); }
.ms-blue { background: var(--ms-blue); }
.ms-yellow { background: var(--ms-yellow); }
.logo-microsoft .company-word { color: var(--lpz-yellow); }
.logo-syntax .syntax-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 12px;
  line-height: 0;
}
.logo-syntax .syntax-mark svg {
  width: 100%;
  height: 100%;
  display: block;
}
.logo-syntax .company-word { color: var(--lpz-yellow); }
.coach-final-company .company-logo { justify-content: flex-start; }

/* ============================================================
   GIRLS DAY MIX - alter Entwurf + Retro/Geek, nicht weiß
   ============================================================ */
body.theme-girlsday {
  --arcade-cyan:    #06ffd4;
  --arcade-magenta: #ff2d87;
  --arcade-green:   #39ff14;
  --arcade-orange:  #ff8a3d;
  --arcade-violet:  #7c3aed;
  --bg-0:   #12051e;
  --bg-1:   #1c0b2f;
  --bg-2:   #2a1448;
  --paper:  #24123c;
  --paper-2:#321a53;
  --ink:      #fff8e8;
  --ink-soft: #dfd4ef;
  --ink-mute: #a89abb;
  --ink-dim:  #6e607f;
  --line:   rgba(255, 248, 77, 0.18);
  --line-2: rgba(255, 45, 135, 0.32);
  --line-3: rgba(6, 255, 212, 0.45);
  background: var(--bg-0);
}
body.theme-girlsday::before {
  background:
    repeating-linear-gradient(
      0deg,
      rgba(255,255,255,0) 0px,
      rgba(255,255,255,0) 3px,
      rgba(255,248,77,0.026) 3px,
      rgba(255,248,77,0.026) 4px
    ),
    radial-gradient(ellipse 110% 70% at 50% 50%, transparent 46%, rgba(0,0,0,0.45) 100%);
  opacity: 0.7;
  mix-blend-mode: overlay;
}
body.theme-girlsday .slide {
  background:
    radial-gradient(ellipse 44% 42% at 10% 12%, rgba(255,45,135,0.42) 0%, transparent 62%),
    radial-gradient(ellipse 42% 36% at 86% 18%, rgba(6,255,212,0.28) 0%, transparent 58%),
    radial-gradient(ellipse 48% 44% at 78% 86%, rgba(124,58,237,0.4) 0%, transparent 62%),
    radial-gradient(ellipse 38% 34% at 28% 90%, rgba(255,248,77,0.18) 0%, transparent 58%),
    linear-gradient(135deg, #10051c 0%, #211037 45%, #061527 100%);
}
body.theme-girlsday .slide-inner {
  background:
    linear-gradient(135deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0.02) 42%, rgba(255,248,77,0.04) 100%),
    rgba(12, 7, 22, 0.74);
  border: 1px solid rgba(255,248,77,0.5);
  box-shadow:
    0 0 0 1px rgba(255,45,135,0.16),
    0 22px 70px rgba(0,0,0,0.5),
    inset 0 0 55px rgba(6,255,212,0.05);
  backdrop-filter: blur(14px);
}
body.theme-girlsday .slide-inner::before,
body.theme-girlsday .slide-inner::after {
  width: 30px;
  height: 30px;
  border-color: var(--lpz-yellow);
}
body.theme-girlsday .slide-head {
  border-bottom-color: rgba(255,248,77,0.2);
}
body.theme-girlsday .slide-title,
body.theme-girlsday .hero-title,
body.theme-girlsday .hero-title-l1,
body.theme-girlsday .hero-title-l2 {
  font-family: var(--font-display);
  letter-spacing: 0;
}
body.theme-girlsday .slide-title {
  color: var(--lpz-yellow);
  font-size: clamp(26px, 3.8vw, 52px);
  line-height: 0.95;
  text-shadow: 0 0 22px rgba(255,215,0,0.28);
}
body.theme-girlsday .slide-title .accent {
  color: var(--arcade-magenta);
  text-shadow: 0 0 22px rgba(255,45,135,0.46);
}
body.theme-girlsday .slide-eyebrow,
body.theme-girlsday .hero-meta-label,
body.theme-girlsday .dd-nav-nr,
body.theme-girlsday .wp-card-nr,
body.theme-girlsday .agenda-zeit,
body.theme-girlsday .discuss-card-nr,
body.theme-girlsday .team-card-kuerzel,
body.theme-girlsday .coach-final-company {
  text-shadow: 0 0 10px rgba(6,255,212,0.35);
}
body.theme-girlsday .hero-title-l1,
body.theme-girlsday .hero-title-l2 {
  font-size: clamp(34px, 5vw, 72px);
  line-height: 0.95;
}
body.theme-girlsday .hero-title-l1 {
  color: var(--ink);
  text-shadow: 0 0 24px rgba(6,255,212,0.18);
}
body.theme-girlsday .hero-title-l2 {
  color: var(--lpz-yellow);
  text-shadow: 0 0 30px rgba(255,215,0,0.46);
}
body.theme-girlsday .hero-badge {
  color: var(--bg-0);
  background: linear-gradient(90deg, var(--lpz-yellow), #fff84d);
}
body.theme-girlsday .hero-pitch {
  color: var(--arcade-cyan);
  background: rgba(6,255,212,0.08);
  border: 1px solid rgba(6,255,212,0.24);
  border-left: 4px solid var(--arcade-cyan);
  border-radius: 8px;
  padding: 12px 16px;
  text-shadow: 0 0 8px rgba(6,255,212,0.32);
}
body.theme-girlsday .hero-pitch .blink { color: var(--lpz-yellow); }
body.theme-girlsday .hero-meta-row,
body.theme-girlsday .hero-coach,
body.theme-girlsday .hero-monkey,
body.theme-girlsday .agenda-item,
body.theme-girlsday .demo-hero,
body.theme-girlsday .demo-card,
body.theme-girlsday .dd-content,
body.theme-girlsday .dd-karte,
body.theme-girlsday .discuss-card,
body.theme-girlsday .team-card,
body.theme-girlsday .wp-card,
body.theme-girlsday .wp-detail,
body.theme-girlsday .checkin-card,
body.theme-girlsday .checkin-help,
body.theme-girlsday .coach-final {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.018) 100%),
    rgba(12, 8, 22, 0.72);
  border-color: rgba(255,248,77,0.22);
  border-radius: 8px;
  box-shadow:
    0 0 0 1px rgba(255,45,135,0.07),
    0 14px 32px rgba(0,0,0,0.28);
}
body.theme-girlsday .hero-monkey,
body.theme-girlsday .checkin-help,
body.theme-girlsday .demo-hero {
  border-color: var(--lpz-yellow);
  box-shadow:
    0 0 0 1px rgba(255,45,135,0.22),
    0 0 24px rgba(255,215,0,0.18),
    0 18px 42px rgba(0,0,0,0.32);
}
body.theme-girlsday .hero-coach:hover,
body.theme-girlsday .agenda-item:hover,
body.theme-girlsday .demo-card:hover,
body.theme-girlsday .wp-card:hover,
body.theme-girlsday .discuss-card:hover {
  background: rgba(255,45,135,0.12);
  border-color: rgba(6,255,212,0.5);
}
body.theme-girlsday .hero-coach-img,
body.theme-girlsday .coach-final-img {
  background: var(--paper);
  box-shadow: 0 0 0 2px rgba(255,215,0,0.5);
}
body.theme-girlsday .hero-coach-img img,
body.theme-girlsday .coach-final-img img {
  filter: grayscale(0.18) contrast(1.08) brightness(1.02);
}
body.theme-girlsday .company-word { color: var(--lpz-yellow); }
body.theme-girlsday .logo-syntax .syntax-mark { color: var(--arcade-cyan); }
body.theme-girlsday .dd-diagramm,
body.theme-girlsday .lightbox-body {
  background: #fffce0;
}
body.theme-girlsday .hud,
body.theme-girlsday .variant-pill {
  background: rgba(12,7,22,0.9);
  border-color: rgba(255,248,77,0.5);
}
body.theme-girlsday .variant-pill.active {
  color: var(--bg-0);
  background: linear-gradient(90deg, var(--lpz-yellow), #fff84d);
}

/* ============================================================
   SLIDE 9 - ABSCHLUSS / GAME ON
   ============================================================ */
.slide--closing .slide-inner {
  align-items: stretch;
}
.closing-stage {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 3.2vh;
  padding: 1vh 2vw 2vh;
  min-height: 0;
}

/* ---- Boss / Party HP HUD ---- */
.closing-hud {
  width: min(720px, 92%);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.closing-hud-row {
  display: grid;
  grid-template-columns: 70px 170px 1fr 110px;
  align-items: center;
  gap: 14px;
  padding: 8px 14px;
  background: rgba(0, 0, 0, 0.45);
  border: 1px solid var(--line-2);
  border-left: 3px solid var(--lpz-yellow);
}
.closing-hud-label {
  font-family: var(--font-pixel);
  font-size: 10px;
  letter-spacing: 1.5px;
  color: var(--ink-mute);
}
.closing-hud-name {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: 0.5px;
}
.closing-hud-bar {
  position: relative;
  height: 14px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--line-2);
  overflow: hidden;
}
.closing-hud-bar::after {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    90deg,
    rgba(0, 0, 0, 0.25) 0 2px,
    transparent 2px 4px
  );
  pointer-events: none;
}
.closing-hud-fill {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--arcade-magenta), var(--lpz-yellow));
  box-shadow:
    inset 0 0 6px rgba(255, 255, 255, 0.4),
    0 0 10px rgba(255, 55, 184, 0.45);
  transform-origin: left center;
  animation: closing-hp-fill 900ms cubic-bezier(0.16, 0.84, 0.32, 1.18) 240ms both;
}
.closing-hud-row--cyan {
  border-left-color: var(--arcade-cyan);
}
.closing-hud-row--cyan .closing-hud-fill {
  background: linear-gradient(90deg, var(--arcade-cyan), var(--arcade-green));
  box-shadow:
    inset 0 0 6px rgba(255, 255, 255, 0.4),
    0 0 10px rgba(0, 240, 255, 0.45);
}
.closing-hud-val {
  font-family: var(--font-pixel);
  font-size: 9px;
  letter-spacing: 1px;
  color: var(--lpz-yellow);
  text-align: right;
  text-shadow: 0 0 6px rgba(255, 215, 0, 0.35);
}
.closing-hud-row--cyan .closing-hud-val {
  color: var(--arcade-cyan);
  text-shadow: 0 0 6px rgba(0, 240, 255, 0.4);
}

@keyframes closing-hp-fill {
  0%   { transform: scaleX(0); }
  60%  { transform: scaleX(1.04); }
  100% { transform: scaleX(1); }
}

/* ---- PRESS START button (Arcade) ---- */
.closing-press {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 18px 44px 14px;
  background:
    linear-gradient(180deg, rgba(255, 215, 0, 0.10), rgba(255, 55, 184, 0.10)),
    rgba(0, 0, 0, 0.55);
  border: 2px solid var(--lpz-yellow);
  color: var(--lpz-yellow);
  cursor: pointer;
  font: inherit;
  letter-spacing: 1px;
  box-shadow:
    inset 0 0 0 1px var(--bg-0),
    0 0 24px rgba(255, 215, 0, 0.35),
    0 0 60px rgba(255, 55, 184, 0.15);
  transition: transform 120ms ease, box-shadow 200ms ease;
  animation: closing-press-pulse 1.6s ease-in-out infinite;
}
.closing-press::before,
.closing-press::after {
  content: "";
  position: absolute;
  inset: -8px;
  border: 1px dashed rgba(255, 215, 0, 0.35);
  pointer-events: none;
}
.closing-press::after {
  inset: -14px;
  border-color: rgba(255, 55, 184, 0.25);
}
.closing-press:hover {
  transform: translateY(-2px);
  box-shadow:
    inset 0 0 0 1px var(--bg-0),
    0 0 32px rgba(255, 215, 0, 0.55),
    0 0 80px rgba(255, 55, 184, 0.3);
}
.closing-press:active {
  transform: translateY(0) scale(0.98);
}
.closing-press-arrow {
  font-family: var(--font-pixel);
  font-size: 18px;
  color: var(--arcade-cyan);
  text-shadow: 0 0 8px rgba(0, 240, 255, 0.55);
}
.closing-press-text {
  font-family: var(--font-pixel);
  font-size: clamp(20px, 3.4vw, 36px);
  color: var(--lpz-yellow);
  text-shadow:
    2px 2px 0 var(--bg-0),
    0 0 12px rgba(255, 215, 0, 0.55),
    0 0 28px rgba(255, 55, 184, 0.35);
  animation: closing-press-blink 1.1s steps(2, end) infinite;
}
.closing-press-sub {
  font-family: var(--font-pixel);
  font-size: 9px;
  letter-spacing: 1.5px;
  color: var(--arcade-magenta);
  opacity: 0.85;
  text-shadow: 0 0 6px rgba(255, 55, 184, 0.4);
}

@keyframes closing-press-pulse {
  0%, 100% {
    box-shadow:
      inset 0 0 0 1px var(--bg-0),
      0 0 24px rgba(255, 215, 0, 0.35),
      0 0 60px rgba(255, 55, 184, 0.15);
  }
  50% {
    box-shadow:
      inset 0 0 0 1px var(--bg-0),
      0 0 36px rgba(255, 215, 0, 0.55),
      0 0 90px rgba(255, 55, 184, 0.3);
  }
}
@keyframes closing-press-blink {
  0%, 60%   { opacity: 1; }
  61%, 100% { opacity: 0.55; }
}

/* ---- Stat strip ---- */
.closing-stats {
  width: min(880px, 96%);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.closing-stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 14px;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid var(--line-2);
  border-top: 3px solid var(--arcade-cyan);
}
.closing-stat-label {
  font-family: var(--font-pixel);
  font-size: 8px;
  letter-spacing: 1.5px;
  color: var(--ink-mute);
}
.closing-stat-value {
  font-family: var(--font-pixel);
  font-size: 13px;
  color: var(--lpz-yellow);
  letter-spacing: 0.5px;
  text-shadow: 0 0 8px rgba(255, 215, 0, 0.35);
}

/* ---- Flavor footer ---- */
.closing-flavor {
  flex: 0 0 auto;
  text-align: center;
  padding: 1.2vh 0 0.4vh;
  font-family: var(--font-pixel);
  font-size: 10px;
  letter-spacing: 1.5px;
  color: var(--arcade-magenta);
  opacity: 0.75;
  text-shadow: 0 0 6px rgba(255, 55, 184, 0.35);
  border-top: 1px dashed var(--line-2);
}

@media (prefers-reduced-motion: reduce) {
  .closing-press,
  .closing-press-text,
  .closing-hud-fill {
    animation: none !important;
    transform: none !important;
  }
}

/* ============================================================
   SLIDE 10 - DOWNLOADS
   ============================================================ */
.dl-scroll {
  flex: 1 1 auto;
  overflow: hidden;
  padding: 0.5vh 0.5vw 1vh;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.dl-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(2, minmax(0, 1fr));
  grid-auto-flow: dense;
  gap: 14px;
  flex: 1 1 auto;
  min-height: 0;
}
.dl-card {
  --dl-accent: var(--lpz-yellow);
  background: rgba(0,0,0,0.45);
  border: 1px solid var(--line-2);
  border-top: 3px solid var(--dl-accent);
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}
.dl-card[data-rows="2"] {
  grid-row: span 2;
}
.dl-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 10px;
  border-bottom: 1px dashed var(--line);
}
.dl-card-title {
  font-family: var(--font-pixel);
  font-size: 10px;
  letter-spacing: 1px;
  color: var(--dl-accent);
  text-shadow: 0 0 8px color-mix(in srgb, var(--dl-accent) 40%, transparent);
}
.dl-card-count {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink-mute);
  border: 1px solid var(--line-2);
  padding: 1px 6px;
}
.dl-card-list {
  list-style: none;
  margin: 0;
  padding: 0;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.dl-item {
  flex: 1 1 0;
  display: flex;
  min-height: 0;
}
.dl-item + .dl-item {
  border-top: 1px dashed var(--line);
}
.dl-item-link {
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: 44px 1fr 16px;
  gap: 10px;
  align-items: center;
  padding: 6px 10px;
  text-decoration: none;
  color: var(--ink);
  transition: background-color .15s, color .15s;
  min-height: 0;
}
.dl-item-link:hover {
  background: rgba(255, 215, 0, 0.06);
}
.dl-item-typ {
  font-family: var(--font-pixel);
  font-size: 8px;
  letter-spacing: 0.5px;
  text-align: center;
  padding: 4px 2px;
  border: 1px solid var(--dl-accent);
  color: var(--dl-accent);
  align-self: center;
}
.dl-item-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.dl-item-titel {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.25;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.dl-item-desc {
  display: none;
}
.dl-item-arrow {
  font-family: var(--font-pixel);
  font-size: 12px;
  color: var(--dl-accent);
  text-align: right;
}

/* Inline download chips inside Quest detail */
.wp-detail-downloads {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-top: 8px;
  border-top: 1px dashed var(--line);
}
.wp-detail-dl-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.wp-detail-dl-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--arcade-cyan);
  text-decoration: none;
  border: 1px solid var(--arcade-cyan);
  padding: 3px 8px;
  background: rgba(0, 240, 255, 0.06);
  transition: background-color .15s, color .15s;
}
.wp-detail-dl-chip::before {
  content: "↓";
  color: var(--arcade-cyan);
}
.wp-detail-dl-chip:hover {
  background: var(--arcade-cyan);
  color: var(--bg-0, #0c0716);
}
.wp-detail-dl-chip:hover::before {
  color: inherit;
}

/* ============================================================
   RESPONSIVE - mobile fallback
   ============================================================ */
@media (max-width: 900px), (max-aspect-ratio: 4/3) {
  .deck { overflow-y: auto; overflow-x: hidden; flex-direction: column; scroll-snap-type: y mandatory; }
  .slide { flex: 0 0 auto; min-height: 100vh; }
  .hero-slide { grid-template-columns: 1fr !important; }
  .demo-layout, .dd-layout, .wp-layout, .checkin-layout { grid-template-columns: 1fr; }
  .demo-grid { grid-template-columns: repeat(2, 1fr); grid-template-rows: auto; }
  .agenda-grid { grid-template-columns: 1fr; }
  .teams-row { grid-template-columns: repeat(2, 1fr); }
  .wp-grid { grid-template-columns: repeat(2, 1fr); }
  .discuss-grid { grid-template-columns: 1fr; grid-template-rows: auto; }
  .coaches-row { grid-template-columns: 1fr; }
  .closing-stats { grid-template-columns: repeat(2, 1fr); }
  .closing-hud-row { grid-template-columns: 60px 1fr; row-gap: 6px; }
  .closing-hud-row .closing-hud-bar { grid-column: 1 / -1; }
  .closing-hud-row .closing-hud-val { grid-column: 1 / -1; text-align: left; }
  .dl-grid {
    grid-template-columns: 1fr;
    grid-template-rows: none;
  }
  .dl-card[data-rows="2"] { grid-row: auto; }
}