:root{
  --bg:#ffffff;
  --fg:#111827;
  --muted:#6b7280;
  --brand:#4a3fb3;         /* Primär (Logo-Farbton) */
  --brand-dark:#362f87;    /* Hover */
  --card:#ffffff;
  --ring:rgba(74,63,179,.18);

  /* Verlauf wie Kursübersicht */
  --grad-a:#5b21b6;        /* lila */
  --grad-b:#3b82f6;        /* blau */
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--fg);font:16px/1.5 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial,"Noto Sans","Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol"}
img{max-width:100%;height:auto;display:block}

.container{max-width:1100px;margin:0 auto;padding:0 16px}

/* ---------- Header mit Verlauf ---------- */
.site-header.gradient{
  background: linear-gradient(135deg,var(--grad-a) 0%, var(--grad-b) 100%);
  color:#fff;
  padding:28px 0 22px 0;
  box-shadow:0 10px 24px rgba(0,0,0,.08);
}
.brand{display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px}
.brand__logo{width:120px;height:auto;filter:drop-shadow(0 4px 10px rgba(0,0,0,.18))}
.brand__title{margin:0;font-size:1.9rem;letter-spacing:.2px}

/* ---------- Rundes, horizontales Menü ---------- */
.main-nav{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;margin-top:14px}
.main-nav a{
  text-decoration:none;color:#fff;background:rgba(255,255,255,.15);
  padding:10px 18px;border-radius:999px;font-weight:700;
  backdrop-filter:saturate(160%) blur(2px);
  box-shadow:0 1px 0 rgba(255,255,255,.2) inset, 0 0 0 0 transparent;
  transition:transform .12s ease, background .2s ease, box-shadow .2s ease;
}
.main-nav a:hover{background:rgba(255,255,255,.25);transform:translateY(-1px)}
.main-nav a:active{transform:translateY(0)}

main.container{padding:28px 0}

/* ---------- Hero / Blöcke ---------- */
.hero{text-align:center;margin:8px 0 22px}
.hero h2{margin:.2rem 0 .4rem;font-size:1.6rem}
.hero p{color:var(--muted);margin:0}

.block{margin:22px 0}
.block h2{margin:0 0 .6rem}

/* ---------- Kursübersicht / Karten ---------- */
.kurs-grid{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.kurs-card{background:var(--card);border-radius:18px;padding:18px;box-shadow:0 10px 24px rgba(20,20,40,.08);transition:transform .2s, box-shadow .2s}
.kurs-card:hover{transform:translateY(-2px);box-shadow:0 16px 32px rgba(20,20,40,.12)}
.kurs-card h3{margin:8px 0}
.kurs-meta{color:var(--muted);margin:.2rem 0 .6rem}
.kurs-thumb{
  max-width:220px;max-height:160px;width:auto;height:auto;margin:0 auto 10px;
  border-radius:14px;background:#f3f4f6;object-fit:contain
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-block;border:0;background:var(--brand);color:#fff;text-decoration:none;
  padding:10px 16px;border-radius:10px;font-weight:700;box-shadow:0 6px 16px var(--ring);
  transition:transform .12s ease, background .2s ease, box-shadow .2s ease
}
.btn:hover{background:var(--brand-dark);transform:translateY(-1px);box-shadow:0 10px 22px var(--ring)}
.btn:active{transform:translateY(0)}

/* ---------- Footer ---------- */
.site-footer {
  border-top:1px solid #eee;
  margin-top:36px;
  padding:18px 0;
  font-size:14px;
  color:var(--muted);
  background:#fafafa;
}
.footer__inner {
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
  gap:10px;
}
.footer-nav a {
  margin-left:14px;
  color:var(--muted);
  text-decoration:none;
}
.footer-nav a:hover { color:var(--fg); }

/* ---------- Cookie Banner ---------- */
#cookie-banner {
display:none;
position:fixed;
bottom:20px;
left:50%;
transform:translateX(-50%);
background:#fff;
padding:16px;
box-shadow:0 8px 24px rgba(0,0,0,.18);
z-index:9999;
width:90%;
max-width:560px;
border-radius:12px;
font-size:14px;
line-height:1.45
}
#cookie-banner .cookie-header {
font-weight:700;
margin-bottom:6px
}
.cookie-actions {
  margin-top:12px;
  display:flex;
  gap:10px;
  justify-content:flex-end;
  flex-wrap:wrap
}
.btn-primary {
  background:linear-gradient(90deg,#2371a3,#7e57c2);
  color:#fff;
  padding:9px 14px;
  border:none;
  border-radius:10px;
  cursor:pointer;
  font-weight:700
}
.btn-secondary {
  background:#e5e7eb;
  color:#111827;
  padding:9px 14px;
  border:none;
  border-radius:10px;
  cursor:pointer
}