:root {
  --himmel-oben: #6FB9F7;
  --himmel: #9DD2FF;
  --himmel-hell: #D4ECFF;
  --weiss: #FFFFFF;
  --navy: #0E2A66; /* dunkler als #1C3F8C, damit Text auch auf hellem Himmelblau sicher lesbar bleibt */
  --navy-weich: #2B4A86;
  --gold: #FFD43B;
  --gold-hell: #FFF0A6;
  --gold-dunkel: #B88A00;
  --gras: #5DA03A;
  --gras-hell: #7CC04E;
  --erde: #6B4A2E;
  --erde-dunkel: #4E3420;
  --pixel: "Jersey 10", ui-rounded, sans-serif;
  --text: "Nunito", ui-rounded, system-ui, sans-serif;
  --breite: 1120px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 72px; }
body {
  margin: 0;
  font: 400 1.0625rem/1.6 var(--text);
  color: var(--navy);
  background: linear-gradient(var(--himmel-oben) 0, var(--himmel) 700px, var(--himmel-hell) 1600px, var(--weiss) 2600px);
  overflow-x: hidden;
}
::selection { background: var(--gold); color: var(--navy); }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--navy); text-underline-offset: 3px; text-decoration-thickness: 2px; }
a:focus-visible, .mc-knopf:focus-visible { outline: 3px solid var(--navy); outline-offset: 3px; }

/* ---------- Leiste ---------- */
.bar {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 10px max(16px, calc((100vw - var(--breite)) / 2));
  background: rgb(111 185 247 / .82);
  backdrop-filter: blur(10px);
}
.marke { display: flex; align-items: center; gap: 10px; font: 400 1.75rem/1 var(--pixel); text-decoration: none; }
.marke img { width: 32px; height: 32px; image-rendering: pixelated; }
.bar nav { display: flex; align-items: center; gap: 24px; font: 400 1.5rem/1 var(--pixel); }
.bar nav a:not(.mc-knopf) { text-decoration: none; }
.bar nav a:not(.mc-knopf):hover { text-decoration: underline; }

/* ---------- Minecraft-Knopf ---------- */
.mc-knopf {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 16px 30px;
  font: 400 1.875rem/1 var(--pixel); color: #3A2A00; text-decoration: none;
  background: var(--gold);
  border: 3px solid #1E1A10;
  box-shadow: inset -5px -5px 0 var(--gold-dunkel), inset 5px 5px 0 var(--gold-hell);
  transition: transform .15s cubic-bezier(.2, .8, .2, 1), filter .15s;
}
.mc-knopf svg { width: 22px; height: 22px; fill: currentColor; shape-rendering: crispEdges; }
.mc-knopf:hover { filter: brightness(1.06); transform: translateY(-2px); }
.mc-knopf:active { transform: translateY(1px); box-shadow: inset 5px 5px 0 var(--gold-dunkel), inset -5px -5px 0 var(--gold-hell); }
.mc-knopf.klein { padding: 7px 14px; font-size: 1.375rem; gap: 8px; border-width: 2px;
  box-shadow: inset -3px -3px 0 var(--gold-dunkel), inset 3px 3px 0 var(--gold-hell); }
.mc-knopf.klein svg { width: 14px; height: 14px; }

/* Zweitknöpfe aus Stein: für Prism (Gold bleibt dem Download) */
.prism { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 12px; margin-top: 6px; }
.prism span { font-size: .9375rem; color: var(--navy-weich); }
.mc-knopf.stein {
  padding: 8px 16px; font-size: 1.375rem; gap: 8px; border-width: 2px; cursor: pointer;
  color: var(--navy); background: #C6C6C6;
  box-shadow: inset -3px -3px 0 #6E6E6E, inset 3px 3px 0 var(--weiss);
}
.mc-knopf.stein:active { box-shadow: inset 3px 3px 0 #6E6E6E, inset -3px -3px 0 var(--weiss); }
.mc-knopf.stein[data-kopieren] { min-width: 8.5em; justify-content: center; }
.link-feld { flex-basis: 100%; max-width: 34rem; padding: 8px 10px; font: .9375rem var(--text); color: var(--navy);
  background: var(--weiss); border: 2px solid #1E1A10; }
.mc-knopf.stein.ok { background: var(--gras-hell); box-shadow: inset -3px -3px 0 var(--gras), inset 3px 3px 0 var(--weiss); }

/* ---------- Himmel (erster Bildschirm) ---------- */
.himmel {
  position: relative;
  min-height: calc(100svh - 56px);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 32px 16px 72px;
  text-align: center;
  isolation: isolate;
}
.wolken { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.wolke {
  position: absolute; display: block;
  background: linear-gradient(var(--weiss) 0 66%, #CFE2F6 66% 100%);
  will-change: transform;
}
.wolke::before { content: ""; position: absolute; background: inherit; }
.w1 { left: 4%;  top: 14%; width: 200px; height: 40px; }
.w1::before { left: 40px; top: -28px; width: 96px; height: 28px; background: var(--weiss); }
.w2 { right: 6%; top: 22%; width: 260px; height: 48px; }
.w2::before { left: 120px; top: -32px; width: 100px; height: 32px; background: var(--weiss); }
.w3 { left: 12%; top: 64%; width: 150px; height: 32px; opacity: .85; }
.w4 { right: 14%; top: 70%; width: 120px; height: 28px; opacity: .8; }
.w5 { left: 46%; top: 6%; width: 110px; height: 24px; opacity: .7; }

.held {
  margin: 0;
  width: min(760px, 92vw);
  padding: 10px 10px 36px;
  background: var(--weiss);
  box-shadow: 0 24px 48px -12px rgb(14 42 102 / .35);
  animation: schweben 6s ease-in-out infinite;
}
@keyframes schweben { 50% { transform: translateY(-10px); } }

h1 {
  margin: 28px 0 0;
  font: 400 clamp(4.5rem, 15vw, 7.5rem)/.9 var(--pixel);
  letter-spacing: 0;
  color: var(--navy);
}
.nutzen { margin: 12px 0 26px; font-size: clamp(1.125rem, 2.4vw, 1.375rem); color: var(--navy); max-width: 34ch; }
.aktion { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.version { margin: 0; font-size: .9375rem; color: var(--navy-weich); }

/* ---------- Highlights ---------- */
.highlights { max-width: var(--breite); margin: 0 auto; padding: 48px 16px 24px; display: grid; gap: 112px; }
.zeile { display: grid; grid-template-columns: 1.25fr 1fr; gap: 56px; align-items: center; }
.zeile.umgekehrt .bilder { order: 2; }
.bild { background: var(--weiss); padding: 8px 8px 26px; box-shadow: 0 18px 36px -14px rgb(14 42 102 / .35); }
.bilder.doppelt { position: relative; padding-bottom: 18%; }
.bilder.doppelt .bild:first-child { width: 82%; }
.bilder.doppelt .bild:last-child { position: absolute; width: 58%; right: 0; bottom: 0; transform: rotate(2deg); }
.zeile.umgekehrt .bilder.doppelt .bild:last-child { transform: rotate(-2deg); }
.text h2 { margin: 0 0 14px; font: 400 clamp(2.5rem, 5vw, 3.5rem)/1 var(--pixel); text-wrap: balance; }
.text p { margin: 0 0 12px; max-width: 46ch; }
.hinweis { font-size: .9375rem; color: var(--navy-weich); }

/* ---------- Wolkenband (Abstieg durch die Wolken) ---------- */
.wolkenband { position: relative; height: 260px; overflow: hidden; pointer-events: none;
  background: linear-gradient(transparent, #C4E2FD 35% 65%, transparent); }
.b1 { left: -2%; top: 30px; width: 34%; height: 56px; }
.b2 { left: 26%; top: 110px; width: 30%; height: 64px; }
.b3 { left: 52%; top: 40px; width: 38%; height: 60px; }
.b4 { left: 78%; top: 140px; width: 30%; height: 52px; }
.b5 { left: 8%; top: 170px; width: 22%; height: 44px; }
.b6 { left: 60%; top: 196px; width: 18%; height: 40px; }
.wolkenband .wolke::before { left: 18%; top: -24px; width: 40%; height: 24px; background: var(--weiss); }

/* ---------- Installieren ---------- */
.installieren { max-width: var(--breite); margin: 0 auto; padding: 56px 16px 96px; text-align: center; }
.installieren .aktion { margin-top: 8px; }
.installieren h2 { margin: 0 0 40px; font: 400 clamp(2.75rem, 6vw, 4rem)/1 var(--pixel); text-wrap: balance; }
.schritte { list-style: none; counter-reset: schritt; margin: 0 0 44px; padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; text-align: left; }
.schritte li { counter-increment: schritt; position: relative; padding-top: 64px; }
.schritte li::before {
  content: counter(schritt);
  position: absolute; top: 0; left: 0;
  width: 48px; height: 48px; display: grid; place-items: center;
  font: 400 2rem/1 var(--pixel); color: var(--navy);
  background: #C6C6C6; border: 3px solid #1E1A10;
  box-shadow: inset -4px -4px 0 #6E6E6E, inset 4px 4px 0 var(--weiss);
}
.schritte h3 { margin: 0 0 6px; font: 400 1.875rem/1 var(--pixel); }
.schritte p { margin: 0; }

/* ---------- Boden ---------- */
.boden { color: #F4E9DC; }
.gras { height: 64px; background: url("img/gras.png") 0 0 / 64px 64px repeat-x; image-rendering: pixelated; }
.erde {
  padding: 36px max(16px, calc((100vw - var(--breite)) / 2)) 48px;
  background: var(--erde-dunkel) url("img/erde.png") 0 0 / 64px 64px;
  image-rendering: pixelated;
  font-size: .9375rem;
}
.erde p { margin: 0 0 12px; max-width: 90ch; padding: 2px 0; text-shadow: 0 1px 2px rgb(0 0 0 / .6); }
.erde a { color: var(--gold-hell); }
.dank b { color: var(--weiss); }

/* ---------- Handy ---------- */
@media (max-width: 760px) {
  .bar nav a:not(.mc-knopf) { display: none; }
  .zeile, .zeile.umgekehrt { grid-template-columns: 1fr; gap: 28px; }
  .zeile.umgekehrt .bilder { order: 0; }
  .highlights { gap: 72px; }
  .schritte { grid-template-columns: 1fr; gap: 28px; }
  .installieren { padding: 88px 16px; }
  .mc-knopf { font-size: 1.625rem; padding: 14px 22px; }
  .himmel { min-height: auto; padding: 40px 16px 40px; }
  .highlights { padding-top: 16px; }
  .w2, .w3, .w4 { display: none; }
  [data-prism] { display: none; }
  .w1 { top: 4%; left: -40px; }
  .w5 { top: 10%; left: 58%; }
}

@media (prefers-reduced-motion: reduce) {
  .held { animation: none; }
  html { scroll-behavior: auto; }
}

/* ---------- Kinoleinwand: Link zum Video-Tutorial ---------- */
/* Einziger dunkler Fleck im Himmel: wie eine Leinwand, und schon im Look des Regie-Hefts. */
.kino {
  position: relative; display: grid; grid-template-columns: 1.1fr 1fr; align-items: center; gap: 32px;
  padding: 44px 40px 36px; overflow: hidden;
  background: #121019; color: #ece8f5; text-decoration: none;
  border: 3px solid #1E1A10; border-radius: 6px;
  box-shadow: 0 18px 40px -18px rgb(14 42 102 / .55);
  transition: transform .2s cubic-bezier(.2, .8, .2, 1);
}
.kino:hover { transform: translateY(-3px); }
.kino:hover .mc-knopf { filter: brightness(1.06); }
.kino:focus-visible { outline: 3px solid var(--navy); outline-offset: 4px; }
.klappe { position: absolute; inset: 0 0 auto; height: 16px; background: repeating-linear-gradient(-45deg, #ece8f5 0 16px, #121019 16px 32px); }
.kino-text { display: grid; gap: 14px; justify-items: start; }
.kino-rec { display: inline-flex; align-items: center; gap: 8px; font: 400 1.25rem/1 var(--pixel); letter-spacing: .04em; text-transform: uppercase; color: #ff4d5e; }
.kino-rec::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: #ff4d5e; animation: rec 1.2s steps(2) infinite; }
@keyframes rec { 50% { opacity: .2; } }
.kino-titel { font: 400 clamp(2.5rem, 5vw, 3.5rem)/1 var(--pixel); text-wrap: balance; }
.kino-satz { color: #c9c2dc; max-width: 34ch; }
.kino .mc-knopf { margin-top: 6px; }
.kino-bild { width: 100%; height: auto; }
@media (max-width: 760px) {
  .kino { grid-template-columns: 1fr; padding: 40px 20px 28px; gap: 20px; }
  .kino-bild { order: -1; max-width: 360px; }
}
@media (prefers-reduced-motion: reduce) {
  .kino-rec::before { animation: none; }
  .kino, .kino:hover { transform: none; }
}