/* ════════════════════════════════════════════════════════════
   DOWNLOAD — nur was diese Seite allein braucht.

   Bis zum 27.08.2026 stand hier ein vollstaendiger Nachbau: eigener
   Token-Block mit festen Hex-Werten, eigene Nav, eigener Sprachwaehler,
   eigener Footer — 138 Zeilen, die es anderswo schon gab. Die Seite laedt
   jetzt bowhuman-tokens.css, bowhuman-components.css und marian.css wie
   jede andere marian-Seite; hier bleibt der Rest.

   Zwei Klassen mussten dabei umbenannt werden: .hero und .hero-badge
   heissen jetzt .dl-hero und .dl-hero-badge. marian.css belegt beide
   Namen fuer den Aufmacher der Startseite, und der sieht anders aus.
   Alle uebrigen Namen der Seite (footer-*, nav-*) meinen dasselbe wie
   dort und erben jetzt absichtlich.
════════════════════════════════════════════════════════════ */

:root{
  /* Zwei Masse, die es als Token nicht gibt. --content-narrow waere 760px,
     die Karten brauchen 880. Ausdruecklich eigene Namen, damit sie die
     geteilten Token nicht ueberschreiben. */
  --dl-narrow: 880px;
  --dl-pad: clamp(20px, 6vw, 80px);
}

/* ── AUFMACHER ── */
.dl-hero{
  background: linear-gradient(135deg, var(--magenta) 0%, var(--mag-dk) 100%);
  padding: 64px var(--dl-pad) 88px; text-align: center; color: #fff;
}
.dl-hero-badge{
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(255,255,255,.15); border-radius: var(--r-full, 999px);
  padding: 4px 16px; font-size: .78rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; margin-bottom: 20px;
}
.dl-hero h1{ font-size: clamp(2rem,5vw,3.2rem); font-weight: 800; margin-bottom: 14px; letter-spacing: -.02em }
.dl-hero p{ font-size: 1.05rem; opacity: .85; max-width: 520px; margin: 0 auto; line-height: 1.7 }
.version-badge{
  display: inline-block; margin-top: 18px;
  background: rgba(255,255,255,.18); border-radius: var(--r-md);
  padding: 5px 16px; font-size: .82rem; font-weight: 600;
}

/* ── DOWNLOAD-KARTEN ── */
.cards-wrap{
  max-width: var(--dl-narrow); margin: -44px auto 0;
  padding: 0 var(--dl-pad) 72px;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(250px,1fr)); gap: 20px;
}
.dl-card{
  background: var(--white); border-radius: var(--r-lg); border: 1px solid var(--border);
  box-shadow: var(--shadow-card); padding: 32px 28px;
  display: flex; flex-direction: column; gap: 14px;
  transition: transform .2s, box-shadow .2s;
}
.dl-card:hover{ transform: translateY(-3px); box-shadow: 0 12px 40px var(--accent-t10) }
.dl-card-icon{ font-size: 2.4rem; color: var(--magenta) }
.dl-card h2{ font-size: 1.25rem; font-weight: 700 }
.dl-card-meta{ font-size: .84rem; color: var(--text-secondary); display: flex; flex-direction: column; gap: 5px }
.dl-card-meta span{ display: flex; align-items: center; gap: 7px }
.dl-btn{
  margin-top: auto; display: flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--magenta); color: var(--accent-on); border: none; border-radius: var(--r-lg);
  padding: 13px 20px; font-size: .97rem; font-weight: 700; cursor: pointer;
  font-family: var(--font-base); text-decoration: none;
  transition: background .2s, transform .15s, box-shadow .2s;
  box-shadow: 0 3px 14px var(--accent-t30);
}
.dl-btn:hover{ background: var(--magenta-dk); transform: scale(1.02); box-shadow: 0 6px 20px var(--accent-t45) }
.dl-note{ font-size: .77rem; color: var(--text-muted); text-align: center; line-height: 1.55 }
.dl-note code{
  font-family: var(--font-mono); font-size: .75rem;
  background: var(--accent-t10); padding: 1px 5px; border-radius: var(--r-sm, 4px);
}

/* ── SYSTEMVORAUSSETZUNGEN ── */
.requirements{ max-width: var(--dl-narrow); margin: 0 auto 80px; padding: 0 var(--dl-pad) }
.req-card{ background: var(--white); border-radius: var(--r-lg); border: 1px solid var(--border); padding: 28px 32px }
.req-card h3{
  font-size: 1rem; font-weight: 700; margin-bottom: 18px;
  display: flex; align-items: center; gap: 8px; color: var(--text-primary);
}
.req-grid{ display: grid; grid-template-columns: repeat(auto-fit, minmax(180px,1fr)); gap: 18px }
.req-item strong{ display: block; font-size: .88rem; margin-bottom: 4px }
.req-item span{ font-size: .83rem; color: var(--text-secondary) }

/* ── FUSSZEILE: die Kurzlinks gibt es nur hier ── */
.footer-sub-links{ display: flex; gap: 4px }
.footer-sub-link{
  font-size: .78rem; color: var(--text-muted-dark-bg); padding: 3px 8px; border-radius: var(--r-sm, 6px);
  transition: color .15s, background .15s;
}
.footer-sub-link:hover{ color: #fff; background: rgba(255,255,255,.07) }

@media (max-width: 760px){
  .cards-wrap{ grid-template-columns: 1fr }
}