:root {
      --bg-1: #0a0a1a;
      --bg-2: #150a2e;
      --bg-3: #2d0a3e;
      --accent: #ff3cac;
      --accent-2: #784ba0;
      --accent-3: #2b86c5;
      --text: #f5f5ff;
      --muted: #b8b8d4;
      --glass: rgba(255, 255, 255, 0.06);
      --glass-border: rgba(255, 255, 255, 0.12);
    }

    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    html,
    body {
      height: 100%;
      font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
      color: var(--text);
      overflow: hidden;
      background: var(--bg-1);
    }

    body::before {
      content: '';
      position: fixed;
      inset: 0;
      background:
        radial-gradient(circle at 20% 20%, rgba(255, 60, 172, 0.25), transparent 40%),
        radial-gradient(circle at 80% 70%, rgba(43, 134, 197, 0.25), transparent 45%),
        radial-gradient(circle at 50% 50%, rgba(120, 75, 160, 0.2), transparent 60%),
        linear-gradient(135deg, var(--bg-1), var(--bg-2), var(--bg-3));
      background-size: 200% 200%;
      animation: bgShift 20s ease infinite;
      z-index: -2;
    }

    body::after {
      content: '';
      position: fixed;
      inset: 0;
      background-image:
        radial-gradient(circle, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
      background-size: 32px 32px;
      z-index: -1;
      pointer-events: none;
    }

    @keyframes bgShift {

      0%,
      100% {
        background-position: 0% 0%;
      }

      50% {
        background-position: 100% 100%;
      }
    }

    .stage {
      position: relative;
      width: 100vw;
      height: 100vh;
      overflow: hidden;
      perspective: 1800px;
    }

    .slide {
      position: absolute;
      inset: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 4vw 6vw;
      opacity: 0;
      pointer-events: none;
      transform: translateX(60px) scale(0.96) rotateY(-8deg);
      transition:
        opacity 0.7s cubic-bezier(.22, .9, .3, 1),
        transform 0.8s cubic-bezier(.22, .9, .3, 1),
        filter 0.7s ease;
      filter: blur(8px);
    }

    .slide.active {
      opacity: 1;
      pointer-events: auto;
      transform: translateX(0) scale(1) rotateY(0deg);
      filter: blur(0);
    }

    .slide.prev {
      transform: translateX(-60px) scale(0.96) rotateY(8deg);
    }

    .card {
      width: 100%;
      max-width: 1200px;
      background: var(--glass);
      backdrop-filter: blur(24px) saturate(1.4);
      -webkit-backdrop-filter: blur(24px) saturate(1.4);
      border: 1px solid var(--glass-border);
      border-radius: 28px;
      padding: clamp(2rem, 4vw, 4rem);
      box-shadow:
        0 30px 80px -20px rgba(0, 0, 0, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
      max-height: 88vh;
      overflow-y: auto;
    }

    .card::-webkit-scrollbar {
      width: 6px;
    }

    .card::-webkit-scrollbar-thumb {
      background: var(--glass-border);
      border-radius: 3px;
    }

    .kicker {
      display: inline-block;
      font-size: 0.78rem;
      letter-spacing: 0.25em;
      text-transform: uppercase;
      color: var(--accent);
      padding: 0.4rem 0.9rem;
      border: 1px solid rgba(255, 60, 172, 0.4);
      border-radius: 999px;
      margin-bottom: 1.4rem;
      background: rgba(255, 60, 172, 0.08);
    }

    h1 {
      font-size: clamp(2.2rem, 5.5vw, 4.8rem);
      font-weight: 800;
      line-height: 1.05;
      letter-spacing: -0.03em;
      background: linear-gradient(135deg, #fff, #ff3cac 40%, #2b86c5);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
      margin-bottom: 1rem;
    }

    h2 {
      font-size: clamp(1.8rem, 4vw, 3rem);
      font-weight: 700;
      letter-spacing: -0.02em;
      margin-bottom: 1.5rem;
      background: linear-gradient(135deg, #fff, #ddd 80%);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
    }

    h3 {
      font-size: clamp(1.1rem, 1.6vw, 1.4rem);
      font-weight: 600;
      color: var(--accent);
      margin-bottom: 0.6rem;
      letter-spacing: -0.01em;
    }

    p,
    li {
      font-size: clamp(1rem, 1.25vw, 1.15rem);
      line-height: 1.6;
      color: var(--muted);
    }

    ul {
      list-style: none;
    }

    ul li {
      position: relative;
      padding-left: 1.6rem;
      margin-bottom: 0.65rem;
    }

    ul li::before {
      content: '';
      position: absolute;
      left: 0;
      top: 0.65em;
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: linear-gradient(135deg, var(--accent), var(--accent-3));
      box-shadow: 0 0 12px rgba(255, 60, 172, 0.6);
    }

    .grid-2 {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 2rem;
    }

    .grid-3 {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 1.5rem;
    }

    @media (max-width: 768px) {

      .grid-2,
      .grid-3 {
        grid-template-columns: 1fr;
      }
    }

    .tile {
      background: rgba(255, 255, 255, 0.04);
      border: 1px solid var(--glass-border);
      border-radius: 18px;
      padding: 1.4rem;
      transition: transform 0.3s ease, border-color 0.3s ease;
    }

    .tile:hover {
      transform: translateY(-4px);
      border-color: var(--accent);
    }

    code,
    .code {
      font-family: 'JetBrains Mono', 'Fira Code', monospace;
      font-size: 0.92rem;
      background: rgba(0, 0, 0, 0.4);
      color: #ffb3e0;
      padding: 0.15em 0.45em;
      border-radius: 6px;
      border: 1px solid rgba(255, 60, 172, 0.2);
    }

    pre.code-block {
      background: rgba(0, 0, 0, 0.55);
      border: 1px solid var(--glass-border);
      border-radius: 12px;
      padding: 1.2rem 1.4rem;
      overflow-x: auto;
      color: #e4d7ff;
      font-family: 'JetBrains Mono', monospace;
      font-size: 0.88rem;
      line-height: 1.55;
      margin: 0.8rem 0;
    }

    pre .k {
      color: #ff7eb6;
    }

    pre .p {
      color: #82cfff;
    }

    pre .v {
      color: #ffb86b;
    }

    pre .c {
      color: #6b7393;
      font-style: italic;
    }

    /* Title slide */
    .title-slide {
      text-align: center;
    }

    .title-slide h1 {
      font-size: clamp(3rem, 8vw, 7rem);
      animation: floatHero 6s ease-in-out infinite;
    }

    @keyframes floatHero {

      0%,
      100% {
        transform: translateY(0);
      }

      50% {
        transform: translateY(-12px);
      }
    }

    .subtitle {
      font-size: clamp(1.1rem, 2vw, 1.6rem);
      color: var(--muted);
      margin-top: 0.5rem;
    }

    /* TOC */
    .toc-list {
      counter-reset: toc;
    }

    .toc-list li {
      counter-increment: toc;
      padding-left: 3.5rem;
      font-size: clamp(1.05rem, 1.4vw, 1.3rem);
      margin-bottom: 0.9rem;
      color: var(--text);
    }

    .toc-list li::before {
      content: counter(toc, decimal-leading-zero);
      background: none;
      box-shadow: none;
      border-radius: 0;
      width: auto;
      height: auto;
      top: 0;
      font-family: 'JetBrains Mono', monospace;
      color: var(--accent);
      font-size: 0.9em;
      font-weight: 600;
    }

    .toc-list li.sub {
      padding-left: 5rem;
      font-size: 1rem;
      color: var(--muted);
      margin-bottom: 0.4rem;
    }

    .toc-list li.sub::before {
      content: '›';
      left: 3.5rem;
      color: var(--accent-3);
    }

    /* Navigation */
    .nav {
      position: fixed;
      bottom: 1.5rem;
      left: 50%;
      transform: translateX(-50%);
      display: flex;
      align-items: center;
      gap: 1rem;
      background: rgba(10, 10, 26, 0.6);
      backdrop-filter: blur(20px);
      border: 1px solid var(--glass-border);
      padding: 0.6rem 1rem;
      border-radius: 999px;
      z-index: 100;
    }

    .nav button {
      background: transparent;
      border: 1px solid var(--glass-border);
      color: var(--text);
      width: 38px;
      height: 38px;
      border-radius: 50%;
      cursor: pointer;
      font-size: 1rem;
      transition: all 0.2s ease;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .nav button:hover {
      background: var(--accent);
      border-color: var(--accent);
      transform: scale(1.08);
    }

    .nav .counter {
      font-family: 'JetBrains Mono', monospace;
      font-size: 0.85rem;
      color: var(--muted);
      min-width: 50px;
      text-align: center;
    }

    .progress {
      position: fixed;
      top: 0;
      left: 0;
      height: 3px;
      background: linear-gradient(90deg, var(--accent), var(--accent-3));
      transition: width 0.5s ease;
      z-index: 100;
      box-shadow: 0 0 12px var(--accent);
    }

    /* Demo elements */
    .demo-box {
      width: 70px;
      height: 70px;
      border-radius: 14px;
      background: linear-gradient(135deg, var(--accent), var(--accent-3));
      box-shadow: 0 10px 30px rgba(255, 60, 172, 0.4);
    }

    .demo-hover {
      transition: all 0.4s cubic-bezier(.22, .9, .3, 1);
      cursor: pointer;
    }

    .demo-hover:hover {
      transform: rotate(45deg) scale(1.15);
      border-radius: 50%;
    }

    .demo-keyframe {
      animation: floatDemo 3s ease-in-out infinite;
    }

    @keyframes floatDemo {

      0%,
      100% {
        transform: translateY(0) rotate(0deg);
      }

      50% {
        transform: translateY(-20px) rotate(180deg);
        border-radius: 50%;
      }
    }

    .demo-row {
      display: flex;
      gap: 2rem;
      align-items: center;
      flex-wrap: wrap;
      margin-top: 1rem;
    }

    .demo-row figcaption {
      font-size: 0.85rem;
      color: var(--muted);
      margin-top: 0.5rem;
    }

    .demo-row figure {
      text-align: center;
    }

    .pill {
      display: inline-block;
      padding: 0.3rem 0.8rem;
      background: rgba(43, 134, 197, 0.15);
      border: 1px solid rgba(43, 134, 197, 0.4);
      color: #88ccff;
      border-radius: 999px;
      font-size: 0.85rem;
      font-family: 'JetBrains Mono', monospace;
      margin: 0.2rem;
    }

    .pill.pink {
      background: rgba(255, 60, 172, 0.12);
      border-color: rgba(255, 60, 172, 0.4);
      color: #ffb3e0;
    }

    a {
      color: var(--accent-3);
      text-decoration: none;
      border-bottom: 1px dashed currentColor;
    }

    a:hover {
      color: var(--accent);
    }

    .lead {
      font-size: clamp(1.1rem, 1.5vw, 1.3rem);
      margin-bottom: 1.5rem;
      color: var(--text);
    }

    /* Thank you slide */
    .thanks {
      text-align: center;
    }

    .thanks h1 {
      font-size: clamp(3.5rem, 10vw, 8rem);
    }

    /* Menu button + drawer */
    .menu-btn {
      position: fixed;
      top: 1.2rem;
      left: 1.2rem;
      width: 48px;
      height: 48px;
      border-radius: 14px;
      background: rgba(10, 10, 26, 0.6);
      backdrop-filter: blur(20px);
      border: 1px solid var(--glass-border);
      color: var(--text);
      cursor: pointer;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 5px;
      z-index: 200;
      transition: background 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
    }

    .menu-btn:hover {
      background: var(--accent);
      border-color: var(--accent);
      transform: scale(1.05);
    }

    .menu-btn span {
      display: block;
      width: 20px;
      height: 2px;
      background: currentColor;
      border-radius: 2px;
      transition: transform 0.3s ease, opacity 0.3s ease;
    }

    .menu-btn.open span:nth-child(1) {
      transform: translateY(7px) rotate(45deg);
    }

    .menu-btn.open span:nth-child(2) {
      opacity: 0;
    }

    .menu-btn.open span:nth-child(3) {
      transform: translateY(-7px) rotate(-45deg);
    }

    .drawer {
      position: fixed;
      top: 0;
      left: 0;
      width: min(340px, 85vw);
      height: 100vh;
      background: rgba(10, 10, 26, 0.85);
      backdrop-filter: blur(28px) saturate(1.4);
      -webkit-backdrop-filter: blur(28px) saturate(1.4);
      border-right: 1px solid var(--glass-border);
      box-shadow: 20px 0 60px -10px rgba(0, 0, 0, 0.6);
      transform: translateX(-100%);
      transition: transform 0.45s cubic-bezier(.22, .9, .3, 1);
      z-index: 150;
      padding: 5rem 1rem 2rem;
      overflow-y: auto;
    }

    .drawer.open {
      transform: translateX(0);
    }

    .drawer h3 {
      color: var(--accent);
      font-size: 0.75rem;
      letter-spacing: 0.25em;
      text-transform: uppercase;
      padding: 0 1rem;
      margin-bottom: 1rem;
    }

    .drawer ol {
      list-style: none;
      counter-reset: dr;
    }

    .drawer li {
      counter-increment: dr;
      padding: 0.75rem 1rem;
      border-radius: 12px;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 0.9rem;
      color: var(--muted);
      font-size: 0.95rem;
      transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
      border: 1px solid transparent;
    }

    .drawer li::before {
      content: counter(dr, decimal-leading-zero);
      font-family: 'JetBrains Mono', monospace;
      font-size: 0.78rem;
      color: var(--accent);
      min-width: 26px;
    }

    .drawer li:hover {
      background: rgba(255, 255, 255, 0.06);
      color: var(--text);
      border-color: var(--glass-border);
      transform: translateX(4px);
    }

    .drawer li.current {
      background: linear-gradient(135deg, rgba(255, 60, 172, 0.18), rgba(43, 134, 197, 0.12));
      color: var(--text);
      border-color: rgba(255, 60, 172, 0.4);
    }

    .backdrop {
      position: fixed;
      inset: 0;
      background: rgba(0, 0, 0, 0.4);
      backdrop-filter: blur(2px);
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.3s ease;
      z-index: 140;
    }

    .backdrop.show {
      opacity: 1;
      pointer-events: auto;
    }

    @media (prefers-reduced-motion: reduce) {
      body::before {
        animation: none;
      }

      .title-slide h1,
      .demo-keyframe {
        animation: none;
      }

      .slide {
        transition: opacity 0.3s ease;
        transform: none !important;
        filter: none !important;
      }

      .drawer {
        transition: none;
      }
    }

    .beispiel {
        margin-top: 20px;
        display: inline-block;
    }