/* Farben und Abstände können hier angepasst werden. */
:root{color-scheme:dark;font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;background:#090b12;color:#f6f7fb;font-synthesis:none}
*{box-sizing:border-box}body{margin:0;min-height:100svh;background:radial-gradient(ellipse at 50% 0%,#34346a66,transparent 60%),radial-gradient(ellipse at 100% 90%,#163e4933,transparent 55%),#090b12}
.shell{width:min(100% - 40px,480px);margin:auto;padding:clamp(48px,10vh,96px) 0 36px}.profile{text-align:center;animation:arrive .65s both}
.avatar{width:104px;height:104px;margin:0 auto 28px;display:grid;place-items:center;border-radius:32px;background:linear-gradient(135deg,#857dff,#4cbdf0);box-shadow:0 0 0 1px #ffffff25,0 0 0 7px #ffffff04,0 18px 65px #6962ff33;color:white;font-size:38px;font-weight:800;overflow:hidden}.avatar img{width:100%;height:100%;object-fit:cover}
.eyebrow{font-size:10px;font-weight:700;letter-spacing:.3em;color:#b1abda}h1{font-size:clamp(34px,7vw,44px);margin:10px 0;font-weight:750;letter-spacing:-.045em;overflow-wrap:anywhere}p{color:#b0b1c8;font-size:14px;line-height:1.7;margin:0 auto 36px;max-width:340px}
.links{display:grid;gap:14px}.link{position:relative;display:flex;align-items:center;gap:16px;padding:18px;text-decoration:none;color:#f7f7ff;background:linear-gradient(115deg,#ffffff09,#ffffff04);border:1px solid #ffffff40;border-radius:19px;min-height:84px;isolation:isolate;transform:translateY(0);transition:transform .32s cubic-bezier(.22,1,.36,1),border-color .32s ease,box-shadow .32s ease;animation:arrive .6s var(--delay,0ms) backwards}.link::before{content:"";position:absolute;inset:0;border-radius:inherit;background:#ffffff06;opacity:0;z-index:-1;pointer-events:none;transition:opacity .32s ease}.link:focus-visible{outline:2px solid #bdb6ff;outline-offset:5px}.symbol{width:44px;height:44px;display:grid;place-items:center;border-radius:13px;background:#ffffff09;color:#d1ccff;font-size:21px;font-weight:700;flex-shrink:0}.symbol img{width:25px;height:25px;object-fit:contain}.link-copy{display:grid;gap:5px;min-width:0;overflow-wrap:anywhere}.link-title{font-weight:650;font-size:16px}.link-subtitle{font-size:12px;line-height:1.5;color:#b0b1c8}.arrow{margin-left:auto;color:#a7abc0;font-size:21px;transition:transform .32s cubic-bezier(.22,1,.36,1),color .32s ease}footer{text-align:center;color:#9193aa;font-size:11px;letter-spacing:.04em;margin-top:42px}.footer-line{display:block;width:24px;height:1px;background:#ffffff26;margin:0 auto 21px}
@keyframes arrive{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:420px){.link{padding:15px;gap:13px}.shell{width:calc(100% - 32px)}.avatar{width:92px;height:92px;border-radius:28px}}
/* Nur echte Hover-Geräte: keine klebenden Effekte auf Touchscreens. */
@media(hover:hover) and (pointer:fine){
  .link:hover{transform:translateY(-3px);border-color:#c4bfffad;box-shadow:0 12px 28px -8px #0008,0 0 22px -8px #8177ff26}
  .link:hover::before{opacity:1}
  .link:hover .arrow{transform:translate(2px,-2px);color:#d7d1ff}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.link:hover,.link:hover .arrow{transform:none}}