/* Gemeinsam für /konto/ und /gruppe/. */
:root{
  --night:#1A1145; --night-2:#241860; --panel:#2E2178; --panel-2:#392A8E;
  --cream:#FFF6E9; --soft:#BCAEEC; --faint:#8377C4;
  --jaune:#FFCE2B; --menthe:#3BE0B0; --corail:#FF5C6E; --lilas:#C293FF;
  --sign:"Bungee","Impact",system-ui,sans-serif;
  --body:"Baloo 2","Trebuchet MS",system-ui,sans-serif;
  --num:"Space Mono",ui-monospace,monospace;
}
*{box-sizing:border-box}
body{
  margin:0; background:var(--night); color:var(--cream);
  font-family:var(--body); font-weight:600; font-size:16px; line-height:1.4;
  -webkit-font-smoothing:antialiased; min-height:100vh;
  background-image:
    radial-gradient(circle at 14% 10%, rgba(194,147,255,.20), transparent 44%),
    radial-gradient(circle at 86% 6%, rgba(75,184,255,.16), transparent 40%);
  background-attachment:fixed;
}
.wrap{max-width:520px; margin:0 auto; padding-inline:18px; padding-block:30px 60px}
.back{color:var(--soft); text-decoration:none; font-size:14px}
@media (hover:hover){.back:hover{color:var(--cream)}}
h1{font-family:var(--sign); font-size:clamp(28px,7vw,40px); line-height:1; margin:18px 0 0; font-weight:400}
h1 span{color:var(--jaune)}
h2{font-family:var(--sign); font-size:17px; font-weight:400; margin:0 0 10px; color:var(--menthe)}
.lede{color:var(--soft); font-size:15px; margin:10px 0 24px; font-weight:500}
.box{background:var(--night-2); border:3px solid var(--panel); border-radius:20px; padding:18px; margin-top:14px}
.box p{margin:0 0 12px; color:var(--soft); font-size:14px; font-weight:500}
.box p:last-child{margin-bottom:0}
.box p b{color:var(--cream)}
label{display:block; font-size:13px; color:var(--soft); margin:10px 0 4px}
input{
  width:100%; font:inherit; font-weight:600; color:var(--cream); background:var(--night);
  border:2px solid var(--panel-2); border-radius:12px; padding:10px 12px;
}
input:focus{outline:none; border-color:var(--menthe)}
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px; font:inherit; font-weight:700;
  background:var(--jaune); color:var(--night); border:0; border-radius:14px; padding:11px 18px;
  cursor:pointer; text-decoration:none; box-shadow:0 4px 0 rgba(0,0,0,.28);
}
.btn.sec{background:var(--panel); color:var(--cream)}
.btn.wide{width:100%}
.btn:disabled{opacity:.5; cursor:default}
.row{display:flex; gap:8px; flex-wrap:wrap; margin-top:14px}
.row .btn{flex:1}
.link{background:none; border:0; color:var(--soft); font:inherit; font-size:13px; text-decoration:underline; text-underline-offset:2px; cursor:pointer; padding:0; margin-top:12px}
.or{display:flex; align-items:center; gap:10px; color:var(--faint); font-size:12px; margin:16px 0 6px}
.or::before,.or::after{content:""; flex:1; height:2px; background:var(--panel)}
.msg{margin-top:12px; font-size:14px; font-weight:600; min-height:1em}
.msg.bad{color:var(--corail)}
.msg.good{color:var(--menthe)}
.choice{display:grid; gap:10px}
.choice button{
  text-align:left; font:inherit; color:var(--cream); background:var(--night); cursor:pointer;
  border:3px solid var(--panel-2); border-radius:16px; padding:14px 16px;
}
.choice button b{display:block; font-family:var(--sign); font-weight:400; font-size:15px; color:var(--jaune)}
.choice button span{font-size:13px; color:var(--soft); font-weight:500}
.choice button[aria-pressed="true"]{border-color:var(--menthe)}
.choice button[aria-pressed="true"] b{color:var(--menthe)}
@media (hover:hover){.choice button:hover{border-color:var(--faint)}}
.who{font-family:var(--num); font-size:12px; color:var(--faint); margin-top:16px; word-break:break-all}
.note{font-size:12.5px; color:var(--faint); margin-top:22px; font-weight:500}
.note b{color:var(--soft)}

/* ---------- Lerngruppe ---------- */
.code{
  font-family:var(--num); font-size:28px; letter-spacing:.18em; color:var(--jaune);
  background:var(--night); border:2px dashed var(--panel-2); border-radius:14px;
  padding:10px 14px; text-align:center; margin:4px 0 10px; user-select:all;
}
.members{list-style:none; margin:0; padding:0; display:grid; gap:8px}
.members li{
  display:flex; align-items:center; flex-wrap:wrap; gap:6px 10px; background:var(--night); border:2px solid var(--panel-2);
  border-radius:14px; padding:9px 12px;
}
.members .nm{flex:1; font-weight:700}
.members .since{font-size:12px; color:var(--faint); font-weight:500}
.badge{font-size:11px; font-family:var(--num); color:var(--night); background:var(--menthe); border-radius:999px; padding:1px 8px}
.badge.me{background:var(--lilas)}
.mini{
  font:inherit; font-size:12.5px; font-weight:700; color:var(--soft); background:var(--panel);
  border:2px solid var(--panel-2); border-radius:10px; padding:4px 10px; cursor:pointer;
}
.mini:disabled{opacity:.5; cursor:default}
@media (hover:hover){.mini:hover:not(:disabled){color:var(--cream); border-color:var(--faint)}}
.vote{background:var(--night); border:2px solid var(--lilas); border-radius:16px; padding:12px 14px; margin-top:10px}
.vote .q{font-weight:700; color:var(--cream); margin:0 0 4px}
.vote .tally{font-size:13px; color:var(--soft); font-weight:500; margin:0}
.vote .tally b{font-family:var(--num); color:var(--jaune)}
.vote .row{margin-top:10px}
.vote .done{font-size:13px; color:var(--menthe); margin:8px 0 0}
.explain{font-size:13px; color:var(--soft); font-weight:500; margin:6px 0 0}
.members .stats{
  flex-basis:100%; display:grid; grid-template-columns:repeat(5, 1fr); gap:6px; margin-top:4px;
}
.members .stats span{background:var(--night-2); border-radius:10px; padding:5px 6px; text-align:center; min-width:0}
.members .stats i{display:block; font-style:normal; font-size:10.5px; color:var(--faint); font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.members .stats b{font-family:var(--num); font-size:13px; color:var(--cream)}
.members li > .since{flex-basis:100%}
@media (max-width:420px){.members .stats{grid-template-columns:repeat(3, 1fr)}}

/* ---------- Gruppenkasse ---------- */
.purse{font-family:var(--sign); font-size:30px; color:var(--jaune); margin:2px 0 6px}
.purse b{font-family:var(--num); font-weight:700; font-size:38px}
.next{font-size:14px; color:var(--cream); font-weight:600; margin:10px 0 0}
.next b{font-family:var(--num); color:var(--jaune)}
.ledger{list-style:none; margin:12px 0 0; padding:0; display:grid; gap:4px}
.ledger li{display:grid; grid-template-columns:auto 1fr auto; gap:2px 10px; align-items:baseline;
  background:var(--night); border-radius:10px; padding:7px 12px; font-size:14px}
.ledger .who{font-weight:700}
.ledger .what{color:var(--soft); font-weight:500}
.ledger b{font-family:var(--num)}
.ledger b.ein{color:var(--menthe)}
.ledger b.aus{color:var(--corail)}
.ledger .when{grid-column:1 / -1; font-size:11.5px; color:var(--faint); font-weight:500}