/* Mario-Kart-KI Bautagebuch – Retro-Jump'n'Run-Look. Alle Grafiken in img/px/ sind selbst gezeichnet. */
:root {
  --sky: #5c94fc; --sky-deep: #3b6fd6; --sky-light: #8ab8ff;
  --brick: #c84c0c; --brick-light: #e9893f; --brick-dark: #5a1c00;
  --coin: #fbd000; --coin-dark: #c98f00;
  --pipe: #00a800; --pipe-light: #5ce05c; --pipe-dark: #005c00;
  --red: #e52521; --red-dark: #9c0f0c; --blue: #049cd8;
  --ink: #1a1a1a; --paper: #fff8e7; --paper-2: #fdeec9; --muted: #5b5b5b;
  --shadow: 6px 6px 0 var(--ink); --shadow-lg: 10px 10px 0 var(--ink);
  --radius: 10px; --maxw: 1040px;
  --pixel: "Press Start 2P", "Courier New", monospace;
  --asphalt: #3a3b45; --asphalt-dark: #2b2c34; --curb-red: #e52521; --curb-white: #f7f7f7; --boost: #ff8c1a;
  --checker: repeating-conic-gradient(var(--ink) 0 25%, #fff 0 50%);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 70px; }
body { margin: 0; font-family: "Nunito", "Avenir Next", "Segoe UI", system-ui, sans-serif; font-size: 17px; line-height: 1.6; color: var(--ink); background: var(--sky); }
body.menu-open { overflow: hidden; }
img { max-width: 100%; height: auto; display: block; }
img[src*="/px/"] { image-rendering: pixelated; image-rendering: crisp-edges; }
h1, h2, h3, .pixel, .level-badge, th, .flag, .meta, .stat b, .menu-title, .menu li a, .btn-boost, .hud, .world .flag, .timeline time, .callout > strong:first-child { font-family: var(--pixel); line-height: 1.6; }
h1 { font-size: clamp(1.1rem, 3.4vw, 2rem); margin: 0 0 1rem; color: #fff; text-shadow: 3px 3px 0 var(--ink), 6px 6px 0 rgba(0,0,0,.25); }
h2 { font-size: clamp(0.95rem, 2.2vw, 1.3rem); margin: 0 0 1.2rem; color: var(--brick-dark); }
h3 { font-size: 0.78rem; margin: 1.6rem 0 0.6rem; color: var(--sky-deep); }
p { margin: 0.6rem 0 1rem; }
a { color: var(--sky-deep); text-decoration-thickness: 2px; text-underline-offset: 3px; }
code, pre { font-family: "SF Mono", Menlo, Consolas, monospace; font-size: 0.9em; }
code { background: var(--paper-2); padding: 1px 6px; border-radius: 4px; border: 1px solid #e3cf9b; }
pre { background: var(--ink); color: #f3f3f3; padding: 14px 16px; border-radius: var(--radius); overflow-x: auto; border: 3px solid var(--ink); box-shadow: var(--shadow); margin: 1rem 0 1.4rem; position: relative; }
pre::before { content: ""; position: absolute; left: 0; top: 0; right: 0; height: 6px; background: repeating-linear-gradient(90deg, var(--coin) 0 10px, var(--red) 10px 20px, var(--pipe) 20px 30px, var(--blue) 30px 40px); }
pre code { background: none; border: none; padding: 0; color: inherit; }
.table-wrap { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; margin: 1rem 0 1.4rem; background: #fff; border: 3px solid var(--ink); box-shadow: var(--shadow); }
th, td { padding: 9px 12px; border-bottom: 2px solid #efe4c8; vertical-align: top; text-align: left; }
th { background: var(--coin); font-size: 0.58rem; border-bottom: 3px solid var(--ink); }
tr:nth-child(even) td { background: #fffdf6; }
tr:last-child td { border-bottom: none; }
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 16px; }

/* ---------- HUD im Rennspiel-Stil ---------- */
.hud { position: fixed; top: 0; left: 0; right: 0; z-index: 50; background: linear-gradient(rgba(26,26,26,.92), rgba(26,26,26,.86)); border-bottom: 4px solid var(--ink); color: #fff; font-size: 0.6rem; text-shadow: 2px 2px 0 #000; }
.hud::after { content: ""; position: absolute; left: 0; right: 0; bottom: -10px; height: 6px; background: repeating-linear-gradient(90deg, var(--curb-red) 0 28px, var(--curb-white) 28px 56px); border-bottom: 2px solid var(--ink); }
.hud-in { display: flex; align-items: center; gap: 24px; height: 60px; }
.hud-brand { color: #fff; text-decoration: none; letter-spacing: .04em; display: flex; align-items: center; gap: 12px; }
.pos { font-size: 1.35rem; color: var(--coin); font-style: italic; text-shadow: 3px 3px 0 var(--red), 5px 5px 0 #000; }
.pos sup { font-size: 0.5rem; vertical-align: top; margin-left: 2px; }
.hud-lap, .hud-coins, .hud-time { display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.hud-lap { margin-left: auto; } .hud-lap b, .hud-time b { color: var(--coin); }
.hud-time { font-size: 0.72rem; }
.hud .coin { width: 14px; height: auto; }
.menu-btn { width: 44px; height: 44px; display: grid; place-items: center; margin-left: 6px; }
.menu-btn img { width: 44px; height: 44px; filter: drop-shadow(3px 3px 0 #000); transition: transform .12s; }
.menu-btn:hover img { transform: scale(1.1) rotate(-6deg); }
@media (max-width: 760px) { .hud-lap, .hud-time { display: none; } .hud-in { gap: 12px; } .pos { font-size: 1rem; } }

/* ---------- Boxenstopp-Menü ---------- */
.menu { position: fixed; inset: 0; z-index: 100; display: none; }
.menu:target, .menu.open { display: block; }
.menu-backdrop { position: absolute; inset: 0; background: rgba(10, 14, 40, .78); }
.menu-panel { position: relative; max-width: 560px; margin: 70px auto 0; background: var(--paper); border: 4px solid var(--ink); box-shadow: var(--shadow-lg); padding: 26px 26px 22px; animation: drop .25s ease-out; }
.menu-panel::before { content: ""; position: absolute; left: -4px; right: -4px; top: -4px; height: 18px; background: var(--checker); background-size: 18px 18px; border: 4px solid var(--ink); border-bottom: none; }
.menu-title { text-align: center; font-size: 1rem; color: var(--red); text-shadow: 3px 3px 0 var(--ink); margin: 10px 0 20px; letter-spacing: .08em; }
.menu ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.menu li a { display: flex; align-items: baseline; gap: 12px; padding: 14px 16px; background: #fff; border: 3px solid var(--ink); box-shadow: 4px 4px 0 var(--ink); color: var(--ink); text-decoration: none; font-size: 0.68rem; transition: transform .1s, box-shadow .1s, background .1s; }
.menu li a small { margin-left: auto; font-family: "Nunito", sans-serif; font-size: 0.85rem; color: var(--muted); font-weight: 700; }
.menu li a .arrow { width: 14px; color: transparent; }
.menu li a::after { content: ""; width: 22px; height: 12px; margin-left: 10px; background: var(--checker); background-size: 6px 6px; opacity: 0; }
.menu li a:hover::after, .menu li a.current::after { opacity: 1; }
.menu li a:hover, .menu li a:focus { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--ink); background: var(--coin); }
.menu li a:hover .arrow, .menu li a:focus .arrow, .menu li a.current .arrow { color: var(--red); }
.menu li a.current { background: var(--pipe-light); }
.menu-github { display: block; text-align: center; margin: 18px auto 0; font-family: var(--pixel); font-size: 0.6rem; color: var(--sky-deep); text-decoration: none; }
.menu-github:hover { color: var(--ink); }
.menu-close { display: block; text-align: center; margin: 22px auto 0; font-family: var(--pixel); font-size: 0.6rem; color: var(--muted); text-decoration: none; }
.menu-close:hover { color: var(--ink); }

/* ---------- Hero: Himmel, Horizont, Rennstrecke ---------- */
.hero { position: relative; overflow: hidden; margin: 0; padding: 120px 0 0; color: #fff; text-align: center; background: linear-gradient(var(--sky) 0%, var(--sky) 55%, var(--sky-light) 100%); }
.hero-small { padding-top: 110px; }
.hero-in { position: relative; z-index: 3; padding-bottom: 215px; }
.hero-small .hero-in { padding-bottom: 150px; }
.hero .sub { font-size: 1.15rem; max-width: 720px; margin: 0 auto 1.6rem; text-shadow: 2px 2px 0 rgba(0,0,0,.4); }
.hero .meta { font-size: 0.6rem; color: var(--coin); text-shadow: 2px 2px 0 var(--ink); margin-bottom: 14px; }
.cloud { position: absolute; z-index: 1; width: 110px; opacity: .95; animation: drift 60s linear infinite; }
.cloud.c1 { top: 78px; left: -160px; }
.cloud.c2 { top: 110px; left: -160px; width: 70px; animation-duration: 85s; animation-delay: -30s; }
.cloud.c3 { top: 70px; left: -160px; width: 140px; animation-duration: 110s; animation-delay: -70s; }
/* Startampel */
.lights { display: inline-flex; gap: 14px; padding: 12px 18px; background: var(--ink); border: 3px solid #000; border-radius: 12px; margin-bottom: 26px; box-shadow: 0 6px 0 #000; position: relative; }
.lights::before { content: ""; position: absolute; left: 50%; top: -60px; width: 8px; height: 60px; background: #2b2c34; transform: translateX(-50%); z-index: -1; }
.lights span { width: 26px; height: 26px; border-radius: 50%; background: #4a1010; border: 3px solid #000; box-shadow: inset -4px -4px 0 rgba(0,0,0,.35); animation: light-go 4s steps(1) 1 forwards; }
.lights span:nth-child(2) { animation-delay: .6s; } .lights span:nth-child(3) { animation-delay: 1.2s; }
@keyframes light-go { 0% { background: #4a1010; } 20% { background: var(--red); box-shadow: 0 0 14px var(--red), inset -4px -4px 0 rgba(0,0,0,.25); } 60% { background: var(--red); box-shadow: 0 0 14px var(--red), inset -4px -4px 0 rgba(0,0,0,.25); } 61%, 100% { background: #2fdc5a; box-shadow: 0 0 16px #2fdc5a, inset -4px -4px 0 rgba(0,0,0,.25); } }
/* Hügel am Horizont */
.scenery { position: absolute; left: 0; right: 0; bottom: 118px; height: 120px; z-index: 1; pointer-events: none; }
.hill { position: absolute; bottom: 0; width: 300px; opacity: .9; }
.hill.h1 { left: -60px; } .hill.h2 { right: 6%; width: 200px; }
.bush { position: absolute; bottom: 0; width: 130px; left: 40%; }
/* Strecke */
.track { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; }
.curb { height: 14px; background: repeating-linear-gradient(90deg, var(--curb-red) 0 40px, var(--curb-white) 40px 80px); border-top: 3px solid var(--ink); border-bottom: 3px solid var(--ink); }
.road { position: relative; height: 92px; background: var(--asphalt); overflow: hidden; }
.road::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 4px; background: repeating-linear-gradient(90deg, #fff 0 40px, transparent 40px 80px); transform: translateY(-50%); opacity: .8; }
.road::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 100%; background: repeating-linear-gradient(90deg, transparent 0 120px, rgba(255,255,255,.03) 120px 121px); }
.kart { position: absolute; bottom: 10px; left: -140px; width: 128px; animation: race 11s linear infinite; filter: drop-shadow(0 6px 0 rgba(0,0,0,.35)); }
.ib { position: absolute; top: 8px; width: 34px; filter: drop-shadow(2px 3px 0 rgba(0,0,0,.4)); }
.ib1 { left: 18%; } .ib2 { left: 48%; animation-delay: -.7s; } .ib3 { left: 78%; animation-delay: -1.3s; }
.finish-banner { position: absolute; left: 50%; top: -72px; transform: translateX(-50%); z-index: 3; padding: 10px 26px 8px; background: var(--checker); background-size: 16px 16px; border: 3px solid var(--ink); font-family: var(--pixel); font-size: 0.8rem; color: #fff; text-shadow: 2px 2px 0 var(--ink), -2px -2px 0 var(--ink), 2px -2px 0 var(--ink), -2px 2px 0 var(--ink); }
.finish-banner::before, .finish-banner::after { content: ""; position: absolute; top: 100%; width: 8px; height: 70px; background: #cfd8dc; border: 2px solid var(--ink); }
.finish-banner::before { left: -8px; } .finish-banner::after { right: -8px; }

/* Statistik-Münzen */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 16px; margin: 1.4rem auto 0; max-width: 900px; }
.stat { background: var(--paper); color: var(--ink); border: 3px solid var(--ink); box-shadow: 5px 5px 0 var(--ink); padding: 14px 12px 12px; text-align: center; text-shadow: none; position: relative; }
.stat .coin { width: 22px; margin: -28px auto 6px; }
.stat b { display: block; font-size: 1rem; margin-bottom: 6px; color: var(--brick-dark); }
.stat span { font-size: 0.85rem; line-height: 1.35; display: block; }

/* ---------- Inhalt ---------- */
main { background: var(--paper); background-image: radial-gradient(rgba(0,0,0,.035) 1px, transparent 1px); background-size: 14px 14px; padding: 40px 0 30px; position: relative; }
section { margin: 0 0 56px; }
.card { background: #fff; border: 3px solid var(--ink); border-radius: var(--radius); box-shadow: var(--shadow); padding: 22px 26px; margin: 1.2rem 0 1.6rem; }
.level-badge { display: inline-block; font-size: 0.6rem; background: var(--red); color: #fff; padding: 9px 12px; border: 3px solid var(--ink); box-shadow: 4px 4px 0 var(--ink); margin-bottom: 14px; position: relative; }
.level-badge::before { content: ""; position: absolute; left: -3px; top: -3px; bottom: -3px; width: 12px; background: var(--checker); background-size: 6px 6px; border: 3px solid var(--ink); border-right: none; }
.level-badge { padding-left: 24px; }
.level-badge.green { background: var(--pipe); } .level-badge.blue { background: var(--blue); } .level-badge.coin { background: var(--coin); color: var(--ink); }
.hint { color: var(--muted); font-size: 0.95rem; }
ul.files li, ol.steps li { margin: 0.35rem 0; }
ul.files { padding-left: 0; list-style: none; }
ul.files li { padding-left: 30px; position: relative; }
ul.files li::before { content: ""; position: absolute; left: 0; top: 4px; width: 18px; height: 18px; background: url("img/px/coin.svg") no-repeat center / contain; }

/* Hinweiskästen mit Pixel-Blöcken */
.callout { border: 3px solid var(--ink); border-radius: var(--radius); padding: 16px 18px 14px 74px; margin: 1.2rem 0; position: relative; box-shadow: 5px 5px 0 var(--ink); background: #e3f3ff; }
.callout::before { content: ""; position: absolute; left: 16px; top: 14px; width: 44px; height: 44px; background: url("img/px/itembox.svg") no-repeat center / contain; image-rendering: pixelated; }
.callout.trap { background: #ffe3e0; } .callout.trap::before { background-image: url("img/px/banana.svg"); }
.callout.fix { background: #e3ffe3; } .callout.fix::before { background-image: url("img/px/mushroom.svg"); }
.callout > strong:first-child { display: block; font-size: 0.6rem; margin-bottom: 8px; color: var(--ink); }
.callout p:last-child { margin-bottom: 0; }
.callout:hover::before { animation: bump .35s ease; }

/* Weltkarte / Seitenkarten */
.worldmap { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 18px; margin: 1rem 0 1.4rem; }
.world { display: block; background: #fff; border: 3px solid var(--ink); border-radius: var(--radius); box-shadow: var(--shadow); padding: 16px; position: relative; color: var(--ink); text-decoration: none; transition: transform .12s, box-shadow .12s; }
a.world:hover { transform: translate(-3px, -3px); box-shadow: 9px 9px 0 var(--ink); }
.world .flag { position: static; width: auto; font-size: 0.5rem; padding: 6px 8px; display: inline-block; border: 2px solid var(--ink); margin-bottom: 10px; }
.world.done .flag { background: var(--pipe); color: #fff; } .world.next .flag { background: var(--coin); } .world.locked .flag { background: #d8d8d8; color: var(--muted); }
.world.locked { opacity: .75; background: repeating-linear-gradient(45deg, #fff 0 10px, #f4f4f4 10px 20px); }
.world h3 { margin: 4px 0 8px; font-size: 0.66rem; }
.world p { margin: 0; font-size: 0.95rem; }

/* Zielflaggen-Trenner */
.flagline { height: 16px; margin: 0 0 44px; background: var(--checker); background-size: 16px 16px; border: 3px solid var(--ink); box-shadow: 4px 4px 0 var(--ink); }

/* Zeitstrahl mit Münzen */
.timeline { list-style: none; padding: 0; margin: 1rem 0; border-left: 5px solid var(--ink); }
.timeline li { position: relative; padding: 0 0 18px 30px; }
.timeline li::before { content: ""; position: absolute; left: -15px; top: 2px; width: 24px; height: 24px; background: url("img/px/coin.svg") no-repeat center / contain; }
.timeline li.bad::before { background-image: url("img/px/banana.svg"); }
.timeline li.good::before { background-image: url("img/px/mushroom.svg"); }
.timeline time { font-size: 0.55rem; color: var(--muted); display: block; margin-bottom: 4px; }

/* Bilder */
figure { margin: 1.2rem 0 1.6rem; }
figure.shot img { border: 3px solid var(--ink); border-radius: var(--radius); box-shadow: var(--shadow); background: #fff; }
figure.video video { display: block; width: 100%; height: auto; border: 3px solid var(--ink); border-radius: var(--radius); box-shadow: var(--shadow); background: #000; image-rendering: pixelated; }
figcaption { font-size: 0.9rem; color: var(--muted); margin-top: 10px; }
.gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; margin: 1.2rem 0 1.6rem; }
.gallery figure { margin: 0; }
.arch { width: 100%; height: auto; }

/* Weiter-Button (Turbo-Feld) und Fußzeile (Ziel, Podest) */
.next { background: var(--paper); padding: 10px 0 48px; text-align: center; }
.btn-boost { display: inline-block; font-size: 0.7rem; color: #fff; text-decoration: none; padding: 18px 26px; border: 3px solid var(--ink); box-shadow: 6px 6px 0 var(--ink); text-shadow: 2px 2px 0 var(--ink); transition: transform .1s, box-shadow .1s; background: var(--boost) repeating-linear-gradient(135deg, rgba(255,255,255,.22) 0 12px, transparent 12px 24px); }
.btn-boost:hover { transform: translate(-2px, -2px); box-shadow: 8px 8px 0 var(--ink); background-color: #ffa040; }
footer { background: var(--sky); color: #ddd; font-size: 0.9rem; }
.podium-row { position: relative; height: 170px; display: flex; align-items: flex-end; justify-content: space-between; }
.podium { display: flex; align-items: flex-end; gap: 0; font-family: var(--pixel); color: #fff; text-shadow: 2px 2px 0 var(--ink); }
.step { width: 86px; border: 3px solid var(--ink); border-bottom: none; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 8px; padding-bottom: 8px; font-size: .9rem; }
.step img { width: 40px; }
.s1 { height: 112px; background: var(--coin); } .s2 { height: 84px; background: #c0c0c0; } .s3 { height: 64px; background: #cd7f32; }
.kart-end { width: 110px; margin-right: 8%; margin-bottom: 6px; }
.finish { height: 40px; background: var(--checker); background-size: 20px 20px; border-top: 3px solid var(--ink); border-bottom: 4px solid var(--ink); }
.foot-text { background: var(--ink); padding: 28px 0 60px; }
footer a { color: var(--coin); }
.foot-nav { margin-top: 10px; font-family: var(--pixel); font-size: 0.55rem; line-height: 2.2; }

/* Animationen */
@keyframes drift { from { transform: translateX(0); } to { transform: translateX(calc(100vw + 200px)); } }
@keyframes bump { 0% { transform: translateY(0); } 40% { transform: translateY(-10px); } 100% { transform: translateY(0); } }
@keyframes race { from { transform: translateX(0); } to { transform: translateX(calc(100vw + 300px)); } }
@keyframes bob { 0%, 100% { transform: translateY(0) rotate(-4deg); } 50% { transform: translateY(-8px) rotate(4deg); } }
.bob { animation: bob 2.2s ease-in-out infinite; }
@keyframes spin { 0%, 100% { transform: scaleX(1); } 50% { transform: scaleX(0.15); } }
@keyframes drop { from { transform: translateY(-30px); opacity: 0; } to { transform: none; opacity: 1; } }
.spin { animation: spin 1.6s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .cloud, .spin, .bob, .kart, .lights span, .menu-panel, .callout:hover::before { animation: none !important; } .lights span { background: #2fdc5a; } }

@media (max-width: 640px) {
  body { font-size: 16px; }
  .card { padding: 16px; }
  .callout { padding-left: 66px; } .callout::before { width: 38px; height: 38px; left: 14px; }
  pre { font-size: 0.8em; }
  .hero-in { padding-bottom: 120px; }
  .hill.h2 { display: none; }
  .kart-end { display: none; }
  .step { width: 70px; }
}