:root {
  color-scheme: dark;
  --bg: #101114;
  --surface: #17191e;
  --surface-2: #20232a;
  --paper: #f2efe6;
  --ink: #16181d;
  --text: #f3f3ef;
  --muted: #a4a8b2;
  --line: rgba(255, 255, 255, 0.13);
  --accent: #f2c94c;
  --blue: #6e8eff;
  --violet: #a987ee;
  --green: #58c99a;
  --sans: Inter, "Segoe UI", Helvetica, Arial, sans-serif;
  --mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  --max: 1180px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  overflow-x: hidden;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }

.skip-link {
  position: fixed;
  z-index: 1000;
  top: 10px;
  left: 10px;
  padding: 10px 14px;
  transform: translateY(-180%);
  border-radius: 6px;
  background: var(--paper);
  color: var(--ink);
  font-weight: 750;
}
.skip-link:focus { transform: translateY(0); }

.site-header {
  position: relative;
  z-index: 20;
  display: flex;
  width: min(calc(100% - 48px), var(--max));
  margin: 0 auto;
  padding: 26px 0;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--line);
}
.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--text);
  font-size: 16px;
  font-weight: 850;
  letter-spacing: -0.03em;
  text-decoration: none;
}
.pilot-label, .pilot-note-label {
  padding: 5px 8px;
  border: 1px solid #a97816;
  border-radius: 999px;
  background: #5b4009;
  color: #ffe7a1;
  font: 700 9px/1 var(--mono);
  letter-spacing: 0.09em;
  text-transform: uppercase;
}
.header-cta {
  padding-bottom: 4px;
  border-bottom: 1px solid rgba(255,255,255,.45);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
}
.header-cta span { margin-left: 5px; }
.header-actions { display:flex; align-items:center; gap:20px; }
.header-leader { color:#aeb3bd; border-bottom-color:rgba(255,255,255,.18); }

.hero {
  display: grid;
  min-height: 720px;
  width: min(calc(100% - 48px), var(--max));
  margin: 0 auto;
  grid-template-columns: 1.05fr .95fr;
  align-items: center;
  gap: clamp(45px, 7vw, 100px);
  padding: 72px 0 88px;
}
.eyebrow, .section-index {
  margin: 0 0 28px;
  color: var(--accent);
  font: 750 11px/1.2 var(--mono);
  letter-spacing: .13em;
  text-transform: uppercase;
}
.hero h1 {
  max-width: 720px;
  margin: 0;
  font-size: clamp(40px, 3.5vw, 50px);
  font-weight: 780;
  letter-spacing: -.065em;
  line-height: .98;
}
.hero h1 span { color: #959aa5; white-space: nowrap; }
.free-label {
  display: inline-flex;
  margin-left: 12px;
  padding: 5px 9px 4px;
  align-items: center;
  border: 1px solid rgba(255, 207, 75, .45);
  border-radius: 999px;
  background: rgba(255, 207, 75, .1);
  color: var(--accent);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .09em;
  line-height: 1;
  vertical-align: middle;
}
.hero-lead {
  max-width: 650px;
  margin: 31px 0 0;
  color: #c4c7ce;
  font-size: clamp(18px, 1.6vw, 22px);
  line-height: 1.55;
}
.hero-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 28px;
  margin-top: 37px;
}
.hero-game-actions { display:flex; gap:10px; }
.button {
  display: inline-flex;
  min-height: 52px;
  padding: 0 22px;
  align-items: center;
  justify-content: center;
  gap: 24px;
  border: 1px solid transparent;
  border-radius: 4px;
  font-size: 14px;
  font-family: inherit;
  font-weight: 800;
  text-decoration: none;
  cursor: pointer;
  transition: transform .18s ease, background .18s ease;
}
.button:hover { transform: translateY(-2px); }
.button-primary { background: var(--accent); color: #17150e; }
.button-primary:hover { background: #ffda65; }
.button-secondary { border-color:rgba(255,255,255,.32); color:#f4f5f7; background:rgba(255,255,255,.04); }
.button-secondary:hover { background:rgba(255,255,255,.1); }
.text-link {
  color: #d3d5da;
  font-size: 14px;
  font-weight: 650;
  text-underline-offset: 5px;
}
.contact-picker { position: relative; }
.contact-picker .contact-toggle { padding:0; border:0; background:transparent; cursor:pointer; }
.contact-bubbles[hidden] { display: none; }
.contact-bubbles {
  position: absolute;
  z-index: 30;
  top: calc(100% + 14px);
  left: 0;
  display: grid;
  width: 286px;
  padding: 15px;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 18px;
  background: rgba(24, 26, 31, .96);
  box-shadow: 0 22px 55px rgba(0,0,0,.28);
  backdrop-filter: blur(14px);
}
.contact-bubble {
  position: relative;
  display: inline-flex;
  width: 42px;
  height: 42px;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 207, 75, .38);
  border-radius: 50%;
  background: rgba(255, 207, 75, .12);
  color: #ffe7a1;
  font: 800 11px/1 var(--mono);
  letter-spacing: .04em;
  text-decoration: none;
  opacity: 0;
  transform: translateY(12px) scale(.75);
}
.contact-bubbles > .contact-bubble:last-child:nth-child(11) { grid-column: 3; }
.contact-picker.is-open .contact-bubble {
  animation: contactBubbleIn .5s cubic-bezier(.2,.8,.2,1) var(--contact-delay) forwards;
}
.contact-bubble:not(.is-coming-soon):hover,
.contact-bubble:not(.is-coming-soon):focus-visible {
  border-color: var(--accent);
  background: var(--accent);
  color: #17150e;
  transform: translateY(-2px) scale(1.04);
}
.contact-bubble.is-coming-soon {
  border-color: rgba(255,255,255,.13);
  background: rgba(255,255,255,.045);
  color: #777d88;
  cursor: not-allowed;
}
.contact-bubble.is-coming-soon::after {
  position: absolute;
  z-index: 50;
  bottom: calc(100% + 8px);
  left: 50%;
  padding: 6px 8px;
  transform: translate(-50%,5px);
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 5px;
  background: #090b0f;
  color: #d7dae0;
  box-shadow: 0 8px 20px rgba(0,0,0,.3);
  font: 750 7px/1 var(--mono);
  letter-spacing: .08em;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  content: "COMING SOON";
  transition: opacity .16s ease, transform .16s ease;
}
.contact-bubble.is-coming-soon:hover::after,
.contact-bubble.is-coming-soon:focus-visible::after {
  transform: translate(-50%,0);
  opacity: 1;
}
@keyframes contactBubbleIn {
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.facts {
  display: flex;
  margin: 64px 0 0;
  padding: 0;
  list-style: none;
}
.facts li {
  display: flex;
  min-width: 125px;
  padding: 0 22px;
  flex-direction: column;
  border-left: 1px solid var(--line);
}
.facts li:first-child { padding-left: 0; border-left: 0; }
.facts strong { font-size: 17px; }
.facts span { max-width: 135px; margin-top: 5px; color: var(--muted); font-size: 11px; line-height: 1.35; }

.hero-visual {
  position: relative;
  min-height: 550px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 3px;
  background: linear-gradient(145deg, #1d2027, #14161a);
}
.hero-visual::after {
  position: absolute;
  width: 260px;
  height: 260px;
  right: -80px;
  bottom: -90px;
  border-radius: 50%;
  background: rgba(242, 201, 76, .09);
  box-shadow: 0 0 100px rgba(242, 201, 76, .12);
  content: "";
}
.visual-grid {
  position: absolute;
  inset: 0;
  opacity: .32;
  background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: linear-gradient(to bottom, black, transparent 90%);
}
.model-path {
  position: relative;
  z-index: 2;
  display: flex;
  padding: 60px clamp(30px, 5vw, 72px) 25px;
  flex-direction: column;
}
.path-card {
  display: grid;
  width: min(100%, 310px);
  min-height: 112px;
  padding: 22px;
  grid-template-columns: 32px 52px 1fr;
  align-items: center;
  gap: 12px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 3px;
  background: rgba(30,33,40,.93);
  box-shadow: 0 18px 40px rgba(0,0,0,.25);
}
.path-card-2 { align-self: flex-end; }
.path-number { align-self: start; color: #777d89; font: 700 9px/1 var(--mono); }
.path-icon {
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  border: 1px solid rgba(110,142,255,.6);
  border-radius: 50%;
  color: #9ab0ff;
  font: 700 16px/1 var(--mono);
}
.path-card-2 .path-icon { border-color: rgba(169,135,238,.6); color: #c2a5ff; }
.path-card-3 .path-icon { border-color: rgba(88,201,154,.6); color: #78ddb4; }
.path-card strong, .path-card small { display: block; }
.path-card strong { font-size: 16px; }
.path-card small { margin-top: 5px; color: var(--muted); font-size: 11px; }
.path-connector {
  width: 1px;
  height: 34px;
  margin-left: 80px;
  background: linear-gradient(var(--line), rgba(255,255,255,.35));
}
.path-card-2 + .path-connector { margin-right: 80px; margin-left: auto; }
.visual-caption {
  position: absolute;
  z-index: 2;
  right: 25px;
  bottom: 20px;
  margin: 0;
  color: var(--muted);
  font: 650 10px/1 var(--mono);
  letter-spacing: .06em;
  text-transform: uppercase;
}
.visual-caption span { display: inline-block; width: 7px; height: 7px; margin-right: 8px; border-radius: 50%; background: var(--green); }

.section {
  width: min(calc(100% - 48px), var(--max));
  margin: 0 auto;
  padding: 120px 0;
  border-top: 1px solid var(--line);
}
.section-index { margin-bottom: 50px; color: #717681; }
.section-index.light { color: #aeb2ba; }
.section-heading {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(280px, .75fr);
  gap: clamp(50px, 8vw, 120px);
  align-items: start;
}
.section-heading.compact { margin-bottom: 70px; }
.section h2, .final-cta h2 {
  margin: 0;
  font-size: clamp(38px, 4.4vw, 62px);
  font-weight: 750;
  letter-spacing: -.05em;
  line-height: 1.06;
}
.section-heading > p {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 17px;
  line-height: 1.7;
}
.format-grid {
  display: grid;
  margin-top: 85px;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.format-grid article { min-height: 250px; padding: 36px 40px 36px 0; }
.format-grid article + article { padding-left: 40px; border-left: 1px solid var(--line); }
.format-icon { color: var(--accent); font: 500 30px/1 var(--mono); }
.format-grid h3 { margin: 55px 0 12px; font-size: 19px; }
.format-grid p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.65; }

/* Mehrspieler-Raum: Geräte, Zettelrotation und gemeinsamer Screen -------- */
.multiplayer-flow {
  position: relative;
  min-height: 800px;
  margin-top: 85px;
  padding: 34px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 5px;
  background:
    radial-gradient(circle at 50% 0,rgba(95,125,220,.18),transparent 42%),
    linear-gradient(150deg,#161923,#0d0f14 68%);
  box-shadow: 0 30px 75px rgba(0,0,0,.2);
  color: #e7e9ee;
}
.multiplayer-flow::before { position: absolute; inset: 0; opacity: .18; background-image: linear-gradient(rgba(126,148,220,.1) 1px,transparent 1px),linear-gradient(90deg,rgba(126,148,220,.1) 1px,transparent 1px); background-size: 46px 46px; mask-image: linear-gradient(black,transparent 68%); content: ""; }
.room-screen { position: relative; z-index: 3; width: min(900px,92%); margin: 0 auto; padding: 0 20px 16px; border: 1px solid #303545; border-radius: 7px; background: #101218; box-shadow: 0 28px 80px rgba(0,0,0,.5), 0 0 0 6px rgba(255,255,255,.025); }
.room-screen > header { display: flex; height: 34px; margin: 0 -20px 14px; padding: 0 14px; align-items: center; border-bottom: 1px solid #292e3c; color: #8991a1; font: 700 7px/1 var(--mono); letter-spacing: .1em; }
.room-screen > header b { display: flex; margin-left: auto; align-items: center; gap: 6px; color: #aab0bc; font-weight: 650; }
.room-screen > header i { width: 6px; height: 6px; border-radius: 50%; background: #55d19f; box-shadow: 0 0 8px #55d19f; }
.room-screen-title { display: flex; margin-bottom: 12px; padding: 10px 13px; align-items: flex-end; border: 1px solid #292e3c; border-radius: 6px; background: linear-gradient(120deg,#1a2137,#151821); }
.room-screen-title small, .room-screen-title strong { display: block; }
.room-screen-title small { margin-bottom: 5px; color: #7e9df8; font: 700 7px/1 var(--mono); letter-spacing: .12em; }
.room-screen-title strong { font-size: 16px; }
.room-screen-title > span { margin-left: auto; color: #9299a7; font: 650 8px/1 var(--mono); }
.room-progress-row { display: grid; min-height: 55px; margin-top: 7px; padding: 7px 10px; grid-template-columns: 40px 150px 1fr 34px; gap: 9px; align-items: center; border: 1px solid #292e3c; border-radius: 6px; background: #171a22; }
.room-progress-row img { width: 36px; height: 36px; border-radius: 6px; object-fit: cover; }
.room-progress-row p, .room-progress-row b, .room-progress-row small { display: block; min-width: 0; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.room-progress-row b { font-size: 9px; }
.room-progress-row small { margin-top: 3px; color: #858c9a; font-size: 7px; }
.room-progress-row > div { display: flex; align-items: center; }
.room-progress-row > div span { display: grid; width: 20px; height: 20px; flex: 0 0 20px; place-items: center; border: 2px solid #353a48; border-radius: 50%; background: #101218; color: transparent; font: 750 6px/1 var(--mono); }
.room-progress-row > div span.done { border-color: color-mix(in srgb,var(--row) 74%,white); background: var(--row); color: white; }
.room-progress-row > div span.live { border-color: #d9a557; box-shadow: 0 0 0 4px rgba(217,165,87,.13); animation: roomLiveNode 1.8s ease-in-out infinite; }
.room-progress-row > div i { height: 2px; flex: 1; background: #2b303d; }
.room-progress-row > div i.done { background: var(--row); }
.room-progress-row > em { color: #9299a7; font: 650 8px/1 var(--mono); font-style: normal; text-align: right; }
@keyframes roomLiveNode { 50% { box-shadow: 0 0 0 7px rgba(217,165,87,.05); } }

.rotation-stage { position: relative; z-index: 2; height: 465px; margin-top: 25px; }
.rotation-arrows { position: absolute; inset: 30px 0 0; width: 100%; height: 260px; overflow: visible; }
.rotation-arrows > path { fill: none; stroke: rgba(242,201,76,.48); stroke-width: 1.5; stroke-dasharray: 7 7; marker-end: url(#rotation-tip); animation: rotationDash 8s linear infinite; }
.rotation-arrows marker path { fill: #d4ae3d; stroke: none; }
@keyframes rotationDash { to { stroke-dashoffset: -112; } }
.rotation-label { position: absolute; z-index: 2; top: 143px; left: 50%; padding: 8px 12px; transform: translate(-50%,-50%); border: 1px solid #4b4631; border-radius: 999px; background: #171811; color: #e2c66f; font: 750 7px/1 var(--mono); letter-spacing: .1em; white-space: nowrap; }
.player-station { position: absolute; top: 38px; width: 29%; min-height: 280px; padding: 10px; border: 1px solid #343947; border-radius: 8px; background: #181b23; box-shadow: 0 18px 38px rgba(0,0,0,.25); }
.station-one { left: 1%; transform: rotate(-1.2deg); }
.station-two { left: 35.5%; top: 75px; }
.station-three { right: 1%; transform: rotate(1.2deg); }
.player-station > header { display: grid; padding: 3px 2px 10px; grid-template-columns: 30px 1fr 7px; gap: 8px; align-items: center; }
.player-station > header > span { display: grid; width: 28px; height: 28px; place-items: center; border-radius: 50%; background: #303649; color: #dfe4f0; font: 750 7px/1 var(--mono); }
.player-station header p, .player-station header b, .player-station header small { display: block; margin: 0; }
.player-station header b { font-size: 9px; }
.player-station header small { margin-top: 3px; color: #808896; font-size: 7px; }
.player-station header i { width: 6px; height: 6px; border-radius: 50%; background: #55d19f; box-shadow: 0 0 7px #55d19f; }
.paper-cycle { position: relative; min-height: 204px; perspective: 700px; }
.player-paper { position: relative; min-height: 204px; padding: 0 0 8px; color: #29251f; transform-origin: 85% 80%; }
.paper-chain { display: flex; flex-direction: column; align-items: stretch; }
.demo-paper-piece { position: relative; box-sizing: border-box; width: 100%; min-height: 74px; padding: 17px 15px 15px; border: 1px solid rgba(75,65,49,.16); border-radius: 2px; background-color: #f3efe3; background-image: repeating-linear-gradient(0deg,rgba(93,116,138,.055) 0 1px,transparent 1px 18px),radial-gradient(circle at 25% 18%,rgba(255,255,255,.42),transparent 42%); box-shadow: 0 9px 18px rgba(0,0,0,.22),0 2px 5px rgba(0,0,0,.15); transform: rotate(-.08deg); animation: landingPaperPieceIn .78s cubic-bezier(.22,.7,.28,1) both; }
.demo-paper-attached { z-index: calc(var(--piece-index,0) + 2); width: auto; min-height: 60px; margin: -1px 6px 0 8px; padding: 17px 14px 14px; background-color: #f6f0de; background-image: repeating-linear-gradient(0deg,rgba(93,116,138,.055) 0 1px,transparent 1px 18px),radial-gradient(circle at 78% 24%,rgba(255,255,255,.35),transparent 38%); border-color: rgba(75,65,49,.14); transform: rotate(-.12deg); animation-delay: calc(var(--piece-index,0) * 220ms); }
.demo-paper-attached:nth-child(even) { transform: rotate(.14deg); }
.demo-paper-attached:nth-child(3n) { margin-inline: 10px 4px; background-color: #f1ebd8; transform: rotate(-.2deg); }
.demo-paper-attached::before { position: absolute; z-index: 2; top: -8px; left: 50%; width: 52px; height: 15px; transform: translateX(-50%) rotate(-1.4deg); border-right: 1px dashed rgba(91,72,35,.28); border-left: 1px dashed rgba(91,72,35,.28); background: repeating-linear-gradient(90deg,rgba(92,72,31,.06) 0 2px,transparent 2px 7px),rgba(220,202,150,.76); box-shadow: 0 2px 3px rgba(55,38,21,.12); content: ""; }
.demo-paper-piece small,.demo-paper-piece b { display: block; color: #746c5e; font: 650 6px/1 var(--mono); letter-spacing: .06em; }
.demo-paper-piece .demo-paper-case { margin-bottom: 10px; color: #4f6380; font-weight: 800; }
.demo-paper-piece p { min-height: 25px; margin: 7px 0 0; font: 500 8px/1.4 var(--mono); }
.demo-paper-current p { min-height: 31px; }
.demo-paper-piece p i { display: inline-block; width: 1px; height: 1em; margin-left: 2px; transform: translateY(2px); background: #28231d; animation: landingCursor .9s steps(1,end) infinite; }
.player-paper.is-ready .demo-paper-current p i,.player-paper.is-submitting .demo-paper-current p i { display: none; }
.player-paper.is-entering { animation: landingPaperEnter .9s cubic-bezier(.22,.7,.28,1) both; }
.player-paper.is-submitting { animation: landingPaperSubmit 1.15s cubic-bezier(.45,.04,.7,.3) both; }
@keyframes landingPaperEnter { from { opacity:0; transform:translateX(-18px) rotate(-1deg); } }
@keyframes landingPaperSubmit { 0% { opacity:1; } 42% { transform:translateX(8px) rotate(.6deg); } 100% { opacity:0; transform:translateX(112%) rotate(3deg); } }
@keyframes landingPaperPieceIn { from { opacity:0; translate:0 -8px; } }
.flow-legend { position: absolute; z-index: 4; right: 0; bottom: 0; left: 0; display: flex; min-height: 54px; padding: 0 24px; align-items: center; justify-content: center; gap: 35px; border-top: 1px solid #292e3c; background: rgba(11,13,18,.8); color: #9299a7; font: 650 8px/1 var(--mono); }
.flow-legend span { display: flex; align-items: center; gap: 7px; }
.flow-legend i { width: 7px; height: 7px; border-radius: 50%; }
.flow-legend .writing { background: #55d19f; }
.flow-legend .rotate { background: #e2c66f; }
.flow-legend .screen { background: #7898f2; }

.round-list { display: grid; gap: 22px; }
.round-card {
  display: grid;
  min-height: 350px;
  padding: 26px;
  grid-template-columns: 90px minmax(300px, 1fr) minmax(300px, .9fr);
  gap: 32px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 3px;
  background: var(--surface);
}
.round-meta { align-self: stretch; display: flex; flex-direction: column; justify-content: space-between; color: #828791; font: 750 10px/1 var(--mono); letter-spacing: .1em; writing-mode: vertical-rl; transform: rotate(180deg); }
.round-dot { width: 8px; height: 8px; border-radius: 50%; }
.round-dot.blue { background: var(--blue); }
.round-dot.violet { background: var(--violet); }
.round-dot.green { background: var(--green); }
.round-demo {
  display: flex;
  min-height: 260px;
  padding: 32px;
  justify-content: center;
  flex-direction: column;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 2px;
  background: #111318;
}
.text-demo { font: 500 17px/1.8 var(--mono); }
.text-demo mark { display: inline; padding: 3px 2px; background: #ead577; color: #282313; }
.chat-demo { gap: 16px; }
.bubble { width: fit-content; max-width: 83%; padding: 12px 15px; border-radius: 13px; font-size: 12px; line-height: 1.5; }
.bubble-left { background: #292c35; }
.bubble-right { align-self: flex-end; background: #7258aa; }
.typing { display: flex; width: fit-content; gap: 4px; padding: 13px 16px; border-radius: 13px; background: #292c35; }
.typing i { width: 5px; height: 5px; border-radius: 50%; background: #8c919d; }
.agent-demo { gap: 9px; }
.tool-row { display: grid; padding: 13px; grid-template-columns: 28px 1fr 20px; align-items: center; border: 1px solid rgba(255,255,255,.08); color: #8d929d; font-size: 11px; }
.tool-row span { font: 700 9px/1 var(--mono); }
.tool-row b { color: #c2c5cc; font-weight: 650; }
.tool-row em { color: var(--green); font-style: normal; text-align: right; }
.tool-row.active { border-color: rgba(88,201,154,.5); background: rgba(88,201,154,.07); }
.round-copy { padding: 20px; }
.round-copy h3 { margin: 0 0 19px; font-size: 32px; letter-spacing: -.04em; }
.round-copy p { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.7; }
.round-copy strong { display: block; margin-top: 34px; color: #dadddf; font-size: 12px; line-height: 1.5; }

/* Die drei zentralen Rundenvisualisierungen ----------------------------- */
.hero-welcome-preview::after { display: none; }
.hero-welcome-preview .welcome-preview-stage { inset: 38px 0 0; }
.round-paper-demo { padding: 20px 30px; overflow: hidden; background: radial-gradient(circle at 20% 5%,rgba(255,220,160,.14),transparent 35%),linear-gradient(120deg,#704427,#442819); }
.round-paper-chain { width: 88%; margin: auto; color: #29251f; font-family: var(--mono); }
.round-paper-chain article { position: relative; min-height: 72px; padding: 17px 20px; border: 1px solid rgba(70,60,45,.2); background: #f3efe3; box-shadow: 0 9px 18px rgba(25,12,5,.24); }
.round-paper-chain article + article { margin: -1px 8px 0 12px; background: #f7f0dc; transform: rotate(.25deg); }
.round-paper-chain article:nth-child(3) { margin-inline: 13px 6px; background: #fff6cd; transform: rotate(-.2deg); }
.round-paper-chain article > i { position: absolute; top: -7px; left: 50%; width: 55px; height: 14px; transform: translateX(-50%); background: rgba(231,202,132,.76); }
.round-paper-chain small { color: #786f61; font: 700 7px/1 var(--mono); letter-spacing: .08em; }
.round-paper-chain p { margin: 10px 0 0; font: 500 10px/1.5 var(--mono); }
.round-paper-chain .is-writing p span { display: inline-block; width: 1px; height: 1em; margin-left: 2px; transform: translateY(2px); background: #29251f; animation: landingCursor .9s steps(1,end) infinite; }

.round-progress-demo { display: block; padding: 17px; background: #0f1117; color: #e7e9ee; }
.mini-dashboard-head { padding: 9px 11px 11px; border-bottom: 1px solid #2a2e3d; }
.mini-dashboard-head span, .mini-dashboard-head b { display: block; }
.mini-dashboard-head span { margin-bottom: 5px; color: #8ea8f6; font: 700 7px/1 var(--mono); letter-spacing: .1em; }
.mini-dashboard-head b { font-size: 13px; }
.mini-case { display: grid; min-height: 55px; margin-top: 7px; padding: 7px; grid-template-columns: 36px 95px 1fr; gap: 7px; align-items: center; border: 1px solid #292e3d; border-radius: 6px; background: #171a22; }
.mini-case img { width: 34px; height: 34px; border-radius: 5px; object-fit: cover; }
.mini-case p, .mini-case p b, .mini-case p small { display: block; min-width: 0; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mini-case p b { font-size: 8px; }
.mini-case p small { margin-top: 3px; color: #858c9a; font-size: 6px; }
.mini-case > div { display: flex; align-items: center; }
.mini-case > div span { display: block; width: 18px; height: 18px; flex: 0 0 18px; border: 2px solid color-mix(in srgb,var(--case) 70%,white); border-radius: 50%; background: var(--case); color: white; font: 700 5px/14px var(--mono); text-align: center; }
.mini-case > div span:last-child { border-color: #363b48; background: #0f1117; color: transparent; }
.mini-case > div span.live { border-color: #d9a557; background: #0f1117; box-shadow: 0 0 0 3px rgba(217,165,87,.12); }
.mini-case > div i { height: 2px; flex: 1; background: var(--case); }
.mini-case > div i:last-of-type { background: #2a2e3d; }

/* Originalgetreue Kapitelfolien aus dem Präsentationsscreen ------------- */
.landing-chapter {
  --chapter-accent:#78a9ff;
  position: relative;
  min-height: 320px;
  padding: 0;
  isolation: isolate;
  overflow: hidden;
  background: #0b1020;
  color: #f7f8ff;
  font-family: var(--mono);
}
.landing-chapter::after { position: absolute; z-index: 8; right: 7%; bottom: 7%; left: 7%; height: 4px; transform-origin: left; background: var(--chapter-accent); animation: landingChapterRule 1.1s cubic-bezier(.16,.85,.22,1) .25s both; content: ""; }
.chapter-visual { position: absolute; z-index: 1; inset: 0; pointer-events: none; }
.landing-chapter-copy { position: absolute; z-index: 5; top: 50%; left: 8%; width: 84%; transform: translateY(-48%); }
.landing-chapter-index { display: flex; margin-bottom: 22px; align-items: center; gap: 8px; color: var(--chapter-accent); font: 700 7px/1 var(--mono); letter-spacing: .2em; }
.landing-chapter-index b { display: grid; width: 28px; aspect-ratio: 1; place-items: center; border: 1px solid currentColor; border-radius: 50%; font-size: 6px; }
.landing-chapter-copy > strong { position: relative; display: block; font: 850 clamp(46px,6vw,82px)/.82 var(--sans); letter-spacing: -.075em; animation: landingChapterTitle .86s cubic-bezier(.12,.84,.22,1) both; }
.landing-chapter-year { display: flex; margin-top: 27px; align-items: baseline; gap: 9px; color: #d9dfeb; font: 700 7px/1 var(--mono); letter-spacing: .16em; }
.landing-chapter-year b { font-size: 18px; letter-spacing: -.03em; }
.landing-chapter-number { position: absolute; z-index: 0; top: -12%; right: 1%; color: rgba(255,255,255,.045); font: 900 200px/1 var(--sans); letter-spacing: -.12em; }

.chapter-llm { --chapter-accent:#7de7ff; background: radial-gradient(circle at 73% 48%,rgba(73,87,255,.3),transparent 32%),radial-gradient(circle at 18% 18%,rgba(0,223,255,.12),transparent 28%),#080c1c; }
.chapter-llm::before { position: absolute; z-index: -1; inset: 0; opacity: .42; background-image: linear-gradient(rgba(125,231,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(125,231,255,.035) 1px,transparent 1px); background-size: 25px 25px; content: ""; }
.landing-llm-core { position: absolute; top: 16%; right: 5%; width: 54%; aspect-ratio: 1; border-radius: 44% 56% 61% 39%/53% 38% 62% 47%; background: radial-gradient(circle at 36% 32%,rgba(255,255,255,.2),transparent 16%),radial-gradient(circle at 55% 56%,#5966ff 0,#253094 42%,rgba(15,21,61,.2) 68%,transparent 70%); box-shadow: 0 0 65px rgba(82,105,255,.4),inset 0 0 50px rgba(125,231,255,.18); animation: landingLlmBlob 7s ease-in-out infinite alternate; }
.landing-llm-core::before,.landing-llm-core::after { position: absolute; inset: 8%; border: 1px solid rgba(125,231,255,.3); border-radius: 50%; animation: landingLlmSpin 13s linear infinite; content: ""; }
.landing-llm-core::after { inset: 20%; border-style: dashed; animation-direction: reverse; animation-duration: 9s; }
.landing-token { position: absolute; z-index: 2; display: grid; min-width: 27px; height: 27px; padding: 0 6px; place-items: center; border: 1px solid rgba(125,231,255,.55); border-radius: 50%; background: rgba(7,12,31,.76); color: #baf4ff; box-shadow: 0 0 15px rgba(125,231,255,.2); font: 700 7px/1 var(--mono); animation: landingTokenFloat var(--d,4s) ease-in-out var(--delay,0s) infinite alternate; }
.landing-token:nth-of-type(1) { top: 12%; left: 61%; --d:3.7s; }
.landing-token:nth-of-type(2) { top: 24%; left: 84%; --d:5.1s; --delay:-1s; }
.landing-token:nth-of-type(3) { top: 68%; left: 71%; --d:4.4s; --delay:-2.2s; }
.landing-token:nth-of-type(4) { top: 76%; left: 87%; --d:3.5s; --delay:-.7s; }
.landing-token:nth-of-type(5) { top: 85%; left: 53%; --d:5.3s; --delay:-2.8s; }

.chapter-chatbots { --chapter-accent:#ff4f9a; background: #f1ecdf; color: #171523; }
.chapter-chatbots::before { position: absolute; z-index: -1; inset: 0; background: linear-gradient(118deg,transparent 0 54%,rgba(255,79,154,.12) 54% 72%,transparent 72%),radial-gradient(circle at 85% 10%,#f8b7d4 0 7%,transparent 7.2%); content: ""; }
.chapter-chatbots::after { height: 6px; background: linear-gradient(90deg,#ff4f9a 0 58%,#171523 58% 72%,#70d7d0 72%); }
.chapter-chatbots .landing-chapter-copy > strong { color: #171523; font-size: clamp(38px,4.8vw,69px); }
.chapter-chatbots .landing-chapter-year { color: #4a4353; }
.chapter-chatbots .landing-chapter-number { color: rgba(23,21,35,.045); }
.landing-chat-field > i { position: absolute; left: 68%; width: 25%; height: 65px; border: 2px solid #171523; border-radius: 17px 17px 4px 17px; background: #fffdf7; box-shadow: 5px 6px 0 #171523; transform: rotate(5deg); animation: landingChatDrift 4.7s ease-in-out infinite alternate; }
.landing-chat-field > i::before,.landing-chat-field > i::after { position: absolute; top: 17px; right: 17px; left: 12px; height: 4px; border-radius: 5px; background: #e5dce4; content: ""; }
.landing-chat-field > i::after { top: 31px; right: 42%; background: #ff4f9a; }
.landing-chat-field > i:nth-child(1) { top: 7%; }
.landing-chat-field > i:nth-child(2) { top: 37%; left: 75%; background: #ffd8e8; transform: rotate(-4deg); animation-duration: 5.4s; }
.landing-chat-field > i:nth-child(3) { top: 68%; left: 59%; background: #bff2ec; transform: rotate(3deg); animation-duration: 4.2s; }
.landing-chat-field > i:nth-child(4) { top: 62%; left: 91%; transform: rotate(-8deg); animation-duration: 5.8s; }
.landing-chat-field > div { position: absolute; right: 6%; bottom: 8%; width: 38%; height: 40px; border: 2px solid #171523; border-radius: 24px; background: #fffdf7; box-shadow: 5px 6px 0 #171523; }
.landing-chat-field > div::after { position: absolute; top: 5px; right: 5px; display: grid; width: 27px; height: 27px; place-items: center; border-radius: 50%; background: #171523; color: white; font-size: 13px; content: "↗"; }

.chapter-agents { --chapter-accent:#b8ff45; min-height: 380px; background: #070b09; color: #efffe3; }
.chapter-agents::before { position: absolute; z-index: -1; inset: 0; opacity: .62; background-image: linear-gradient(rgba(184,255,69,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(184,255,69,.055) 1px,transparent 1px); background-size: 31px 31px; animation: landingAgentGrid 7s linear infinite; content: ""; }
.chapter-agents::after { box-shadow: 0 0 22px rgba(184,255,69,.42); }
.chapter-agents .landing-chapter-copy > strong { color: #efffe3; font-size: clamp(72px,11vw,132px); text-shadow: 6px 6px 0 #204526; }
.chapter-agents .landing-chapter-copy > strong::before { position: absolute; z-index: -1; inset: 0; color: #63ffd0; opacity: .55; content: attr(data-text); animation: landingAgentGlitch 3.2s steps(1,end) infinite; }
.chapter-agents .landing-chapter-number { font-size: 300px; }
.landing-agent-network { top: 11%; right: 4%; bottom: auto; left: auto; width: 44%; height: 76%; }
.landing-agent-network::before { position: absolute; top: 50%; right: 12%; left: 18%; height: 2px; background: linear-gradient(90deg,#b8ff45 0 48%,transparent 48% 54%,#63ffd0 54%); box-shadow: 0 -95px 0 rgba(184,255,69,.25),0 95px 0 rgba(99,255,208,.25); content: ""; }
.landing-agent-network > i { position: absolute; display: grid; width: 72px; aspect-ratio: 1; place-items: center; border: 2px solid #b8ff45; background: #0c1710; color: #dfffaa; box-shadow: 5px 5px 0 #24462b,0 0 20px rgba(184,255,69,.12); font: 800 7px/1 var(--mono); letter-spacing: .08em; animation: landingAgentPulse 2.7s ease-in-out infinite; }
.landing-agent-network > i:nth-child(1) { top: 35%; left: 2%; }
.landing-agent-network > i:nth-child(2) { top: 9%; left: 37%; animation-delay: .2s; }
.landing-agent-network > i:nth-child(3) { top: 36%; left: 68%; animation-delay: .4s; }
.landing-agent-network > i:nth-child(4) { top: 65%; left: 37%; animation-delay: .6s; }
.landing-agent-network > b { position: absolute; top: 49%; left: 12%; width: 9px; height: 9px; transform: rotate(45deg); background: white; box-shadow: 0 0 14px #b8ff45; animation: landingAgentPacket 3.1s linear infinite; }
.landing-agent-network > b:last-child { animation-delay: -1.55s; }
.round-visual-stack { display: grid; min-width: 0; gap: 14px; }
.agent-examples-grid { display: grid; min-width: 0; grid-template-columns: 1fr; gap: 14px; }
.agent-example-card { width: min(100%,680px); margin: 2px auto 0; padding: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 14px; background: #121419; color: #e7e9ee; box-shadow: 0 12px 30px rgba(0,0,0,.16); }
.agent-example-card figcaption { display: flex; padding: 11px 15px; align-items: center; gap: 11px; border-bottom: 1px solid #282c35; }
.agent-example-card figcaption span { color: var(--green); font: 750 8px/1 var(--mono); letter-spacing: .11em; }
.agent-example-card figcaption b { font-size: 14px; line-height: 1.2; }
.agent-example-scene { display: grid; min-height: 168px; padding: 14px; grid-template-columns: 116px 1fr; gap: 16px; }
.agent-example-person { position: relative; min-height: 140px; overflow: hidden; border-radius: 9px; background: #090b10; }
.agent-example-person::after { position: absolute; inset: 48% 0 0; background: linear-gradient(transparent,rgba(0,0,0,.88)); content: ""; }
.agent-example-person img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 34%; filter: brightness(.92) saturate(.82); }
.agent-example-person.camera-off img { object-position: center; filter: none; }
.agent-example-person em { position: absolute; z-index: 3; top: 8px; right: 8px; padding: 4px 6px; border: 1px solid rgba(255,255,255,.32); border-radius: 4px; background: rgba(9,12,17,.78); color: #f0f2f5; font: 750 6px/1 var(--mono); font-style: normal; letter-spacing: .08em; }
.agent-example-person b,.agent-example-person span { position: absolute; z-index: 2; right: 9px; bottom: 24px; left: 9px; color: white; font-size: 12px; }
.agent-example-person span { bottom: 9px; color: #b7bdc8; font-size: 9px; }
.agent-example-dialogue { display: grid; min-width: 0; align-content: center; gap: 8px; }
.agent-example-dialogue p { width: fit-content; max-width: 88%; margin: 0; padding: 8px 11px; border-radius: 8px; font-size: 12px; line-height: 1.35; }
.agent-example-dialogue p small { display: block; margin-bottom: 4px; opacity: .72; font: 750 7px/1 var(--mono); letter-spacing: .08em; }
.example-elmar { justify-self: end; border: 1px solid #3b404a; background: #252932; color: #f0f2f5; }
.example-agent { border: 1px solid #377cdd; background: #1c69d4; color: white; }
.example-tool-status { display: flex; width: 100%; padding: 9px 11px; align-items: center; gap: 9px; border-top: 1px solid #343944; border-bottom: 1px solid #343944; background: rgba(255,255,255,.025); color: #bfc5cf; font: 700 9px/1.35 var(--mono); }
.example-tool-status i { width: 7px; height: 7px; flex: 0 0 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 10px color-mix(in srgb,var(--green) 70%,transparent); }
.example-tool-status span { min-width: 0; }
.example-tool-status small { display: block; margin-bottom: 4px; color: var(--green); font: 750 6px/1 var(--mono); letter-spacing: .1em; }
.agent-examples-grid .agent-example-card { width: min(100%,820px); }
.agent-examples-grid .agent-example-card figcaption { min-height: 0; align-items: center; flex-direction: row; gap: 11px; }
.agent-examples-grid .agent-example-scene { min-height: 300px; padding: 14px; grid-template-columns: 150px minmax(0,1fr); gap: 16px; }
.agent-examples-grid .agent-example-person { min-height: 272px; }
.agent-examples-grid .agent-example-dialogue p { max-width: 88%; padding: 8px 11px; font-size: 12px; }
@keyframes landingChapterRule { from { transform:scaleX(0); } }
@keyframes landingChapterTitle { from { opacity:0; transform:translateY(120px) skewY(5deg); } }
@keyframes landingLlmBlob { to { border-radius:59% 41% 35% 65%/40% 61% 39% 60%; transform:translate(10px,-7px) rotate(7deg) scale(1.04); } }
@keyframes landingLlmSpin { to { transform:rotate(360deg); } }
@keyframes landingTokenFloat { from { transform:translate(-5px,8px); } to { transform:translate(7px,-9px); } }
@keyframes landingChatDrift { to { translate:0 -9px; } }
@keyframes landingAgentGrid { to { background-position:31px 31px; } }
@keyframes landingAgentPulse { 50% { border-color:white; box-shadow:5px 5px 0 #24462b,0 0 28px rgba(184,255,69,.35); } }
@keyframes landingAgentPacket { 0% { left:12%;top:49%; } 33% { left:50%;top:22%; } 66% { left:79%;top:49%; } 100% { left:50%;top:78%; } }
@keyframes landingAgentGlitch { 0%,92%,100% { transform:none;clip-path:none; } 94% { transform:translate(5px,-2px);clip-path:inset(12% 0 58%); } 97% { transform:translate(-4px,3px);clip-path:inset(62% 0 9%); } }

.round-card-agent { grid-template-columns: 90px 1fr; }
.round-card-agent .round-copy { grid-column: 2; max-width: 760px; padding: 12px 0 20px; }
.elmar-original { min-height: 350px; padding: 0; overflow: hidden; background: #090b10; }
.elmar-desktop { position: absolute; inset: 0; overflow: hidden; background-image: linear-gradient(rgba(5,8,14,.08),rgba(5,8,14,.18)),url('/wallpapers/spacex.jpg'); background-size: cover; background-position: center; color: #e7e9ee; font-family: var(--sans); }
.elmar-menubar { position: absolute; z-index: 8; top: 0; right: 0; left: 0; display: flex; height: 25px; padding: 0 12px; align-items: center; background: rgba(0,0,0,.38); color: #fff; font-size: 7px; backdrop-filter: blur(5px); }
.elmar-menubar span { margin-left: auto; }
.elmar-bg-browser { position: absolute; z-index: 1; top: 72px; bottom: 135px; left: 20px; width: 42%; padding: 42px 17px 15px; overflow: hidden; border: 1px solid #2a2d34; border-radius: 7px; background: #16181d; color: #bfc3cc; box-shadow: 0 20px 45px rgba(0,0,0,.55); transform: rotate(-.7deg); }
.mini-browserbar { position: absolute; top: 0; right: 0; left: 0; display: flex; height: 29px; padding: 0 8px; align-items: center; gap: 4px; background: #23262d; }
.mini-browserbar i { width: 6px; height: 6px; border-radius: 50%; background: #ff5f57; }
.mini-browserbar i:nth-child(2) { background: #febc2e; }
.mini-browserbar i:nth-child(3) { background: #28c840; }
.mini-browserbar span { flex: 1; margin-left: 5px; padding: 5px; overflow: hidden; border: 1px solid #33373f; border-radius: 5px; background: #101216; color: #8f96a2; font-size: 6px; text-overflow: ellipsis; white-space: nowrap; }
.elmar-bg-browser > strong, .elmar-bg-browser > small, .elmar-bg-browser > b { display: block; }
.elmar-bg-browser > strong { color: #f0f1f4; font-size: 14px; }
.elmar-bg-browser > small { margin: 5px 0 14px; color: #858b96; font-size: 8px; }
.elmar-bg-browser > b { margin-bottom: 7px; font-size: 9px; }
.elmar-bg-browser > p { margin: 0; color: #9da3ad; font-size: 7px; line-height: 1.8; }
.elmar-excel { position: absolute; z-index: 2; top: 145px; bottom: 86px; left: 13%; width: 41%; overflow: hidden; border: 1px solid #2f333b; border-radius: 6px; background: #1c1e23; box-shadow: 0 22px 55px rgba(0,0,0,.62); transform: rotate(.5deg); }
.elmar-excel > header { padding: 8px 9px; background: #0f5132; color: #eafff2; font-size: 7px; font-weight: 700; }
.elmar-excel > small { display: block; padding: 6px 9px; border-bottom: 1px solid #33373f; background: #24272d; color: #aeb3bc; font-size: 6px; }
.excel-grid { display: grid; grid-template-columns: 1.4fr 1fr .8fr; }
.excel-grid > * { min-width: 0; padding: 7px 6px; overflow: hidden; border-right: 1px solid #2f333b; border-bottom: 1px solid #2f333b; color: #b9bec7; font-size: 6px; text-overflow: ellipsis; white-space: nowrap; }
.excel-grid > b { background: #283029; color: #eef1f4; }
.elmar-portal { position: absolute; z-index: 4; top: 52px; right: 24px; bottom: 95px; display: flex; width: 64%; overflow: hidden; flex-direction: column; border: 1px solid #2a2d34; border-radius: 8px; background: #121419; box-shadow: 0 30px 72px rgba(0,0,0,.72); }
.elmar-portal > header { display: flex; padding: 9px 12px; align-items: center; gap: 7px; border-bottom: 1px solid #1e2636; background: #0a1220; color: #eaf0f8; font-size: 8px; }
.elmar-portal > header > b { padding: 3px 6px; border-radius: 3px; background: #1c69d4; font-size: 8px; letter-spacing: .08em; }
.elmar-portal > header small { color: #8994a5; }
.elmar-portal > header span { margin-left: auto; color: #aab2bf; font-size: 7px; }
.elmar-portal > nav { display: flex; padding: 8px 12px; gap: 15px; border-bottom: 1px solid #1e2636; background: #0d141f; color: #8191a6; font-size: 7px; }
.elmar-portal > nav b { padding-bottom: 3px; border-bottom: 2px solid #4c8ff0; color: white; }
.portal-assistant { display: flex; min-height: 0; flex: 1; flex-direction: column; }
.portal-assistant > header { display: flex; padding: 8px 11px; align-items: center; gap: 6px; border-bottom: 1px solid #262a33; background: #171a21; color: #aeb8c8; font-size: 7px; font-weight: 700; }
.portal-assistant > header i { width: 6px; height: 6px; border-radius: 50%; background: #3fbf7f; }
.portal-chat { display: flex; min-height: 0; padding: 13px; flex: 1; flex-direction: column; gap: 8px; overflow: hidden; }
.portal-chat p { max-width: 72%; margin: 0; padding: 8px 10px; border-radius: 7px; font-size: 7px; line-height: 1.45; }
.portal-chat p small { display: block; margin-bottom: 4px; opacity: .65; font: 700 5px/1 var(--mono); letter-spacing: .08em; }
.portal-agent { align-self: flex-start; border: 1px solid #2b6fd0; border-bottom-left-radius: 2px !important; background: #1c69d4; color: #f2f7ff; }
.portal-user { align-self: flex-end; border: 1px solid #333944; border-bottom-right-radius: 2px !important; background: #22262e; color: #dfe3ea; }
.portal-composer { display: flex; padding: 8px 10px; align-items: center; gap: 6px; border-top: 1px solid #262a33; background: #171a21; }
.portal-composer > span { flex: 1; padding: 7px 9px; border: 1px solid #2d323c; border-radius: 999px; background: #0e1015; color: #dfe3ea; font: 600 7px/1 var(--mono); }
.portal-composer > i { width: 1px; height: 11px; margin-left: -27px; background: #dfe3ea; animation: landingCursor .9s steps(1,end) infinite; }
.portal-composer > b { display: grid; width: 22px; height: 22px; place-items: center; border-radius: 50%; background: #1c69d4; color: white; font-size: 8px; }
.elmar-camera { position: absolute; z-index: 7; bottom: 16px; left: 17px; width: 190px; aspect-ratio: 3/2; overflow: hidden; border: 1px solid rgba(255,255,255,.3); border-radius: 9px; background: #0b0c0f; box-shadow: 0 15px 35px rgba(0,0,0,.55); }
.elmar-camera img { display: block; width: 100%; height: 100%; object-fit: cover; filter: brightness(.76) saturate(.75); }
.elmar-camera::after { position: absolute; inset: 45% 0 0; background: linear-gradient(transparent,rgba(0,0,0,.72)); content: ""; }
.elmar-camera span { position: absolute; z-index: 2; bottom: 7px; left: 8px; padding: 3px 7px; border-radius: 4px; background: rgba(0,0,0,.56); color: white; font-size: 7px; }

/* Visuelle Spielreise --------------------------------------------------- */
.experience-story {
  display: grid;
  margin: 0;
  padding: 0;
  gap: 86px;
  list-style: none;
}
.story-step { display: grid; gap: 24px; }
.story-copy {
  display: grid;
  max-width: 760px;
  grid-template-columns: 54px 1fr;
  gap: 22px;
  align-items: start;
}
.story-number {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--accent);
  font: 750 10px/1 var(--mono);
}
.story-copy h3 { margin: 0 0 9px; font-size: 24px; letter-spacing: -.035em; }
.story-copy p { max-width: 650px; margin: 0; color: var(--muted); font-size: 14px; line-height: 1.65; }
.game-window {
  position: relative;
  min-width: 0;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 5px;
  background: #111318;
  box-shadow: 0 30px 75px rgba(0,0,0,.22);
}
.preview-topbar {
  position: relative;
  z-index: 5;
  display: flex;
  height: 38px;
  padding: 0 16px;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid rgba(255,255,255,.12);
  background: rgba(8,11,17,.88);
  color: #d9dde6;
  font: 700 8px/1 var(--mono);
  letter-spacing: .09em;
}
.preview-topbar i { width: 5px; height: 5px; margin-left: auto; border-radius: 50%; background: #58d3a1; box-shadow: 0 0 8px #58d3a1; }

/* 01 · Welcome-Screen */
.welcome-preview { min-height: 500px; }
.welcome-preview-stage {
  position: absolute;
  inset: 38px 0 0;
  display: grid;
  padding: 55px 35px;
  place-content: center;
  isolation: isolate;
  overflow: hidden;
  background:
    radial-gradient(circle at 18% 16%,rgba(61,211,255,.2),transparent 31%),
    radial-gradient(circle at 82% 74%,rgba(157,112,255,.24),transparent 34%),
    linear-gradient(145deg,#07101c 0%,#10162c 54%,#090c18 100%);
  color: #fff;
  text-align: center;
}
.welcome-preview-grid {
  position: absolute;
  z-index: -2;
  inset: -25%;
  opacity: .4;
  background-image: linear-gradient(rgba(117,232,255,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(117,232,255,.07) 1px,transparent 1px);
  background-size: 45px 45px;
  transform: perspective(600px) rotateX(60deg) translateY(20%);
  animation: landingWelcomeGrid 25s linear infinite;
}
.welcome-glow { position: absolute; z-index: -1; display: block; width: 280px; height: 280px; border-radius: 48% 52% 62% 38%; opacity: .2; filter: blur(42px); }
.glow-one { top: -50px; left: -30px; background: #54d9ff; animation: landingWelcomeGlow 12s ease-in-out infinite alternate; }
.glow-two { right: -15px; bottom: -80px; background: #a77cff; animation: landingWelcomeGlow 15s -5s ease-in-out infinite alternate-reverse; }
.welcome-preview-stage > small { color: #75e8ff; font: 750 9px/1 var(--mono); letter-spacing: .32em; }
.welcome-preview-stage > strong { display: block; max-width: 100%; margin: 18px 0 42px; font-size: clamp(48px, 6.3vw, 86px); font-weight: 850; letter-spacing: -.065em; line-height: .9; text-shadow: 0 0 55px rgba(117,232,255,.18); }
.welcome-chips { display: flex; max-width: 780px; flex-wrap: wrap; justify-content: center; gap: 12px; }
.welcome-chips span {
  display: inline-flex;
  padding: 11px 17px;
  align-items: center;
  gap: 8px;
  border: 1px solid color-mix(in srgb,var(--chip) 58%,rgba(255,255,255,.1));
  border-radius: 999px;
  background: color-mix(in srgb,var(--chip) 10%,rgba(8,13,28,.76));
  box-shadow: 0 12px 30px -20px var(--chip);
  font: 650 12px/1 var(--mono);
  opacity: 0;
  animation: landingChipReveal .72s calc(.45s + var(--delay)) cubic-bezier(.2,.75,.25,1) both,landingChipFloat 5s calc(2.6s + var(--delay)) ease-in-out infinite alternate;
}
.welcome-chips span::before { width: 6px; height: 6px; border-radius: 50%; background: var(--chip); box-shadow: 0 0 10px var(--chip); content: ""; }
@keyframes landingWelcomeGrid { to { background-position: 45px 45px; } }
@keyframes landingWelcomeGlow { to { transform: translate(60px,35px) rotate(28deg) scale(1.2); } }
@keyframes landingChipReveal { from { opacity:0; transform:translateY(10px) scale(.96); } to { opacity:1; transform:none; } }
@keyframes landingChipFloat { to { transform: translateY(7px); } }

/* 02 · Zettelarbeit */
.paper-preview {
  min-height: 650px;
  background:
    radial-gradient(circle at 22% 12%,rgba(255,220,160,.13),transparent 37%),
    repeating-linear-gradient(91deg,transparent 0 150px,rgba(33,16,5,.13) 151px 153px,transparent 154px 305px),
    linear-gradient(115deg,#82512e,#51301e);
}
.desk-grain { position: absolute; inset: 0; opacity: .13; background: repeating-linear-gradient(2deg,rgba(255,255,255,.15) 0 1px,transparent 1px 5px); }
.paper-stack { position: relative; z-index: 2; width: min(630px, 76%); margin: 60px auto 100px; color: #29251f; font-family: var(--mono); }
.work-paper {
  position: relative;
  min-height: 128px;
  padding: 30px 38px;
  border: 1px solid rgba(74,60,40,.22);
  background: #f3efe3;
  box-shadow: 0 15px 28px rgba(36,18,7,.24);
}
.work-paper-base { z-index: 1; transform: rotate(-.35deg); }
.work-paper-answer { z-index: 2; margin: -2px 15px 0; padding-top: 38px; background: #f8f2df; transform: rotate(.3deg); }
.work-paper-answer.paper-b { z-index: 3; margin-inline: 9px 20px; background: #f1ebd8; transform: rotate(-.25deg); }
.work-paper-current { z-index: 4; min-height: 145px; margin: -2px 18px 0 11px; padding-top: 39px; background: #fff7d0; transform: rotate(.2deg); }
.paper-role { display: block; margin-bottom: 14px; color: #746c5e; font: 650 9px/1 var(--mono); letter-spacing: .08em; }
.work-paper p { margin: 0; font-size: clamp(13px, 1.65vw, 18px); line-height: 1.65; }
.paper-tape { position: absolute; top: -12px; left: 50%; width: 92px; height: 23px; transform: translateX(-50%) rotate(-1deg); background: rgba(232,203,132,.77); box-shadow: 0 2px 5px rgba(70,45,12,.16); }
.paper-counter { position: absolute; right: 25px; bottom: 18px; color: #978d7d; font: 600 9px/1 var(--mono); }
.paper-cursor { display: inline-block; width: 2px; height: 1.05em; margin-left: 3px; transform: translateY(2px); background: #2b261f; animation: landingCursor .9s steps(1,end) infinite; }
.paper-action { position: absolute; z-index: 5; right: 28px; bottom: 27px; padding: 15px 18px; border: 2px solid #151412; background: #67a4ff; color: #111; box-shadow: 5px 5px 0 rgba(0,0,0,.48); font: 850 10px/1 var(--mono); letter-spacing: .06em; }
@keyframes landingCursor { 50% { opacity: 0; } }

/* 03 · Elmar-Use-Case */
.elmar-preview { min-height: 570px; background: #e8e9ec; color: #1c2027; }
.portal-bar { display: grid; height: 47px; padding: 0 18px; grid-template-columns: 105px 1fr 1fr; align-items: center; border-bottom: 1px solid #c9ccd2; background: #f8f8f9; font-size: 10px; }
.portal-bar > span { color: #757b85; text-align: center; }
.portal-bar > b { justify-self: end; font-size: 10px; }
.portal-dots { display: flex; gap: 6px; }
.portal-dots i { width: 8px; height: 8px; border-radius: 50%; background: #ff6e68; }
.portal-dots i:nth-child(2) { background: #f3c553; }
.portal-dots i:nth-child(3) { background: #66ca6d; }
.elmar-workspace { display: grid; min-height: 523px; grid-template-columns: minmax(210px, .34fr) minmax(380px, .66fr); }
.elmar-sidebar { padding: 28px; border-right: 1px solid #d2d4d9; background: #22262d; color: #f5f7f9; }
.camera-tile { position: relative; aspect-ratio: 3/2; overflow: hidden; border-radius: 4px; background: #08090b; }
.camera-tile img { display: block; width: 100%; height: 100%; object-fit: cover; filter: saturate(.78) brightness(.72); }
.camera-tile::after { position: absolute; inset: 0; background: linear-gradient(transparent 52%,rgba(0,0,0,.8)); content: ""; }
.camera-tile > span { position: absolute; z-index: 2; right: 11px; bottom: 10px; left: 11px; display: flex; align-items: center; gap: 7px; font: 650 9px/1 var(--mono); }
.camera-tile > span i { width: 7px; height: 7px; border-radius: 50%; background: #f1605c; }
.elmar-sidebar > strong, .elmar-sidebar > small { display: block; }
.elmar-sidebar > strong { margin-top: 22px; font-size: 19px; }
.elmar-sidebar > small { margin-top: 4px; color: #9ba1ac; }
.device-line { margin-top: 31px; padding-top: 17px; border-top: 1px solid #3b4049; }
.device-line span, .device-line b { display: block; }
.device-line span { color: #858c98; font: 700 8px/1 var(--mono); letter-spacing: .1em; }
.device-line b { margin-top: 7px; color: #dfe2e7; font: 600 11px/1 var(--mono); }
.elmar-chat { display: flex; min-width: 0; padding: 28px clamp(25px,4vw,55px); flex-direction: column; background: #f3f4f5; }
.support-title { display: flex; padding-bottom: 20px; align-items: center; gap: 11px; border-bottom: 1px solid #dddfe3; }
.support-title div, .support-title b, .support-title small { display: block; }
.support-orb { display: grid; width: 37px; height: 37px; place-items: center; border-radius: 50%; background: #1c263b; color: #fff; font: 800 10px/1 var(--mono); }
.support-title b { font-size: 13px; }
.support-title small { margin-top: 3px; color: #7d838c; font-size: 9px; }
.support-messages { display: flex; padding: 23px 0 18px; flex: 1; flex-direction: column; gap: 11px; }
.support-message { width: fit-content; max-width: 78%; margin: 0; padding: 11px 14px; border-radius: 11px; font-size: 11px; line-height: 1.5; }
.support-message.agent { align-self: flex-start; background: white; border: 1px solid #e0e2e5; border-bottom-left-radius: 3px; }
.support-message.elmar { align-self: flex-end; background: #222b3b; color: white; border-bottom-right-radius: 3px; }
.support-composer { display: flex; min-height: 49px; padding: 6px 6px 6px 15px; align-items: center; border: 1px solid #cdd0d5; border-radius: 10px; background: white; box-shadow: 0 7px 20px rgba(30,35,42,.06); font: 600 11px/1 var(--mono); }
.typing-cursor { width: 2px; height: 15px; margin-left: 3px; background: #252932; animation: landingCursor .9s steps(1,end) infinite; }
.support-composer button { display: grid; width: 35px; height: 35px; margin-left: auto; padding: 0; place-items: center; border: 0; border-radius: 8px; background: #27334b; color: white; font-weight: 800; }

/* 04 · Fortschrittsübersicht */
.progress-preview { min-height: 510px; padding: 28px; background: #0e0f13; color: #e7e9ee; }
.dashboard-head { display: flex; margin-bottom: 23px; padding: 18px 21px; align-items: flex-end; border: 1px solid #2a2e3d; border-radius: 11px; background: linear-gradient(125deg,#19213a,#161821); }
.dashboard-head small, .dashboard-head strong { display: block; }
.dashboard-head small { margin-bottom: 7px; color: #7fa0ff; font: 700 8px/1 var(--mono); letter-spacing: .13em; }
.dashboard-head strong { font-size: 21px; }
.dashboard-head > span { display: flex; margin-left: auto; align-items: center; gap: 7px; color: #a5aab6; font: 650 9px/1 var(--mono); }
.dashboard-head > span i { width: 6px; height: 6px; border-radius: 50%; background: #5ad4a3; box-shadow: 0 0 9px #5ad4a3; }
.case-list { display: grid; gap: 9px; }
.case-row { display: grid; min-height: 79px; padding: 12px 15px; grid-template-columns: minmax(185px,.9fr) minmax(270px,1.45fr) minmax(85px,.5fr); gap: 18px; align-items: center; border: 1px solid #2a2e3d; border-radius: 10px; background: #161821; }
.case-row-dim { opacity: .72; }
.case-person { display: flex; min-width: 0; align-items: center; gap: 11px; }
.case-person img { width: 47px; height: 47px; flex: 0 0 auto; border-radius: 8px; object-fit: cover; }
.case-person p, .case-person b, .case-person small { display: block; min-width: 0; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.case-person b { font-size: 11px; }
.case-person small { margin-top: 4px; color: #8f95a4; font-size: 9px; }
.case-track { display: flex; align-items: center; }
.case-track span { display: grid; width: 25px; height: 25px; flex: 0 0 25px; place-items: center; border: 2px solid #343947; border-radius: 50%; background: #0e0f13; color: transparent; font: 750 7px/1 var(--mono); }
.case-track span.done { border-color: color-mix(in srgb,var(--case) 76%,white); background: var(--case); color: white; }
.case-track span.live { border-color: #d9a557; box-shadow: 0 0 0 4px rgba(217,165,87,.13); }
.case-track span.fresh { animation: landingProgressPop 2.4s ease-out infinite; }
.case-track > i { height: 3px; flex: 1; background: #2a2e3d; }
.case-track > i.done { background: var(--case); }
.case-status { text-align: right; }
.case-status b, .case-status small { display: block; }
.case-status b { font-size: 10px; }
.case-status small { margin-top: 4px; color: #858b99; font-size: 8px; }
@keyframes landingProgressPop { 0%,18% { transform: scale(.75); box-shadow: 0 0 0 0 color-mix(in srgb,var(--case) 55%,transparent); } 35% { transform: scale(1.08); box-shadow: 0 0 0 12px transparent; } 50%,100% { transform: none; } }

/* Eigenständiger Lernkarten-Abschnitt vor dem Spielablauf --------------- */
.learning-cards-section { padding-bottom: 130px; }
.learning-cards-heading { margin-bottom: 58px; }
.learning-cards-preview { min-height: 650px; overflow: hidden; border: 1px solid var(--line); border-radius: 5px; box-shadow: 0 28px 70px rgba(0,0,0,.16); }

/* Lernkarten auf dem Screen */
.cards-preview { position: relative; min-height: 650px; overflow: hidden; isolation: isolate; background: radial-gradient(circle at 50% 50%,#202842,#0b0e16 72%); }
.card-screen-grid { position: absolute; z-index: -1; inset: 0; opacity: .3; background-image: linear-gradient(rgba(111,139,220,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(111,139,220,.08) 1px,transparent 1px); background-size: 44px 44px; mask-image: radial-gradient(circle,black,transparent 82%); }
.learning-fan { position: absolute; inset: 58px 18px 70px; display: flex; align-items: center; justify-content: center; }
.mini-learning-card {
  --card-accent:#67a4ff;
  position: relative;
  width: min(19.5%, 218px);
  aspect-ratio: 1.9/3.15;
  margin-left: -28px;
  padding: 7px;
  transform: translateY(var(--lift)) rotate(var(--rot));
  transform-origin: 50% 90%;
  border: 2px solid #10131a;
  border-radius: 7px;
  background: var(--card-accent);
  box-shadow: 10px 13px 0 rgba(0,0,0,.43);
  color: #172033;
  transition: transform .28s ease;
}
.mini-learning-card:first-child { margin-left: 0; }
.mini-learning-card:hover { z-index: 5; transform: translateY(-15px) rotate(0) scale(1.04); }
.mini-learning-card > div { display: flex; height: 100%; padding: clamp(11px,1.7vw,21px); flex-direction: column; overflow: hidden; border: 2px solid #172033; border-radius: 3px; background: #fffdf1; background-image: radial-gradient(rgba(23,32,51,.18) .65px,transparent .65px); background-size: 5px 5px; }
.mini-learning-card small { display: flex; justify-content: space-between; gap: 6px; font: 800 clamp(5px,.65vw,9px)/1 var(--mono); letter-spacing: .05em; }
.mini-learning-card > div > span { display: grid; width: clamp(45px,6vw,78px); aspect-ratio: 1; margin: clamp(15px,2.6vw,34px) auto clamp(12px,2vw,26px); place-items: center; border: 2px solid #172033; border-radius: 50%; background: var(--card-accent); box-shadow: 5px 5px 0 #172033; font: 900 clamp(18px,2.8vw,36px)/1 var(--mono); }
.mini-learning-card h4 { margin: 0 0 12px; font-size: clamp(11px,1.5vw,21px); line-height: 1.03; letter-spacing: -.035em; }
.mini-learning-card p { margin: auto 0 0; padding-top: 10px; border-top: 2px solid #172033; font-size: clamp(7px,.85vw,11px); font-weight: 650; line-height: 1.35; }
.card-blue { --card-accent:#67a4ff; }
.card-violet { --card-accent:#ae8cff; }
.card-orange { --card-accent:#f28b68; }
.card-green { --card-accent:#66d6a8; }
.card-yellow { --card-accent:#f4c65b; }
.card-rose { --card-accent:#ef7f91; }
.cards-caption { position: absolute; right: 0; bottom: 0; left: 0; display: block; padding: 19px; border-top: 1px solid rgba(255,255,255,.1); background: rgba(6,8,13,.55); color: #9da5b8; font: 700 8px/1 var(--mono); letter-spacing: .14em; text-align: center; }

.outcomes { width: 100%; max-width: none; padding: 0; border: 0; }
.outcomes-panel { padding: 82px max(24px, calc((100vw - var(--max)) / 2)); background: var(--paper); color: var(--ink); }
.outcomes-layout { display: grid; grid-template-columns: minmax(0, .9fr) minmax(420px, 1.1fr); gap: clamp(60px, 10vw, 150px); }
.outcomes-lead { max-width: 500px; margin: 24px 0 0; color: #5f6268; font-size: 16px; line-height: 1.65; }
.outcome-list { margin: 0; padding: 0; list-style: none; border-top: 1px solid rgba(0,0,0,.18); }
.outcome-list li { display: grid; padding: 19px 0; grid-template-columns: 50px 1fr; align-items: start; border-bottom: 1px solid rgba(0,0,0,.18); }
.outcome-list > li > span { display: grid; width: 28px; height: 28px; place-items: center; border: 1px solid rgba(0,0,0,.32); border-radius: 50%; background: rgba(255,255,255,.18); color: #4b2a20; font: 850 14px/1 var(--mono); }
.outcome-list p, .outcome-list strong { display: block; margin: 0; }
.outcome-list strong { margin-bottom: 6px; font-size: 16px; }
.outcome-list p { color: #676a70; font-size: 13px; line-height: 1.55; }
.outcome-cards-preview { min-height: 510px; border: 1px solid rgba(36,20,14,.35); border-radius: 5px; box-shadow: 0 25px 60px rgba(71,31,18,.18); }
.outcomes-layout-copy { display: block; }
.outcomes-layout-copy > div { max-width: 820px; }
.outcomes-layout-copy .outcome-list { margin-top: 34px; }

.setup-facts { display: grid; margin: 80px 0 0; grid-template-columns: repeat(5, 1fr); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.setup-facts div { min-height: 145px; padding: 30px 28px; }
.setup-facts div:first-child { padding-left: 0; }
.setup-facts div + div { border-left: 1px solid var(--line); }
.setup-facts dt { color: #777c87; font: 700 10px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.setup-facts dd { margin: 28px 0 0; font-size: 16px; font-weight: 700; line-height: 1.45; }
.pilot-note { display: flex; margin-top: 34px; padding: 24px 0; align-items: center; gap: 28px; }
.pilot-note-label { flex: 0 0 auto; }
.pilot-note p { max-width: 750px; margin: 0; color: var(--muted); font-size: 13px; line-height: 1.6; }

.final-cta { padding: 125px 24px; background: #516ee5; color: white; text-align: center; }
.final-cta .eyebrow { color: #dbe2ff; }
.final-cta p:not(.eyebrow) { max-width: 590px; margin: 24px auto 34px; color: #e3e8ff; font-size: 17px; line-height: 1.6; }
.button-light { background: white; color: #182252; }
.button-light:hover { background: #eef1ff; }

footer {
  display: flex;
  width: min(calc(100% - 48px), var(--max));
  min-height: 105px;
  margin: 0 auto;
  align-items: center;
  gap: 25px;
  color: #7e838d;
  font-size: 11px;
}
footer a { text-underline-offset: 4px; }
.footer-mark { margin-right: auto; color: var(--text); font-size: 14px; font-weight: 850; text-decoration: none; }

a:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; }

@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; padding-top: 65px; }
  .hero-visual { min-height: 520px; }
  .section-heading, .outcomes-layout { grid-template-columns: 1fr; gap: 35px; }
  .format-grid { grid-template-columns: 1fr; }
  .format-grid article { min-height: 0; padding: 35px 0; }
  .format-grid article + article { padding-left: 0; border-top: 1px solid var(--line); border-left: 0; }
  .format-grid h3 { margin-top: 28px; }
  .multiplayer-flow { min-height: 760px; padding-inline: 22px; }
  .room-screen { width: 100%; }
  .player-station { width: 31%; }
  .station-one { left: 0; }
  .station-two { left: 34.5%; }
  .station-three { right: 0; }
  .round-card { grid-template-columns: 45px 1fr; }
  .round-copy { grid-column: 2; padding: 15px 0; }
  .round-card-agent { grid-template-columns: 45px 1fr; }
  .chapter-agents { min-height: 360px; }
  .landing-agent-network > i { width: 60px; }
  .agent-example-card { width: min(100%,620px); }
  .agent-examples-grid { grid-template-columns: 1fr; }
  .agent-examples-grid .agent-example-card { width: min(100%,620px); }
  .agent-examples-grid .agent-example-card figcaption { min-height: 0; align-items: center; flex-direction: row; gap: 11px; }
  .agent-examples-grid .agent-example-scene { min-height: 280px; padding: 14px; grid-template-columns: 116px 1fr; gap: 16px; }
  .agent-examples-grid .agent-example-person { min-height: 252px; }
  .agent-examples-grid .agent-example-dialogue p { max-width: 88%; padding: 8px 11px; font-size: 12px; }
  .experience-story { gap: 68px; }
  .welcome-preview { min-height: 460px; }
  .learning-cards-preview { min-height: 590px; }
  .paper-preview { min-height: 610px; }
  .elmar-workspace { grid-template-columns: 190px 1fr; }
  .elmar-sidebar { padding: 20px; }
  .case-row { grid-template-columns: 170px 1fr; }
  .case-status { display: none; }
  .outcomes-layout { grid-template-columns: 1fr; }
  .setup-facts { grid-template-columns: 1fr 1fr; }
  .setup-facts div:first-child { padding-left: 28px; }
  .setup-facts div:nth-child(3) { border-top: 1px solid var(--line); border-left: 0; }
  .setup-facts div:nth-child(4) { border-top: 1px solid var(--line); }
  .setup-facts div:nth-child(5) { grid-column: 1 / -1; border-top: 1px solid var(--line); border-left: 0; }
}

@media (max-width: 620px) {
  .site-header, .hero, .section, footer { width: min(calc(100% - 32px), var(--max)); }
  .site-header { padding: 19px 0; }
  .pilot-label { display: none; }
  .header-cta { font-size: 12px; }
  .header-actions { gap:12px; }
  .hero { min-height: 0; padding: 70px 0; }
  .hero h1 { font-size: clamp(28px, 8.7vw, 42px); }
  .hero-actions { align-items: flex-start; flex-direction: column; }
  .hero-game-actions { width:100%; flex-direction:column; }
  .hero-game-actions .button { width:100%; }
  .facts { display: grid; width: 100%; grid-template-columns: 1fr 1fr; gap: 23px 0; }
  .facts li { min-width: 0; padding-left: 18px; }
  .facts li:nth-child(3) { padding-left: 0; border-left: 0; }
  .hero-visual { min-height: 490px; }
  .model-path { padding: 40px 22px; }
  .path-card { grid-template-columns: 26px 45px 1fr; padding: 16px; }
  .path-icon { width: 40px; height: 40px; }
  .path-connector { margin-left: 64px; }
  .path-card-2 + .path-connector { margin-right: 64px; }
  .section { padding: 85px 0; }
  .section-index { margin-bottom: 35px; }
  .section h2, .final-cta h2 { font-size: 39px; }
  .multiplayer-flow { min-height: 1130px; margin-top: 55px; padding: 14px; }
  .room-screen { padding-inline: 10px; }
  .room-screen > header { margin-inline: -10px; }
  .room-screen-title > span { display: none; }
  .room-progress-row { grid-template-columns: 32px 82px 1fr; padding-inline: 6px; }
  .room-progress-row img { width: 30px; height: 30px; }
  .room-progress-row > em { display: none; }
  .room-progress-row > div span { width: 17px; height: 17px; flex-basis: 17px; font-size: 5px; }
  .rotation-stage { display: grid; height: auto; min-height: 900px; margin-top: 20px; align-content: start; gap: 13px; }
  .rotation-arrows, .rotation-label { display: none; }
  .player-station, .station-one, .station-two, .station-three { position: relative; top: auto; right: auto; left: auto; width: 100%; min-height: 0; transform: none; }
  .player-paper { min-height: 145px; }
  .flow-legend { min-height: 75px; padding: 12px; flex-wrap: wrap; gap: 10px 18px; }
  .round-card { padding: 18px; grid-template-columns: 25px 1fr; gap: 14px; }
  .round-demo { min-height: 230px; padding: 20px; }
  .round-copy h3 { font-size: 28px; }
  .round-paper-demo, .round-progress-demo, .landing-chapter, .elmar-original { padding: 0; }
  .landing-chapter { min-height: 310px; }
  .landing-chapter-copy { left: 7%; width: 86%; }
  .landing-chapter-copy > strong { font-size: 43px; }
  .chapter-chatbots .landing-chapter-copy > strong { font-size: 34px; }
  .landing-chapter-number { top: 2%; font-size: 135px; }
  .chapter-agents { min-height: 350px; }
  .chapter-agents .landing-chapter-copy > strong { font-size: 54px; text-shadow: 4px 4px 0 #204526; }
  .chapter-agents .landing-chapter-number { font-size: 170px; }
  .landing-agent-network { right: 1%; width: 51%; }
  .landing-agent-network::before { box-shadow: 0 -68px 0 rgba(184,255,69,.25),0 68px 0 rgba(99,255,208,.25); }
  .landing-agent-network > i { width: 45px; border-width: 1px; box-shadow: 3px 3px 0 #24462b; font-size: 5px; }
  .agent-example-card { width: 100%; }
  .agent-example-card figcaption { align-items: flex-start; flex-direction: column; gap: 6px; }
  .agent-example-scene { min-height: 0; grid-template-columns: 86px 1fr; gap: 10px; padding: 10px; }
  .agent-example-person { min-height: 176px; }
  .agent-example-dialogue p { max-width: 100%; padding: 8px 9px; font-size: 11px; }
  .agent-examples-grid .agent-example-card figcaption { align-items: flex-start; flex-direction: column; gap: 6px; }
  .agent-examples-grid .agent-example-scene { min-height: 0; padding: 10px; grid-template-columns: 86px 1fr; gap: 10px; }
  .agent-examples-grid .agent-example-person { min-height: 176px; }
  .agent-examples-grid .agent-example-dialogue p { max-width: 100%; padding: 8px 9px; font-size: 11px; }
  .round-paper-demo { min-height: 360px; }
  .round-paper-chain { width: 93%; }
  .round-paper-chain article { min-height: 98px; padding: 20px 16px; }
  .round-progress-demo { min-height: 320px; padding: 11px; }
  .mini-case { grid-template-columns: 34px 75px 1fr; }
  .round-card-agent { grid-template-columns: 1fr; }
  .round-card-agent .round-meta { display: none; }
  .round-card-agent .round-copy { grid-column: 1; }
  .elmar-menubar { height: 24px; }
  .elmar-bg-browser, .elmar-excel { display: none; }
  .elmar-portal > header small, .elmar-portal > nav span:last-child { display: none; }
  .elmar-portal > nav { gap: 11px; }
  .portal-chat p { max-width: 86%; font-size: 7px; }
  .experience-story { gap: 58px; }
  .story-copy { grid-template-columns: 42px 1fr; gap: 13px; }
  .story-number { width: 34px; height: 34px; }
  .story-copy h3 { font-size: 21px; }
  .game-window { box-shadow: 0 20px 50px rgba(0,0,0,.2); }
  .welcome-preview { min-height: 420px; }
  .welcome-preview-stage { padding: 45px 18px; }
  .welcome-preview-stage > strong { margin-bottom: 34px; font-size: 58px; }
  .hero-welcome-preview .welcome-preview-stage > strong { font-size: clamp(43px,14vw,58px); }
  .welcome-chips { gap: 8px; }
  .welcome-chips span { padding: 9px 12px; font-size: 9px; }
  .paper-preview { min-height: 545px; }
  .paper-stack { width: 88%; margin-top: 40px; }
  .work-paper { min-height: 105px; padding: 24px 22px; }
  .work-paper-answer { padding-top: 34px; }
  .work-paper-current { min-height: 125px; padding-top: 34px; }
  .paper-action { right: 17px; bottom: 17px; }
  .elmar-preview { min-height: 680px; }
  .portal-bar { grid-template-columns: 60px 1fr; }
  .portal-bar > b { display: none; }
  .elmar-workspace { min-height: 633px; grid-template-columns: 1fr; }
  .elmar-sidebar { display: grid; padding: 15px; grid-template-columns: 115px 1fr; grid-template-rows: auto auto; gap: 0 15px; }
  .camera-tile { grid-row: 1 / 3; }
  .elmar-sidebar > strong { align-self: end; margin-top: 0; }
  .elmar-sidebar > small { align-self: start; }
  .device-line { display: none; }
  .elmar-chat { min-height: 470px; padding: 22px 18px; }
  .support-message { max-width: 88%; font-size: 10px; }
  .progress-preview { min-height: 510px; padding: 14px; }
  .dashboard-head { padding: 14px; }
  .dashboard-head > span { display: none; }
  .case-row { min-height: 86px; padding: 10px; grid-template-columns: 115px minmax(130px,1fr); gap: 8px; }
  .case-person { gap: 7px; }
  .case-person img { width: 38px; height: 38px; }
  .case-track span { width: 20px; height: 20px; flex-basis: 20px; font-size: 6px; }
  .cards-preview { min-height: 520px; }
  .learning-cards-preview { min-height: 520px; }
  .learning-fan { inset: 36px 14px 62px; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); align-content: center; gap: 13px 9px; }
  .mini-learning-card { width: 100%; margin-left: 0; padding: 4px; transform: rotate(var(--rot)); border-width: 1px; box-shadow: 6px 8px 0 rgba(0,0,0,.43); }
  .mini-learning-card:first-child { margin-left: 0; }
  .mini-learning-card > div { padding: 8px; border-width: 1px; }
  .mini-learning-card > div > span { box-shadow: 3px 3px 0 #172033; }
  .mini-learning-card h4 { font-size: 10px; }
  .mini-learning-card p { font-size: 6px; border-top-width: 1px; }
  .outcomes-panel { padding-top: 62px; padding-bottom: 62px; }
  .outcomes-layout { min-width: 0; }
  .setup-facts { grid-template-columns: 1fr; }
  .setup-facts div:nth-child(5) { grid-column: auto; }
  .setup-facts div, .setup-facts div:first-child { min-height: 120px; padding: 25px 0; border-left: 0; }
  .setup-facts div + div { border-top: 1px solid var(--line); border-left: 0; }
  .setup-facts dd { margin-top: 20px; }
  .pilot-note { align-items: flex-start; flex-direction: column; gap: 15px; }
  .final-cta { padding: 95px 20px; }
  footer { min-height: 90px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-delay: 0s !important;
  }
}