:root{
  /* Radienstaffel. Vorher lagen elf verschiedene Werte im Projekt (4, 5, 10,
     12, 14, 16, 18, 20, 22, 24, 28, 50) — das wirkt unruhig, ohne dass man
     sagen kann warum. Vier Stufen plus Pille reichen für alles. */
  --r-xs:6px;      /* Marker, kleine Chips */
  --r-s:14px;      /* Bedienelemente, Felder */
  --r-m:20px;      /* Karten, Panels */
  --r-l:28px;      /* grosse Blöcke */
  --r-pill:999px;  /* Knöpfe, Pillen */
  --font-heading:'Archivo', sans-serif;
  --font-body:'Inter', sans-serif;
  --color-text:#192837;
  --color-accent:#7342E2;
  --color-bg:#F2F2EE;
  --color-line:#DEDDD6;
  --page-bg:#FFFFFF;
  --card-bg:#FFFFFF;
  --header-bg:rgba(255,255,255,0.82);
  --ok:#1E8E5A;
  --warn:#B4740F;
  --shadow:0 2px 20px rgba(25,40,55,0.06);
  --shadow-lift:0 18px 44px rgba(25,40,55,0.13);
}
[data-theme="dark"]{
  --color-text:#EDEDF2;
  --color-accent:#9B7BF5;
  --color-bg:#1B1E29;
  --color-line:#2B2E3A;
  --page-bg:#12141C;
  --card-bg:#1A1D27;
  --header-bg:rgba(18,20,28,0.82);
  --ok:#5BC48C;
  --warn:#E0A94A;
  --shadow:0 2px 20px rgba(0,0,0,0.3);
  --shadow-lift:0 18px 44px rgba(0,0,0,0.45);
}
*{box-sizing:border-box;}
body{
  margin:0; font-family:var(--font-body); color:var(--color-text);
  background:var(--page-bg); line-height:1.6;
  transition:background-color .35s ease, color .35s ease;
}
h1,h2,h3{font-family:var(--font-heading); margin:0; line-height:1.1; letter-spacing:-0.015em;}
p{margin:0;}
a{color:inherit; text-decoration:none;}
button{font-family:inherit; cursor:pointer; border:none;}
.wrap{max-width:1160px; margin:0 auto; padding:0 clamp(20px,4vw,32px);}
a:focus-visible, button:focus-visible, input:focus-visible{outline:2px solid var(--color-accent); outline-offset:3px;}
.visually-hidden{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap;}

.eyebrow{
  font-size:.72rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:var(--color-accent); display:flex; align-items:center; gap:.6rem; margin-bottom:.9rem;
}
.eyebrow::before{content:''; width:26px; height:1px; background:var(--color-accent);}

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  border-radius:var(--r-pill); padding:12px 22px; font-size:.95rem; font-weight:600;
  transition:transform .2s, filter .2s, box-shadow .2s;
}
.btn-accent{background:var(--color-accent); color:#fff; box-shadow:0 4px 24px rgba(115,66,226,.28);}
.btn-accent:hover{transform:translateY(-2px) scale(1.02); filter:brightness(1.08);}
.btn-accent:active{transform:scale(.97);}
.btn-light{background:var(--color-bg); color:var(--color-text); border:1px solid var(--color-line);}
.btn-light:hover{transform:translateY(-2px);}
.btn-block{width:100%;}

/* ---------- Kopfzeile ---------- */
header{
  position:sticky; top:0; z-index:50; background:var(--header-bg);
  backdrop-filter:blur(14px); border-bottom:1px solid var(--color-line);
}
.nav-inner{display:flex; align-items:center; justify-content:space-between; padding:14px 0; gap:1rem;}
.brand{display:flex; align-items:center; gap:10px;}
.logomark{width:34px; height:34px; color:var(--color-text); flex-shrink:0;}
.logomark circle, .logomark polygon{fill:none; stroke:currentColor; stroke-linejoin:round;}
.brand-name{font-family:var(--font-heading); font-weight:700; font-size:1.1rem; letter-spacing:.03em;}
.nav-actions{display:flex; align-items:center; gap:10px;}
.theme-toggle{
  width:38px; height:38px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center;
  background:transparent; border:1px solid var(--color-line); color:var(--color-text);
  transition:background-color .2s, transform .3s;
}
.theme-toggle:hover{background:var(--color-bg); transform:rotate(18deg);}
.theme-toggle svg{width:17px; height:17px;}
.theme-toggle .icon-moon{display:none;}
[data-theme="dark"] .theme-toggle .icon-sun{display:none;}
[data-theme="dark"] .theme-toggle .icon-moon{display:block;}

/* ---------- Demo-Hinweis ---------- */
.demo-banner{
  background:rgba(180,116,15,.10); border-bottom:1px solid rgba(180,116,15,.3);
  color:var(--warn); font-size:.85rem; padding:.7rem 0;
}
.demo-banner strong{font-weight:700;}

/* ---------- Login ---------- */
.auth{min-height:calc(100vh - 140px); display:flex; align-items:center; padding:3rem 0;}
.auth-grid{display:grid; grid-template-columns:1fr 1fr; gap:3rem; align-items:center; width:100%;}
.auth-card{
  background:var(--card-bg); border:1px solid var(--color-line); border-radius:var(--r-m);
  padding:clamp(1.8rem,4vw,2.6rem); box-shadow:var(--shadow); max-width:460px; width:100%;
}
.auth-side h1{font-size:clamp(1.9rem,3.6vw,2.7rem); margin-bottom:1rem;}
.auth-side p{opacity:.72; max-width:44ch;}
.auth-perks{list-style:none; margin:2rem 0 0; padding:0; display:flex; flex-direction:column; gap:.8rem;}
.auth-perks li{display:flex; gap:.7rem; align-items:flex-start; font-size:.95rem; opacity:.8;}
.auth-perks svg{width:17px; height:17px; color:var(--color-accent); flex-shrink:0; margin-top:4px;}

.tabs{display:flex; gap:.4rem; background:var(--color-bg); padding:.3rem; border-radius:var(--r-pill); margin-bottom:1.6rem;}
.tab{
  flex:1; padding:.6rem; border-radius:var(--r-pill); background:transparent; color:var(--color-text);
  font-size:.9rem; font-weight:600; opacity:.6; transition:all .25s;
}
.tab[aria-selected="true"]{background:var(--card-bg); opacity:1; box-shadow:var(--shadow);}

.field{margin-bottom:1rem;}
.field label{display:block; font-size:.78rem; letter-spacing:.06em; text-transform:uppercase; opacity:.6; margin-bottom:.4rem;}
.field input{
  width:100%; padding:.85rem 1rem; border-radius:var(--r-s); font-family:inherit; font-size:.95rem;
  background:var(--color-bg); border:1px solid var(--color-line); color:var(--color-text);
  transition:border-color .2s;
}
.field input:focus{border-color:var(--color-accent);}
.field input.error{border-color:#D14343;}
.form-msg{font-size:.88rem; min-height:1.3rem; margin-bottom:.6rem;}
.form-msg.err{color:#D14343;}
.form-msg.ok{color:var(--ok);}
.hint{font-size:.82rem; opacity:.6; margin-top:1.2rem; text-align:center;}
.hint code{background:var(--color-bg); padding:.15rem .4rem; border-radius:var(--r-xs); font-size:.95em;}

@media (max-width:880px){
  .auth-grid{grid-template-columns:1fr; gap:2rem;}
  .auth-side{order:-1;}
}

/* ---------- Dashboard ---------- */
.dash{padding:2.5rem 0 4rem;}
.dash-head{display:flex; justify-content:space-between; align-items:flex-end; gap:1.5rem; flex-wrap:wrap; margin-bottom:2.2rem;}
.dash-head h1{font-size:clamp(1.7rem,3.2vw,2.3rem);}
.dash-head p{opacity:.65; margin-top:.4rem;}

.stat-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:1.2rem; margin-bottom:2.5rem;}
.card{
  background:var(--card-bg); border:1px solid var(--color-line); border-radius:var(--r-m);
  padding:1.8rem; transition:transform .35s, box-shadow .35s;
}
.card:hover{transform:translateY(-3px); box-shadow:var(--shadow-lift);}
.card-label{font-size:.75rem; letter-spacing:.12em; text-transform:uppercase; opacity:.55; margin-bottom:.7rem;}
.card-big{font-family:var(--font-heading); font-size:2.1rem; font-weight:700; line-height:1;}
.card-sub{font-size:.88rem; opacity:.6; margin-top:.5rem;}

.level-row{display:flex; align-items:baseline; gap:.7rem; margin-bottom:.4rem;}
.level-badge{
  display:inline-flex; align-items:center; gap:.4rem; background:var(--color-accent); color:#fff;
  font-size:.72rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  padding:.25rem .7rem; border-radius:var(--r-pill);
}
.bar{height:9px; background:var(--color-bg); border-radius:var(--r-pill); overflow:hidden; margin-top:1rem;}
.bar span{display:block; height:100%; background:var(--color-accent); border-radius:var(--r-pill); transition:width .8s cubic-bezier(.22,1,.36,1);}
.bar-meta{display:flex; justify-content:space-between; font-size:.8rem; opacity:.6; margin-top:.5rem;}

.section-title{font-size:1.3rem; margin-bottom:1.2rem;}
.products{display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:1.2rem; margin-bottom:2.5rem;}
.product{background:var(--card-bg); border:1px solid var(--color-line); border-radius:var(--r-m); padding:1.6rem;}
.product-top{display:flex; justify-content:space-between; align-items:flex-start; gap:1rem; margin-bottom:.7rem;}
.product h3{font-size:1.1rem;}
.badge{
  font-size:.7rem; font-weight:700; letter-spacing:.07em; text-transform:uppercase;
  padding:.25rem .6rem; border-radius:var(--r-pill); white-space:nowrap;
}
.badge-live{background:rgba(30,142,90,.14); color:var(--ok);}
.badge-wip {background:rgba(180,116,15,.14); color:var(--warn);}
.product-meta{font-size:.82rem; opacity:.55; margin-bottom:.7rem;}
.product p{font-size:.92rem; opacity:.72;}

.empty{
  border:1px dashed var(--color-line); border-radius:var(--r-m); padding:2.5rem;
  text-align:center; opacity:.65; font-size:.95rem;
}

.two-col{display:grid; grid-template-columns:1.3fr 1fr; gap:1.5rem;}
@media (max-width:900px){
  .stat-grid{grid-template-columns:1fr;}
  .two-col{grid-template-columns:1fr;}
}

.timeline{list-style:none; margin:0; padding:0;}
.timeline li{display:flex; gap:1rem; padding:.9rem 0; border-bottom:1px solid var(--color-line);}
.timeline li:last-child{border-bottom:none;}
.timeline .when{font-size:.8rem; opacity:.5; min-width:84px;}
.timeline .what{flex:1; font-size:.93rem;}
.timeline .gain{font-size:.82rem; font-weight:600; color:var(--color-accent); white-space:nowrap;}

.levels{list-style:none; margin:0; padding:0;}
.levels li{display:flex; gap:1rem; align-items:center; padding:.75rem 0; border-bottom:1px solid var(--color-line); font-size:.9rem;}
.levels li:last-child{border-bottom:none;}
.levels .lv{
  width:30px; height:30px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center;
  font-size:.78rem; font-weight:700; border:1px solid var(--color-line); flex-shrink:0;
}
.levels li.reached .lv{background:var(--color-accent); color:#fff; border-color:var(--color-accent);}
.levels li.reached{opacity:1;}
.levels li{opacity:.5;}
.levels .lv-name{font-weight:600; min-width:130px;}
.levels .lv-perk{opacity:.75; font-size:.86rem;}

footer{padding:2.2rem 0; border-top:1px solid var(--color-line); font-size:.85rem; opacity:.65;}
.footer-inner{display:flex; justify-content:space-between; flex-wrap:wrap; gap:1rem;}