@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;   /* gelb */
  --lang-en:#c8102e;   /* rot */
  --lang-multi:#19c37d;/* grün */

  --arch-x64:#7fc8ff;  /* hellblau */
  --arch-arm64:#38e08a;/* grün */
}

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

body {
  margin: 0;
  color: var(--ink);
  font: 16px/1.5 "Nunito", system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial, 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));
  min-height: 100vh;
  width: 100%;
  position: relative;
}

/* Cursor Glow */
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 */
.shell {
  position: relative;
  z-index: 1;
  max-width: 1280px;
  margin: clamp(20px, 5vw, 48px) auto;
  padding: 0 18px 60px;
}

/* Hero */
.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);
}

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

/* Info button */
.info-button-container{
  text-align:center;
  margin: 28px 0 36px;
}
.info-button-container .btn{
  color: var(--ink-dim);
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:10px 20px;
  font-size:1rem;
  background: rgba(255,255,255,0.08);
  border:1px solid rgba(255,255,255,0.15);
  transition: all 0.2s ease;
  border-radius: var(--radius);
}
.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);
}
.info-button-container span{ font-size:1.2em; }

/* Categories */
.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 */
.grid{
  display:grid;
  gap: var(--gap);
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
}

/* Cards */
.card{
  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);
  position:relative;
}
.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);
}

/* Media */
.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); }

/* Badges fixed positions */
.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);
  letter-spacing:0.02em;
  box-shadow: 0 6px 16px rgba(0,0,0,0.35);
  text-shadow: 0 1px 2px rgba(0,0,0,0.8);
  color:#fff;
}

/* Language colors */
.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;
}

/* Architecture badge (right) */
.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;
}

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

/* Tags */
.card__details{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:6px;
}
.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);
}

/* Button */
.btn{
  --btn-bg: var(--accent);
  --btn-bg-hover: var(--accent-strong);
  --btn-ink: #fff;

  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  color: var(--btn-ink);
  background: var(--btn-bg);
  border:1px solid rgba(255,255,255,0.1);
  border-radius: var(--radius);
  padding:10px 16px;
  font-weight:700;
  letter-spacing:0.02em;
  transition: all 0.25s cubic-bezier(0.4,0,0.2,1);
  box-shadow: 0 4px 12px rgba(47,86,255,0.2);
  position:relative;
  overflow:hidden;
}
.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 legal button */
.footer-actions{
  margin-top: 36px;
  display:flex;
  justify-content:center;
}
.btn--legal{
  background: rgba(255,255,255,0.08);
  border:1px solid rgba(255,255,255,0.18);
  color:#e9edf7;
  box-shadow:none;
  padding:12px 22px;
}
.btn--legal:hover{
  background: rgba(255,255,255,0.16);
  color:#fff;
  transform: scale(1.05);
}