/* Stadtshoppen Landing – scoped styles with .ss- prefix */
:root{
  color-scheme: light dark;
}
.ss-landing{
  --bg:#0b1220; --fg:#eaf2ff; --muted:#a8b3cf;
  --brand:#5be7c4; --brand2:#6ea8ff;
  --card:#10192b; --glass:rgba(255,255,255,.06);
  --border:rgba(255,255,255,.12);
  font-family: Manrope, Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  color:var(--fg);
  background:
    radial-gradient(1200px 800px at 80% -10%, rgba(110,168,255,.35), transparent 60%),
    radial-gradient(900px 700px at -10% 20%, rgba(91,231,196,.28), transparent 60%),
    linear-gradient(180deg,#0a0f1b 0%, #0b1220 60%);
  background-attachment: fixed;
  margin:0;
  padding:0;
}
.ss-container{max-width:1200px; margin:0 auto; padding:clamp(16px,2.5vw,28px)}
.ss-header{position:sticky; top:0; backdrop-filter:saturate(180%) blur(10px);
  background:linear-gradient(180deg, rgba(11,18,32,.85), rgba(11,18,32,.55));
  border-bottom:1px solid var(--border); z-index:5}
.ss-nav{display:flex; align-items:center; justify-content:space-between}
.ss-brand{display:flex; align-items:center; gap:12px; font-weight:800; letter-spacing:.2px}
.ss-brand-logo{inline-size:42px; block-size:42px; border-radius:10px; background:conic-gradient(from 260deg, var(--brand), var(--brand2));
  box-shadow:0 0 0 2px rgba(255,255,255,.06) inset}
.ss-brand-sub{font-size:14px; letter-spacing:.3px; color:var(--muted)}
.ss-menu{display:flex; gap:18px}
.ss-menu a{color:var(--fg); text-decoration:none; opacity:.9}
.ss-btn{display:inline-flex; align-items:center; gap:10px; padding:12px 18px; border-radius:14px; font-weight:700; letter-spacing:.3px; border:1px solid var(--border);
  background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.02)); box-shadow:0 8px 24px rgba(0,0,0,.25)}
.ss-btn:hover{transform:translateY(-1px); box-shadow:0 12px 28px rgba(0,0,0,.32)}
.ss-primary{background: linear-gradient(145deg, rgba(91,231,196,.25), rgba(110,168,255,.25)); border-color: rgba(123,190,255,.45)}
.ss-badge{display:inline-flex; align-items:center; gap:8px; padding:8px 12px; border-radius:999px; font-size:13px; color:#00151a; font-weight:800;
  background:linear-gradient(120deg, var(--brand), var(--brand2)); box-shadow:0 10px 30px rgba(110,168,255,.25)}
.ss-hero{display:grid; grid-template-columns: 1.05fr .95fr; gap: clamp(20px, 4vw, 48px); align-items:center; padding: clamp(20px, 4vw, 60px) 0}
.ss-hero h1{font-size: clamp(32px, 5.2vw, 64px); line-height:1.02; margin:10px 0 12px; letter-spacing:-0.02em}
.ss-hero p{font-size: clamp(16px, 1.4vw, 20px); color:var(--muted)}
.ss-gradient{font-weight:800; background:linear-gradient(90deg, var(--brand), var(--brand2)); -webkit-background-clip:text; background-clip:text; color:transparent}
.ss-card{background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03)); border:1px solid var(--border); border-radius:18px; padding:clamp(16px, 2vw, 24px)}
.ss-grid{display:grid; gap:16px}
.ss-cols-3{grid-template-columns:repeat(3,1fr)}
.ss-cols-2{grid-template-columns:repeat(2,1fr)}
@media (max-width:960px){ .ss-hero{grid-template-columns:1fr} .ss-cols-3{grid-template-columns:1fr} .ss-cols-2{grid-template-columns:1fr} }
.ss-kpi{display:flex; gap:14px; align-items:flex-start}
.ss-kpi .icon{inline-size:40px; block-size:40px; border-radius:12px; display:grid; place-items:center; background:linear-gradient(145deg, rgba(91,231,196,.22), rgba(110,168,255,.22)); border:1px solid var(--border)}
.muted{color:var(--muted)}
.ss-countdown{display:flex; gap:14px; margin-top:18px}
.ss-timebox{min-inline-size:86px; text-align:center; padding:14px 10px; border-radius:16px; border:1px solid var(--border); background:var(--glass)}
.ss-timebox .num{font-size:32px; font-weight:900}
.ss-timebox .lbl{font-size:12px; color:var(--muted)}
section{padding: clamp(20px, 4vw, 56px) 0}
h2{font-size: clamp(24px, 2.8vw, 36px); letter-spacing:-.02em; margin:0 0 14px}
.ss-pill{display:inline-block; padding:6px 12px; border-radius:999px; border:1px solid var(--border); color:var(--muted); font-size:12px}
.ss-roadmap{position:relative; padding-left:26px}
.ss-roadmap:before{content:""; position:absolute; inset-inline-start:10px; inset-block: 8px 8px; width:2px; background:linear-gradient(180deg, var(--brand2), transparent)}
.ss-step{position:relative; margin:18px 0; padding-left:8px}
.ss-step:before{content:""; position:absolute; inline-size:14px; block-size:14px; border-radius:50%; border:2px solid var(--brand2); background:var(--card); inset-inline-start:-20px; inset-block-start:4px}
.ss-faq details{border:1px solid var(--border); border-radius:16px; padding:14px 16px; background:var(--glass)}
.ss-faq summary{cursor:pointer; font-weight:800}
.ss-note{font-size:13px; color:var(--muted); margin-top:10px}
.ss-accent{background: linear-gradient(145deg, rgba(91,231,196,.15), rgba(110,168,255,.15)); border:1px dashed rgba(255,255,255,.25)}
.ss-ribbon{position:absolute; right:18px; top:18px; transform:rotate(2deg); padding:8px 12px; border-radius:12px; font-weight:800; background: linear-gradient(120deg, var(--brand), var(--brand2)); color:#00151a}
.ss-logo-wall{display:grid; grid-template-columns: repeat(6, 1fr); gap:10px; margin-top:12px}
.ss-logo-wall .slot{aspect-ratio: 3/2; border-radius:12px; border:1px dashed var(--border); background:rgba(255,255,255,.02); display:grid; place-items:center; color:var(--muted); font-size:12px}
@media (max-width:900px){ .ss-logo-wall{grid-template-columns: repeat(3, 1fr)} }
.ss-hero-img{width:100%; height:auto; border-radius:12px; border:1px solid var(--border)}
.ss-hero-kpis{margin-top:16px}
.ss-cta-row{display:flex; gap:12px; margin-top:22px; flex-wrap:wrap}
.ss-label{display:block; margin-bottom:6px}
.ss-input{width:100%; padding:14px; border-radius:12px; border:1px solid var(--border); background:var(--glass); color:var(--fg)}
.ss-gap-10{gap:10px}
.ss-overflow{position:relative; overflow:hidden}
.ss-footer{border-top:1px solid var(--border); padding:28px 0; color:var(--muted)}
.ss-footer-row{display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap}