:root {
  /* Farben angepasst, damit Texte auf deinem dunklen Verlauf lesbar bleiben */
  --card: rgba(255, 255, 255, 0.08); 
  --solid: rgba(255, 255, 255, 0.15); 
  --text: #ffffff; 
  --muted: #a1a1aa;
  --border: rgba(255, 255, 255, 0.1); 
  --primary: #ffffff; 
  --primaryText: #05050b;
  --shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background-color: #05050b; }

body {
  position: relative;
  margin: 0;
  min-height: 100vh;
  font-family: Inter, system-ui, sans-serif;
  background: transparent; /* WICHTIG: Nur so scheint der ::before Verlauf durch! */
  color: var(--text);
  transition: .25s;
}

/* DEIN NEUER BACKGROUND */ 
body::before { 
	content: ""; 
	position: fixed; 
	inset: 0; 
	z-index: -1; 
	background: radial-gradient(circle at 20% 20%, rgba(72, 255, 156, 0.15), transparent), radial-gradient(circle at 80% 10%, rgba(107, 63, 160, 0.25), transparent), linear-gradient(#05050b, #101022); 
}

.shell{width:min(680px,100%);margin:auto;padding:24px 14px 18px}
.topbar{display:flex;justify-content:flex-end;gap:8px;margin-bottom:14px}
.circle-btn{border:1px solid var(--border);background:var(--card);color:var(--text);width:42px;height:42px;border-radius:50%;cursor:pointer;font-size:18px;backdrop-filter:blur(15px)}

.profile{text-align:center;padding:12px 0 28px}
.avatar-wrap{position:relative;width:100px;height:100px;margin:auto}
.avatar{width:100%;height:100%;object-fit:cover;border-radius:50%;border:4px solid var(--solid);box-shadow:var(--shadow)}
.placeholder{display:flex;align-items:center;justify-content:center;background:var(--solid);font-size:40px}
.verified{position:absolute;right:1px;bottom:3px;background:#2563eb;color:#fff;border:3px solid #05050b;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font-weight:800}

h1{font-size:25px;margin:15px 0 8px}
.profile p{color:var(--muted);line-height:1.6;margin:0 auto;max-width:560px;font-size:14px}
.socials{display:flex;justify-content:center;gap:9px;margin-top:18px}
.social{display:grid;place-items:center;width:42px;height:42px;border:1px solid var(--border);border-radius:50%;background:var(--card);color:var(--text);text-decoration:none;font-weight:700;transition:.2s;backdrop-filter:blur(10px)}
.social:hover{transform:translateY(-3px);background:var(--solid);box-shadow:var(--shadow)}

.links{display:flex;flex-direction:column;gap:12px}
.link-card{display:flex;align-items:center;min-height:68px;padding:9px 14px;border-radius:18px;border:1px solid var(--border);background:var(--card);color:var(--text);text-decoration:none;backdrop-filter:blur(16px);transition:.2s;box-shadow:0 5px 20px rgba(0,0,0,.15)}
.link-card:hover{transform:translateY(-3px);background:var(--solid);box-shadow:var(--shadow)}
.link-card.featured{background:var(--primary);color:var(--primaryText);border-color:transparent}
.link-icon{width:46px;height:46px;border-radius:13px;background:rgba(255,255,255,.08);display:grid;place-items:center;font-size:20px;flex:none}
.link-copy{text-align:center;flex:1;padding:0 12px}
.link-copy strong{display:block;font-size:14px}
.link-copy small{display:block;color:var(--muted);font-size:11px;margin-top:3px}
.featured .link-copy small{color:color-mix(in srgb,var(--primaryText) 60%,transparent)}
.arrow{color:var(--muted);font-size:20px;width:30px;text-align:center}

footer{text-align:center;padding:32px 0 10px;color:var(--muted);font-size:12px}
footer a{color:inherit;text-decoration:none}
footer span{margin:0 7px}

.toast{position:fixed;left:50%;bottom:25px;transform:translate(-50%,20px);background:#fff;color:#111;padding:11px 16px;border-radius:10px;opacity:0;pointer-events:none;transition:.2s;font-weight:600}
.toast.show{opacity:1;transform:translate(-50%,0)}

@media(max-width:500px){.shell{padding:14px 11px}.profile{padding-top:4px}.link-card{min-height:64px}}