:root{
  --bg:#0e0e0f;
  --panel:#231915;
  --panel-2:#2c201b;
  --text:#eee;
  --muted:#cbb096;
  --gold:#d6b37f;
  --accent:#b33a3a;
  --shadow:rgba(0,0,0,.65);
  --card-w:380px;
  --media-max:500px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif}

/* ===== HERO ===== */
.hero{
  position:relative;min-height:56vh;display:grid;place-items:center;
  background:
    linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.85)),
    url('https://www.bluesfestival.ch/templates/bluesfestival/images/header.jpg') center/cover no-repeat;
}
.hero__veil{position:absolute;inset:0;background:radial-gradient(80% 60% at 50% 20%, transparent, rgba(0,0,0,.6))}
.hero__content{position:relative;text-align:center;padding:2rem}
.hero h1{margin:0 0 .25rem;font-weight:800;letter-spacing:.02em;color:var(--gold);
  text-shadow:0 10px 30px var(--shadow);font-size:clamp(1.8rem,2.6vw,3rem)}
.subtitle{margin:.25rem 0 1rem;color:var(--muted)}
.btn{border:none;padding:.85rem 1.25rem;cursor:pointer;
  background:linear-gradient(135deg,#8f2a2a,var(--accent));color:#fff;border-radius:999px;font-weight:700;
  box-shadow:0 10px 20px rgba(179,58,58,.35), inset 0 1px 0 rgba(255,255,255,.15)}
.btn:hover{filter:brightness(1.05);transform:translateY(-1px)}
.carpet{position:absolute;left:0;right:0;bottom:0;height:8px;background:linear-gradient(90deg,transparent,var(--accent),transparent);filter:blur(.6px)}

/* ===== TIMELINE ===== */
.timeline-wrap{position:relative;padding:1rem 0 2rem}
.timeline{
  display:flex;gap:28px;padding:24px 6vw 48px;
  overflow-x:auto;overflow-y:hidden;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
}
.timeline::-webkit-scrollbar{height:12px}
.timeline::-webkit-scrollbar-thumb{background:#6b4a3c;border-radius:999px}
.timeline::-webkit-scrollbar-track{background:transparent}

/* Cards */
.year-card{
  scroll-snap-align:start;flex:0 0 var(--card-w);
  background:linear-gradient(180deg,var(--panel),var(--panel-2));
  border:1px solid rgba(214,179,127,.25);
  border-radius:14px;padding:18px;
  box-shadow:0 8px 30px var(--shadow);
  transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.year-card:hover{transform:translateY(-6px) scale(1.02);box-shadow:0 16px 48px rgba(0,0,0,.8);border-color:rgba(214,179,127,.6)}
.year-card__year{margin:0 0 .35rem;color:var(--gold);font-weight:900;font-size:1.35rem}
.year-card__title{margin:0 0 .25rem;color:var(--muted);font-weight:700}
.year-card__text{margin:0 0 .5rem;color:#f0e7dd;font-size:.95rem;line-height:1.45}

/* Media */
.media{display:grid;gap:10px;margin:.5rem 0}
.media img{
  width:100%;height:auto;object-fit:cover;border-radius:10px;border:1px solid rgba(255,255,255,.08);
  max-width:min(100%,var(--media-max));max-height:var(--media-max)
}
.media iframe{
  width:100%;aspect-ratio:16/9;border:0;border-radius:10px;
  max-width:min(100%,var(--media-max))
}

/* Slideshow */
.slideshow{display:flex;gap:8px;overflow-x:auto;padding-bottom:2px}
.slideshow img{width:110px;height:110px;object-fit:cover;border-radius:8px;cursor:pointer;
  border:2px solid rgba(255,255,255,.08);transition:border-color .2s,transform .2s}
.slideshow img:hover{border-color:var(--gold);transform:translateY(-2px)}

/* Links */
.year-card__links{display:flex;flex-wrap:wrap;gap:.35rem .6rem;margin-top:.5rem}
.year-card__links a{color:#f0e2cf;text-decoration:none;border-bottom:1px dotted rgba(240,226,207,.35)}
.year-card__links a:hover{color:#fff;border-bottom-color:#fff}

/* Lightbox */
.lightbox{position:fixed;inset:0;background:rgba(0,0,0,.85);display:flex;align-items:center;justify-content:center;z-index:9999;padding:4vmin}
.lightbox img{max-width:92vw;max-height:92vh;border-radius:10px}

/* Year nav chips */
.year-nav{position:sticky;bottom:8px;display:flex;gap:8px;flex-wrap:wrap;padding:8px 6vw;margin-top:10px}
.year-chip{font-size:.9rem;color:#efdcc6;background:#1a1412;border:1px solid #4e3a32;border-radius:999px;
  padding:6px 10px;cursor:pointer;transition:background .2s,transform .2s}
.year-chip:hover{background:#2a1e19;transform:translateY(-1px)}
.year-chip.active{background:#3a2a24;border-color:var(--gold);color:#fff}

/* Pfeile (mit SVG-Chevrons) */
.timeline-nav{pointer-events:none}
.arrow{
  pointer-events:auto;position:fixed;top:50%;transform:translateY(-50%);
  background:rgba(36,25,21,.88);backdrop-filter: blur(2px);
  border:1px solid #4e3a32;border-radius:50%;color:var(--gold);
  width:52px;height:52px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 6px 18px rgba(0,0,0,.6);
  transition:background .2s,transform .2s,color .2s;
  z-index:99
}
.arrow .chev{display:block}
.arrow:hover{background:#2a1e19;color:#fff;transform:translateY(-50%) scale(1.07)}
.arrow.left{left:14px}
.arrow.right{right:14px}

/* Mobile: vertikal, keine Pfeile */
@media (max-width:900px){
  .timeline{display:block;overflow-x:hidden;overflow-y:auto;scroll-snap-type:y proximity;padding:16px 5vw 32px}
  .year-card{width:100%;max-width:720px;margin:0 auto 18px;scroll-snap-align:start}
  .year-nav{position:static;justify-content:center}
  .timeline-nav{display:none}
}

/* Footer zentrieren */
.footer{
  display: flex;
  justify-content: center;   /* horizontal zentriert */
  align-items: center;       /* vertikal (falls mehrzeilig) */
  text-align: center;        /* text in der mitte */
  padding: 18px 22px;
  border-top: 1px solid #1d1411;
}
.footer small{
  color: var(--muted);
  line-height: 1.4;
}