:root{
      --bg:#0a0b10;          /* stage black */
      --bg2:#0d0f17;         /* deep panel */
      --glass:rgba(255,255,255,.04);
      --stroke:rgba(255,255,255,.10);
      --text:#e7e9ee;        /* main */
      --muted:#9aa0a6;       /* secondary */
      --pink:#ff5ab7;        /* logo pink */
      --yellow:#ffd84e;      /* logo yellow */
      --teal:#00d1c7;        /* splash */
      --grad:linear-gradient(135deg,var(--pink),var(--yellow));
      --rad:20px;
      --shadow:0 10px 30px rgba(0,0,0,.5);
    }
    *{box-sizing:border-box}
    html,body{background:var(--bg); color:var(--text); font-family: Outfit, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Helvetica Neue", sans-serif; scroll-behavior:smooth}

    /* NAV */
    .navbar{background: rgba(6,7,12,.55); backdrop-filter: blur(10px); border-bottom:1px solid var(--stroke);} 
    .navbar .nav-link{color:#dfe3eb; font-weight:600; letter-spacing:.02em}
    .navbar .nav-link:hover,.navbar .nav-link.active{color:#fff}
    .nav-cta{--bs-btn-border-radius:999px; font-weight:800; text-transform:uppercase; letter-spacing:.04em; background:var(--grad); border:0; box-shadow:0 0 18px rgba(255,216,78,.25)}

    /* HERO */
    .hero{position:relative; min-height:92vh; display:grid; place-items:center; padding-top:76px; overflow:hidden}
    .hero::before{content:""; position:absolute; inset:-20%; background:
      radial-gradient(60% 60% at 60% 40%, rgba(255,216,78,.09), transparent 60%),
      radial-gradient(50% 50% at 35% 65%, rgba(255,90,183,.10), transparent 60%),
      radial-gradient(40% 40% at 55% 70%, rgba(0,209,199,.12), transparent 60%);
      filter:blur(40px);}
    .glass{background:var(--glass); border:1px solid var(--stroke); border-radius:var(--rad); box-shadow:var(--shadow)}

    .hero-wrap{display:grid; grid-template-columns: 1.1fr .9fr; gap:36px; align-items:center}
    @media (max-width: 992px){.hero-wrap{grid-template-columns:1fr}}

    .logo-card{padding:32px; text-align:center}
    .logo-text{font-family: "Space Grotesk"; font-weight:800; line-height:.9; letter-spacing:.5px;}
    .logo-text span.pink{color:var(--pink); text-shadow:0 0 22px rgba(255,90,183,.55)}
    .logo-text span.yellow{color:var(--yellow); text-shadow:0 0 22px rgba(255,216,78,.55)}
    .logo-big{font-size: clamp(58px, 12vw, 140px)}
    .sparkle{position:absolute; inset:0; pointer-events:none}
    .sparkle i{position:absolute; width:12px; height:30px; background:linear-gradient(var(--teal), transparent); opacity:.55; border-radius:8px}

    .pitch-card{padding:32px}
    .kicker{font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--muted)}
    .hero-title{font-size: clamp(26px, 5vw, 40px); font-weight:800}
    .hero-sub{color:#c4c9d0}
    .btn-ghost{border:1px solid var(--stroke); color:#fff}
    .btn-ghost:hover{border-color:#fff; background:rgba(255,255,255,.06)}

    section{padding:96px 0}
    .title{font-weight:800; letter-spacing:.02em; text-transform:uppercase}
    .sub{color:var(--muted)}
    .underline{height:3px; width:88px; background:var(--grad); border-radius:999px}

    /* MEMBERS */
    .member{overflow:hidden; position:relative}
    .member img{width:100%; aspect-ratio:4/5; object-fit:cover; border-radius:16px;}
    .member .meta{position:absolute; inset:auto 12px 12px 12px; background:rgba(10,11,16,.6); backdrop-filter: blur(6px); border:1px solid var(--stroke); border-radius:14px; padding:10px 14px}
    .badge-role{background:var(--grad); border:0; font-weight:700}

    /* SETLIST */
    .setlist .song{display:flex; align-items:center; gap:10px; padding:10px 14px; border:1px solid var(--stroke); border-radius:999px; margin:6px 6px; background:rgba(255,255,255,.02)}
    /* STAEDTE */
    .staedte .stadt{display:flex; align-items:center; gap:10px; padding:10px 14px; border:1px solid var(--stroke); border-radius:999px; margin:6px 6px; background:rgba(255,255,255,.02);--bs-link-color:#fff;--bs-link-hover-color:#fff;}
    /* MEDIA */
    .media-card{overflow:hidden}
    .media-card .ratio{border-radius:16px}

    /* GIGS */
    .gigs .gig{display:grid; grid-template-columns:140px 1fr 1.2fr 1fr 140px; gap:14px; padding:16px; border-bottom:1px solid var(--stroke)}
    @media (max-width: 992px){.gigs .gig{grid-template-columns:120px 1fr; grid-auto-rows:auto}}

    /* FOOTER */
    footer{background:var(--bg2); border-top:1px solid var(--stroke)}

    /* subtle reveal */
    [data-ani]{opacity:0; transform: translateY(14px); transition: .6s ease}
    [data-ani].seen{opacity:1; transform:none}
    
    /* Städte-Links IMMER weiß halten */
.staedte .stadt { 
  color:#fff;           /* Basisfarbe für den Wrapper */
}

.staedte .stadt a{
  color:inherit;        /* Link erbt #fff vom Wrapper */
  text-decoration:none;
}

.staedte .stadt a:hover,
.staedte .stadt a:active,
.staedte .stadt a:focus{
  color:inherit;        /* bleibt weiß */
  text-decoration:underline;
}

/* falls Bootstrap-Variablen dazwischenfunken */
#staedte{
  --bs-link-color:#fff;
  --bs-link-hover-color:#fff;
}