:root{
    --bg:#f6f3ee; --ink:#171512; --muted:#4d483f; --line:#dcd6cb; --card:#fbf9f5; --accent:#a8442a;
    --serif:'Fraunces', Georgia, serif; --sans:'Inter', system-ui, sans-serif;
  }
  @media (prefers-color-scheme: dark){
    :root{ --bg:#12110f; --ink:#efeae1; --muted:#c4bdb0; --line:#2b2824; --card:#191714; --accent:#d9805f; }
  }
  *{box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);font-weight:300;line-height:1.6;-webkit-font-smoothing:antialiased}
  a{color:inherit;text-decoration:none}
  .wrap{max-width:1080px;margin:0 auto;padding:0 24px}

  header.top{display:flex;justify-content:space-between;align-items:center;padding:28px 0}
  .brand{font-family:var(--serif);font-size:1.15rem;letter-spacing:.01em}
  .brand span{color:var(--accent)}
  nav a{font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-left:22px;transition:color .2s}
  nav a:hover{color:var(--ink)}

  .hero{padding:11vh 0 9vh;border-bottom:1px solid var(--line)}
  .kicker{font-size:.75rem;letter-spacing:.22em;text-transform:uppercase;color:var(--accent);margin-bottom:22px}
  h1{font-family:var(--serif);font-weight:300;font-size:clamp(2.6rem,7.5vw,5.6rem);line-height:1.02;letter-spacing:-.02em;margin:0 0 28px;max-width:14ch}
  h1 em{font-style:italic;color:var(--accent)}
  .lead{max-width:46ch;color:var(--muted);font-size:1.08rem}

  section{padding:72px 0 8px}
  .sec-head{display:flex;align-items:baseline;gap:18px;margin-bottom:28px}
  .sec-head h2{font-family:var(--serif);font-weight:400;font-size:1.7rem;margin:0}
  .sec-head .rule{flex:1;height:1px;background:var(--line)}
  .sec-head .no{font-size:.75rem;letter-spacing:.2em;color:var(--muted)}

  .grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:18px}
  .card{display:flex;flex-direction:column;min-height:260px;background:var(--card);border:1px solid var(--line);border-radius:4px;overflow:hidden;transition:transform .25s, border-color .25s, box-shadow .25s}
  .card:hover{transform:translateY(-3px);border-color:var(--b, var(--accent));box-shadow:0 14px 30px -18px var(--a, #000)}
  .art{height:92px;background:var(--a, var(--line));overflow:hidden}
  .art svg{display:block;width:100%;height:100%;transition:transform .7s cubic-bezier(.2,.7,.2,1)}
  .card:hover .art svg{transform:scale(1.07)}
  .body{flex:1;display:flex;flex-direction:column;justify-content:space-between;gap:20px;padding:20px 22px 20px}
  .card h3{font-family:var(--serif);font-weight:400;font-size:1.3rem;margin:0 0 6px}
  .card p{margin:0;color:var(--muted);font-size:.92rem}
  .meta{display:flex;justify-content:space-between;align-items:center;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
  .meta .arrow{color:var(--accent);font-size:1rem;letter-spacing:0;transition:transform .25s}
  .card:hover .arrow{transform:translateX(4px)}

  footer{margin-top:88px;padding:36px 0 56px;border-top:1px solid var(--line);color:var(--muted);font-size:.82rem;display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px}

  /* Animation der Kachel-Grafiken: nur transform/opacity, sanft und rhythmisch */
  .art svg *{transform-box:fill-box;transform-origin:center}
  .art svg .swing,.art svg .spin{transform-box:view-box}
  .eq{transform-origin:50% 100%;animation:eq var(--t,1s) ease-in-out var(--d,0s) infinite alternate}
  @keyframes eq{from{transform:scaleY(.45)}to{transform:scaleY(1.08)}}
  .pulse{animation:pulse var(--t,3s) ease-in-out var(--d,0s) infinite alternate}
  @keyframes pulse{from{transform:scale(.92)}to{transform:scale(1.08)}}
  .slide{animation:slide var(--t,6s) ease-in-out var(--d,0s) infinite alternate}
  @keyframes slide{from{transform:translateX(calc(var(--x,12px)*-1))}to{transform:translateX(var(--x,12px))}}
  .flick{animation:flick var(--t,2.5s) ease-in-out var(--d,0s) infinite alternate}
  @keyframes flick{from{opacity:calc(var(--o,1)*var(--m,.4))}to{opacity:var(--o,1)}}
  .rise{animation:rise var(--t,3s) ease-in-out var(--d,0s) infinite alternate}
  @keyframes rise{from{transform:translateY(0)}to{transform:translateY(var(--y,-8px))}}
  .float{animation:float var(--t,5s) ease-in-out var(--d,0s) infinite alternate}
  @keyframes float{from{transform:translate(calc(var(--x,8px)*-1),calc(var(--y,8px)*-1)) rotate(calc(var(--r,0deg)*-1))}to{transform:translate(var(--x,8px),var(--y,8px)) rotate(var(--r,0deg))}}
  .spin{animation:spin 18s linear infinite}
  @keyframes spin{to{transform:rotate(360deg)}}
  .card:hover .spin{animation-duration:6s}
  .wave1{animation:wave1 6s linear infinite}
  .wave2{animation:wave2 4.5s linear infinite}
  @keyframes wave1{to{transform:translateX(-150px)}}
  @keyframes wave2{to{transform:translateX(-100px)}}
  .ripple{animation:ripple var(--t,4.5s) ease-out var(--d,0s) infinite}
  @keyframes ripple{from{transform:scale(.15);opacity:.8}to{transform:scale(1);opacity:0}}
  .ember{animation:ember var(--t,4s) ease-in var(--d,0s) infinite}
  @keyframes ember{from{transform:translateY(8px);opacity:0}25%{opacity:1}to{transform:translateY(-30px);opacity:0}}
  .swing{animation:swing var(--t,4s) ease-in-out var(--d,0s) infinite alternate}
  @keyframes swing{from{transform:rotate(-7deg)}to{transform:rotate(7deg)}}
  .footer-credit a{border-bottom:1px solid var(--line);transition:color .2s,border-color .2s}
  .footer-credit a:hover{color:var(--ink);border-color:var(--accent)}
  @media (max-width:560px){ nav{display:none} .lang{margin-left:0} .hero{padding:8vh 0 7vh} }
  @media (prefers-reduced-motion: reduce){ .art svg *{animation:none !important} .card, .art svg{transition:none} .card:hover .art svg{transform:none} }

  .lang{margin-left:26px;font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);white-space:nowrap}
  .lang a{margin-left:0;padding:2px 0;border-bottom:1px solid transparent;transition:color .2s,border-color .2s}
  .lang a:hover{color:var(--ink)}
  .lang a[aria-current]{color:var(--ink);border-color:var(--accent)}
  .lang i{font-style:normal;opacity:.5;margin:0 6px}
  .right{display:flex;align-items:center}

/* ---------- Farbigkeit: Montreux-inspiriert (fliessende Verläufe, Wellenbänder) ---------- */
:root{
  --m1:#ff3d81; --m2:#ff8a1f; --m3:#ffc83d; --m4:#19b5a5; --m5:#7a4dff; --m6:#2f7bff;
  --g1:#d6246a; --g2:#e8670c; --g3:#b97d00;
  --blob:.5;
}
@media (prefers-color-scheme: dark){
  :root{ --g1:#ff6aa0; --g2:#ffa04a; --g3:#ffd966; --blob:.34; }
}
body{position:relative;overflow-x:clip}
.aurora{position:absolute;inset:0 0 auto 0;height:min(125vh,1000px);overflow:hidden;z-index:-1;pointer-events:none;
  -webkit-mask-image:linear-gradient(#000 60%,transparent);mask-image:linear-gradient(#000 60%,transparent)}
.blob{position:absolute;border-radius:50%;filter:blur(80px);opacity:var(--blob);will-change:transform;animation:drift var(--t,26s) ease-in-out var(--d,0s) infinite alternate}
.b1{width:46vw;height:46vw;max-width:640px;max-height:640px;left:-8%;top:-12%;background:var(--m1);--t:28s}
.b2{width:40vw;height:40vw;max-width:560px;max-height:560px;right:-6%;top:-8%;background:var(--m3);--t:32s;--d:-8s}
.b3{width:34vw;height:34vw;max-width:480px;max-height:480px;left:34%;top:18%;background:var(--m4);--t:36s;--d:-14s}
.b4{width:36vw;height:36vw;max-width:520px;max-height:520px;right:8%;top:30%;background:var(--m5);--t:30s;--d:-4s;opacity:calc(var(--blob)*.8)}
.b5{width:30vw;height:30vw;max-width:420px;max-height:420px;left:6%;top:40%;background:var(--m2);--t:34s;--d:-20s;opacity:calc(var(--blob)*.8)}
@keyframes drift{from{transform:translate(-4vw,-3vh) scale(.95)}to{transform:translate(5vw,4vh) scale(1.08)}}

.ribbons{position:absolute;left:50%;margin-left:-50vw;bottom:0;width:100vw;height:150px;opacity:.6;z-index:-1}
.rb path{fill:none;stroke-width:3;stroke-linecap:round}
.rb{animation:flow var(--t,36s) linear infinite}
.r1{--t:42s}.r2{--t:56s;animation-direction:reverse}.r3{--t:70s}.r4{--t:48s}
@keyframes flow{to{transform:translateX(-600px)}}

h1 em{background:linear-gradient(95deg,var(--g1),var(--g2) 55%,var(--g3));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;padding-right:.06em}
.kicker{color:var(--g1);font-weight:500}
.hero{position:relative;border-bottom:0;padding-bottom:190px}

section{position:relative}
#clubs{--s1:var(--m1);--s2:var(--m2)}
#sessions{--s1:var(--m4);--s2:var(--m6)}
#festivals{--s1:var(--m5);--s2:var(--m1)}
#umland{--s1:var(--m6);--s2:var(--m3)}
section::before{content:"";position:absolute;z-index:-1;right:-14%;top:30px;width:min(520px,70vw);height:min(520px,70vw);border-radius:50%;
  background:radial-gradient(circle,var(--s1),transparent 68%);opacity:.14;filter:blur(24px);pointer-events:none}
section:nth-of-type(even)::before{right:auto;left:-16%}
.sec-head .no{color:var(--s1);font-weight:500}
.sec-head .rule{background:linear-gradient(90deg,var(--s1),var(--s2) 40%,transparent)}
.sec-head h2{position:relative}
.card{box-shadow:0 1px 0 rgba(0,0,0,.02),0 10px 28px -22px var(--a,#000)}

.lake{display:block;width:100%;height:60px;margin-top:72px;opacity:.7}
.lake .rb path{stroke-width:2.2}
footer{margin-top:0;border-top:0}

@media (prefers-reduced-motion: reduce){
  .blob,.rb{animation:none !important}
}