*{margin:0;padding:0;box-sizing:border-box}
:root{
  --bg:#0a0c12; --ink:#f4f5fa; --mut:#9aa0b0;
  --gold1:#f7de9b; --gold2:#e0b65b; --gold3:#c2932f;
  --line:rgba(255,255,255,.09); --card:rgba(255,255,255,.04);
}
html{overflow-x:hidden}
html,body{max-width:100%}
body{
  background:radial-gradient(120% 60% at 50% -4%,#191c28 0%,var(--bg) 55%);
  color:var(--ink);font-family:'Plus Jakarta Sans',sans-serif;
  min-height:100dvh;display:flex;flex-direction:column;
  padding:0 22px calc(env(safe-area-inset-bottom) + 30px);
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
.glow{position:fixed;top:-140px;left:0;right:0;margin:0 auto;width:min(620px,120vw);height:420px;
  background:radial-gradient(circle,rgba(224,182,91,.14),transparent 62%);pointer-events:none;z-index:0}

.hub{position:relative;z-index:2;max-width:460px;width:100%;margin:0 auto;flex:1;
  display:flex;flex-direction:column;align-items:center;justify-content:center;padding:48px 0}

.avatar{width:96px;height:96px;border-radius:24px;display:block;
  box-shadow:0 18px 50px rgba(224,182,91,.22),0 0 0 1px rgba(224,182,91,.28)}
.name{font-family:'Sora';font-weight:800;font-size:32px;letter-spacing:-.01em;margin-top:20px}
.name span{font-weight:600;font-size:14px;letter-spacing:.42em;color:var(--mut);margin-left:6px}
.tag{margin-top:8px;color:var(--mut);font-size:14.5px;letter-spacing:.02em}

.links{width:100%;margin-top:34px;display:flex;flex-direction:column;gap:13px}
.lnk{
  display:flex;align-items:center;gap:15px;text-decoration:none;color:var(--ink);
  background:var(--card);border:1px solid var(--line);border-radius:16px;padding:16px 18px;
  transition:border-color .2s,background .2s,transform .12s;-webkit-tap-highlight-color:transparent;
}
.lnk:hover{border-color:rgba(224,182,91,.45);background:rgba(224,182,91,.06);transform:translateY(-2px)}
.lnk:active{transform:translateY(0) scale(.99)}
.ic{flex:0 0 40px;width:40px;height:40px;border-radius:11px;display:grid;place-items:center;
  background:rgba(255,255,255,.05);border:1px solid var(--line);font-size:19px;color:var(--gold2)}
.ic svg{width:21px;height:21px}
.txt{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}
.txt b{font-family:'Sora';font-weight:700;font-size:16.5px;letter-spacing:-.01em}
.txt em{font-style:normal;font-size:12.5px;color:var(--mut);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.arr{color:var(--mut);font-size:18px;transition:transform .2s,color .2s}
.lnk:hover .arr{color:var(--gold2);transform:translateX(3px)}

/* Primary */
.lnk--primary{
  background:linear-gradient(135deg,var(--gold1),var(--gold2) 55%,var(--gold3));
  border-color:transparent;box-shadow:0 16px 42px rgba(224,182,91,.28)}
.lnk--primary:hover{background:linear-gradient(135deg,#fbe4a8,#e6bf67 55%,#c99a34);transform:translateY(-2px);box-shadow:0 20px 54px rgba(224,182,91,.4)}
.lnk--primary .txt b,.lnk--primary .arr{color:#1a140a}
.lnk--primary .txt em{color:rgba(26,20,10,.7)}
.lnk--primary .ic{background:rgba(26,20,10,.14);border-color:rgba(26,20,10,.18);color:#1a140a;font-size:20px}

.hfoot{margin-top:32px;color:#6b7080;font-size:12.5px;letter-spacing:.03em}

/* Footer Legal-Links (Hub) */
.legal{margin-top:20px;font-size:12.5px;color:#6b7080;text-align:center}
.legal a{color:#9aa0b0;text-decoration:none}
.legal a:hover{color:var(--gold2)}
.legal span{margin:0 7px}

/* Header + Legal-Seiten (Impressum/Datenschutz) */
.top{max-width:640px;width:100%;margin:0 auto;padding:22px 0 8px;display:flex;align-items:center;position:relative;z-index:2}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none;color:var(--ink)}
.brand svg{width:34px;height:34px;display:block}
.brand b{font-family:'Sora';font-weight:800;font-size:20px;letter-spacing:.01em}
.brand b span{font-weight:600;font-size:10px;letter-spacing:.4em;color:var(--mut);margin-left:5px}
.doc{max-width:640px;width:100%;margin:0 auto;padding:14px 0 60px;position:relative;z-index:2}
.doc h1{font-family:'Sora';font-weight:800;font-size:clamp(26px,6vw,34px);letter-spacing:-.01em;margin:18px 0 4px}
.doc .stand{color:var(--mut);font-size:13px;margin-bottom:24px}
.doc h2{font-family:'Sora';font-weight:700;font-size:18px;margin:26px 0 8px;color:#fff}
.doc p,.doc li{color:#c3c7d2;font-size:14.5px;line-height:1.65;margin:6px 0}
.doc ul{padding-left:20px}
.doc a{color:var(--gold2)}
.doc .toback{display:inline-flex;align-items:center;gap:7px;margin-top:8px;color:var(--gold2);text-decoration:none;font-weight:600;font-size:14px}
.doc strong{color:#fff}

@media(max-width:380px){ .txt em{font-size:12px} .name{font-size:28px} }