@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800&display=swap');

:root {
  --bg-1: #0b1222;
  --bg-2: #172544;
  --ink: #e9edf7;
  --ink-dim: #b7c2da;
  --accent: #4f7cff;
  --accent-strong: #2b57e6;
  --card-bg: rgba(255, 255, 255, 0.06);
  --card-stroke: rgba(255, 255, 255, 0.08);
  --radius: 33px;
  --gap: 18px;
  --shadow: 0 10px 28px rgba(0, 0, 0, 0.35);

  --lang-de: #f6c400;
  --lang-en: #c8102e;
  --lang-multi: #19c37d;
  --arch-x64: #7fc8ff;
  --arch-arm64: #38e08a;
}

html, body { margin: 0; padding: 0; min-height: 100%; width: 100%; }
html { overflow-y: auto; overflow-x: hidden; }
*, *::before, *::after { box-sizing: border-box; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; }

body {
  position: relative;
  color: var(--ink);
  font: 16px/1.5 "Nunito", sans-serif;
  background: radial-gradient(1200px 800px at 10% 10%, #2a3a73 0%, transparent 60%),
              radial-gradient(900px 600px at 85% 15%, #4b2a78 0%, transparent 55%),
              linear-gradient(180deg, var(--bg-1), var(--bg-2));
}

body::before {
  content: ""; position: fixed; inset: -25vmax;
  background: radial-gradient(60vmax 40vmax at var(--x, 60%) var(--y, 40%), rgba(99, 132, 255, 0.15), transparent 60%);
  filter: blur(70px); pointer-events: none; z-index: 0;
}
@media (prefers-reduced-motion: reduce) { body::before { display: none; } }

.shell { position: relative; z-index: 1; max-width: 1280px; margin: clamp(20px, 5vw, 48px) auto; padding: 0 18px 60px; }
.hero { text-align: center; margin-bottom: clamp(18px, 4vw, 36px); }
.hero__title { margin: 0 0 6px; font-weight: 800; font-size: clamp(26px, 4vw, 44px); letter-spacing: .2px; }
.hero__subtitle { margin: 0 0 12px; color: var(--ink-dim); font-size: clamp(14px, 1.8vw, 18px); }

.header-date { position: fixed; top: 20px; right: 30px; color: var(--ink-dim); font-size: 0.8em; font-weight: 500; z-index: 1000; }

.info-button-container { text-align: center; margin: 28px 0 36px; }
.info-button-container .btn { display: inline-flex; align-items: center; gap: 8px; padding: 10px 20px; font-size: 1rem; color: var(--ink-dim); background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.15); border-radius: var(--radius); transition: all 0.2s ease; }
.info-button-container .btn:hover { background: rgba(255, 255, 255, 0.15); transform: scale(1.05); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); }

.category { margin-top: 26px; padding-top: 6px; }
.category__head { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; margin: 0 4px 10px; padding: 0 4px 8px; border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
.category__title { font-size: clamp(18px, 2.5vw, 22px); font-weight: 800; margin: 0; }
.category__hint { margin: 0; color: var(--ink-dim); font-size: 0.95rem; font-weight: 600; }

.grid { display: grid; gap: var(--gap); grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }

.card { position: relative; display: flex; flex-direction: column; background: var(--card-bg); border: 1px solid var(--card-stroke); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
.card:hover { transform: translateY(-4px) scale(1.03); box-shadow: 0 16px 32px rgba(0, 0, 0, 0.28); border-color: rgba(255, 255, 255, 0.2); }

.card__media { position: relative; width: 100%; height: 140px; background: linear-gradient(135deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.06)); overflow: hidden; }
.card__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.card__media::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, var(--accent), var(--accent-strong)); transform: scaleX(0); transform-origin: left; transition: transform 0.3s ease; }
.card:hover .card__media::after { transform: scaleX(1); }

.card__body { flex-grow: 1; display: flex; flex-direction: column; gap: 12px; padding: 16px 14px; text-align: center; }
.card__title { margin: 0; font-size: 1.2rem; font-weight: 800; line-height: 1.25; color: #fff; }
.card__details { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }

.card__badges { position: absolute; top: 10px; left: 10px; right: 10px; display: flex; justify-content: space-between; align-items: center; gap: 8px; pointer-events: none; }
.badge { display: inline-flex; align-items: center; padding: 4px 10px; font-size: 0.75rem; font-weight: 900; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.18); backdrop-filter: blur(6px); box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8); color: #fff; }
.badge--lang { background: rgba(20, 24, 40, 0.7); border-color: rgba(255, 255, 255, 0.28); color: #f2f4ff; }
.badge--lang-de { background: var(--lang-de); border-color: #d6aa00; color: #0b1222; text-shadow: none; }
.badge--lang-en { background: var(--lang-en); border-color: #8f0f20; color: #ffffff; }
.badge--lang-multi { background: var(--lang-multi); border-color: #118a57; color: #0b1222; text-shadow: none; }
.badge--arch { background: rgba(10, 30, 80, 0.7); border-color: rgba(160, 180, 255, 0.35); color: #cfe0ff; }
.badge--arch-x64 { background: var(--arch-x64); border-color: #58aee6; color: #0b1222; text-shadow: none; }
.badge--arch-arm64 { background: var(--arch-arm64); border-color: #21b56a; color: #0b1222; text-shadow: none; }

.tag { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 10px; font-size: 0.75rem; font-weight: 700; line-height: 1.3; white-space: nowrap; border: 1px solid transparent; background: rgba(255, 255, 255, 0.08); color: #e9edf7; border-color: rgba(255, 255, 255, 0.15); }
.tag--version { background: rgba(160, 180, 255, 0.12); color: #c7d5ff; border-color: rgba(160, 180, 255, 0.28); }
.tag--type { background: rgba(255, 255, 255, 0.08); color: #e9edf7; border-color: rgba(255, 255, 255, 0.15); }

.btn { --btn-bg: var(--accent); --btn-bg-hover: var(--accent-strong); --btn-ink: #fff; position: relative; display: inline-flex; align-items: center; justify-content: center; padding: 10px 16px; font-weight: 700; text-decoration: none; color: var(--btn-ink); background: var(--btn-bg); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: var(--radius); box-shadow: 0 4px 12px rgba(47, 86, 255, 0.2); overflow: hidden; transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1); }
.btn::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.12) 50%, transparent 100%); transform: translateX(-100%); transition: transform 0.6s ease; }
.btn:hover::after { transform: translateX(100%); }
.btn:hover { background: var(--btn-bg-hover); transform: scale(1.05); box-shadow: 0 8px 20px rgba(47, 86, 255, 0.35); }
.btn--ghost { color: #e9edf7; background: transparent; border: 1px solid rgba(255, 255, 255, 0.25); box-shadow: none; padding: 8px 12px; }
.btn--ghost:hover { background: rgba(255, 255, 255, 0.06); }
.footer-actions { margin-top: 36px; display: flex; justify-content: center; }
.btn--legal { padding: 12px 22px; color: #e9edf7; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.18); box-shadow: none; }
.btn--legal:hover { background: rgba(255, 255, 255, 0.16); color: #fff; transform: scale(1.05); }

.skeleton-bg {
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.03) 25%, rgba(255, 255, 255, 0.08) 50%, rgba(255, 255, 255, 0.03) 75%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.5s infinite linear;
  border-radius: 8px;
}

@keyframes skeleton-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.skeleton-text {
  height: 1em;
  width: 70%;
  margin: 0 auto;
}

.skeleton-title-bar {
  height: 24px;
  width: 200px;
  margin-bottom: 20px;
  border-radius: 6px;
  background: rgba(255,255,255,0.05);
}

.card--skeleton {
  pointer-events: none;
  min-height: 280px;
}

.card--skeleton .card__media {
  background: rgba(255,255,255,0.02);
}

.card--skeleton .card__body {
  gap: 16px;
}