/* Linktree – öffentliche Linktree-Seite */

@font-face{font-family:'R3LT Chakra';src:url('../fonts/chakra-petch-latin-400-normal.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'R3LT Chakra';src:url('../fonts/chakra-petch-latin-500-normal.woff2') format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'R3LT Chakra';src:url('../fonts/chakra-petch-latin-600-normal.woff2') format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:'R3LT Chakra';src:url('../fonts/chakra-petch-latin-700-normal.woff2') format('woff2');font-weight:700;font-display:swap}

:root{
	--r3-cut:14px;
	--r3-line:rgb(var(--r3-text-rgb) / .16);
	--r3-line-strong:rgb(var(--r3-text-rgb) / .34);
	--r3-muted:rgb(var(--r3-text-rgb) / .62);
	--r3-ease:cubic-bezier(.2,.75,.15,1);
	--r3-chamfer:polygon(var(--r3-cut) 0,100% 0,100% calc(100% - var(--r3-cut)),calc(100% - var(--r3-cut)) 100%,0 100%,0 var(--r3-cut));
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;background:var(--r3-bg)}
body.r3{
	margin:0;min-height:100vh;min-height:100dvh;
	background:var(--r3-bg);color:var(--r3-text);
	font-family:var(--r3-font);font-size:16px;line-height:1.45;
	-webkit-font-smoothing:antialiased;overflow-x:hidden;
}
.r3 img{max-width:100%;display:block}
.r3 a{color:inherit}
.r3 button{font:inherit;color:inherit}
.r3 :focus-visible{outline:2px solid var(--r3-accent);outline-offset:3px}

/* ------------------------------------------------------------ Hintergrund */
.r3-bg{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.r3-bg__img{position:absolute;inset:-20px;background-size:cover;background-position:center;filter:grayscale(.2)}
.r3-bg__img::after{content:"";position:absolute;inset:0;background:rgb(var(--r3-bg-rgb) / var(--r3-dim))}
.r3-vignette{position:absolute;inset:0;background:radial-gradient(120% 80% at 50% 0%,transparent 40%,rgb(var(--r3-bg-rgb) / .85) 100%)}
.r3-grain{position:absolute;inset:-50%;opacity:.09;mix-blend-mode:overlay;
	background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.r3--light .r3-grain{opacity:.16;mix-blend-mode:multiply}
.r3--anim .r3-grain{animation:r3grain 1.2s steps(4) infinite}
@keyframes r3grain{0%{transform:translate(0,0)}25%{transform:translate(-3%,2%)}50%{transform:translate(2%,-3%)}75%{transform:translate(-1%,-2%)}100%{transform:translate(0,0)}}

.r3-shards{position:absolute;inset:0;width:100%;height:100%}
.r3-shards polygon{fill:rgb(var(--r3-text-rgb) / .035);stroke:rgb(var(--r3-text-rgb) / .07);stroke-width:1}
.r3-shards polyline{fill:none;stroke:rgb(var(--r3-accent-rgb) / .28);stroke-width:1.4}
.r3--anim .r3-shards .s1{animation:r3drift 22s var(--r3-ease) infinite alternate}
.r3--anim .r3-shards .s2{animation:r3drift 26s var(--r3-ease) infinite alternate-reverse}
.r3--anim .r3-shards .s3{animation:r3drift 30s var(--r3-ease) infinite alternate}
.r3--anim .r3-shards .s4{animation:r3drift 24s var(--r3-ease) infinite alternate-reverse}
.r3--anim .r3-shards .s5{animation:r3drift 28s var(--r3-ease) infinite alternate}
.r3--anim .r3-shards polyline{stroke-dasharray:900;stroke-dashoffset:900;animation:r3draw 2.4s .4s var(--r3-ease) forwards}
@keyframes r3drift{to{transform:translate(18px,-14px)}}
@keyframes r3draw{to{stroke-dashoffset:0}}

.r3-aurora{position:absolute;inset:-20%;filter:blur(70px);opacity:.55}
.r3-aurora i{position:absolute;width:55vmax;height:38vmax;border-radius:50%;mix-blend-mode:screen}
.r3-aurora i:nth-child(1){left:-10%;top:-12%;background:rgb(var(--r3-accent-rgb) / .55)}
.r3-aurora i:nth-child(2){right:-14%;top:18%;background:rgb(var(--r3-accent-rgb) / .3);filter:hue-rotate(60deg)}
.r3-aurora i:nth-child(3){left:20%;bottom:-20%;background:rgb(var(--r3-text-rgb) / .12)}
.r3--anim .r3-aurora i{animation:r3float 18s ease-in-out infinite alternate}
.r3--anim .r3-aurora i:nth-child(2){animation-duration:24s;animation-direction:alternate-reverse}
.r3--anim .r3-aurora i:nth-child(3){animation-duration:30s}
@keyframes r3float{to{transform:translate(8vmax,6vmax) rotate(18deg) scale(1.1)}}

.r3-watermark{position:absolute;right:-22vmin;top:50%;width:120vmin;height:120vmin;transform:translateY(-50%) rotate(-9deg);
	background-size:contain;background-repeat:no-repeat;background-position:center;opacity:.04;filter:grayscale(1)}
.r3--light .r3-watermark{filter:grayscale(1) invert(1);opacity:.05}

/* ------------------------------------------------------------ Layout */
.r3-wrap{position:relative;z-index:1;max-width:580px;margin:0 auto;
	padding:max(52px,env(safe-area-inset-top)) 20px max(36px,env(safe-area-inset-bottom));
	display:flex;flex-direction:column;min-height:100vh;min-height:100dvh}
.r3-head{display:flex;flex-direction:column;align-items:center;text-align:center;margin-bottom:30px}

.r3-mark{width:150px;margin-bottom:22px}
.r3-mark img{width:100%;filter:drop-shadow(0 0 28px rgb(var(--r3-accent-rgb) / .22))}
.r3--anim .r3-mark img{animation:r3hover 6s ease-in-out infinite}
@keyframes r3hover{50%{transform:translateY(-6px)}}

.r3-avatar{width:118px;height:118px;margin-bottom:20px;position:relative;padding:3px;background:var(--r3-line-strong)}
.r3-avatar img{width:100%;height:100%;object-fit:cover;background:var(--r3-bg)}
.r3-avatar--shard,.r3-avatar--shard img{clip-path:polygon(22% 0,100% 0,100% 78%,78% 100%,0 100%,0 22%)}
.r3-avatar--circle,.r3-avatar--circle img{border-radius:50%}
.r3-avatar--square{border-radius:4px}

.r3-logo{margin:0 0 12px;display:flex;align-items:center;gap:10px;justify-content:center}
.r3-logo img{width:min(290px,74vw);height:auto}
.r3--light .r3-logo img,.r3--light .r3-mark img{filter:invert(1)}
.r3-name{margin:0 0 10px;font-size:clamp(28px,7.4vw,40px);font-weight:600;letter-spacing:.14em;text-transform:uppercase;line-height:1.05;display:flex;align-items:center;gap:10px;justify-content:center}
.r3-verified{width:22px;height:22px;color:var(--r3-accent);flex:none}
.r3-verified svg{width:100%;height:100%}

.r3-tagline{margin:0;font-size:12px;font-weight:500;letter-spacing:.34em;text-transform:uppercase;color:var(--r3-muted);display:flex;align-items:center;gap:14px}
.r3-tagline::before,.r3-tagline::after{content:"";width:18px;height:2px;background:var(--r3-accent);transform:skewX(-40deg);opacity:.8}
.r3-bio{margin:16px 0 0;max-width:430px;color:rgb(var(--r3-text-rgb) / .78);font-size:15px}

.r3-socials{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin:24px 0 0;padding:0}
.r3-socials a{--r3-cut:9px;width:46px;height:46px;display:grid;place-items:center;position:relative;clip-path:var(--r3-chamfer);
	background:var(--r3-line);transition:transform .25s var(--r3-ease)}
.r3-socials a::before{content:"";position:absolute;inset:1px;clip-path:polygon(8.6px 0,100% 0,100% calc(100% - 8.6px),calc(100% - 8.6px) 100%,0 100%,0 8.6px);background:rgb(var(--r3-bg-rgb) / .9);transition:background .25s}
.r3-socials svg{width:20px;height:20px;position:relative;transition:color .25s}
.r3-socials a:hover{transform:translateY(-3px)}
.r3-socials a:hover::before{background:var(--r3-text)}
.r3-socials a:hover svg{color:var(--r3-bg)}

/* ------------------------------------------------------------ Blöcke */
.r3-blocks{display:flex;flex-direction:column;gap:12px}

.r3-btn{position:relative;display:grid;grid-template-columns:42px 1fr 26px;align-items:center;gap:14px;min-height:66px;
	padding:11px 18px 11px 12px;text-decoration:none;isolation:isolate;
	clip-path:var(--r3-chamfer);background:var(--r3-line);transition:transform .35s var(--r3-ease),background .3s}
.r3-btn::before{content:"";position:absolute;inset:1px;z-index:-2;background:rgb(var(--r3-bg-rgb) / .86);
	clip-path:polygon(calc(var(--r3-cut) - .4px) 0,100% 0,100% calc(100% - var(--r3-cut) + .4px),calc(100% - var(--r3-cut) + .4px) 100%,0 100%,0 calc(var(--r3-cut) - .4px));
	-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.r3-btn::after{content:"";position:absolute;inset:0;z-index:-1;background:var(--r3-text);
	transform:translateX(-102%) skewX(-18deg);transform-origin:left;transition:transform .45s var(--r3-ease)}
.r3-btn__ico{--r3-cut:8px;width:42px;height:42px;display:grid;place-items:center;clip-path:var(--r3-chamfer);background:rgb(var(--r3-text-rgb) / .07);transition:background .3s,color .3s}
.r3-btn__ico:empty{background:none}
.r3-btn__ico svg{width:21px;height:21px}
.r3-btn__txt{display:flex;flex-direction:column;min-width:0;text-align:center}
.r3-btn__txt b{font-weight:600;font-size:16px;letter-spacing:.06em;text-transform:uppercase;line-height:1.2;overflow-wrap:anywhere}
.r3-btn__txt small{font-size:12.5px;color:var(--r3-muted);margin-top:3px;letter-spacing:.02em;transition:color .3s}
.r3-btn__go{width:22px;height:22px;opacity:.55;transition:transform .35s var(--r3-ease),opacity .3s}
.r3-btn__go svg{width:100%;height:100%}
.r3-btn:hover,.r3-btn:focus-visible{transform:translateX(4px);background:var(--r3-text);color:var(--r3-bg)}
.r3-btn:hover::after,.r3-btn:focus-visible::after{transform:translateX(0) skewX(0)}
.r3-btn:hover .r3-btn__txt small{color:rgb(var(--r3-bg-rgb) / .7)}
.r3-btn:hover .r3-btn__ico{background:rgb(var(--r3-bg-rgb) / .1)}
.r3-btn:hover .r3-btn__go{opacity:1;transform:translate(3px,-3px)}
.r3-btn:active{transform:translateX(4px) scale(.985)}

/* Highlight */
.r3-btn.is-featured{background:var(--r3-accent);color:var(--r3-on-accent);min-height:74px}
.r3-btn.is-featured::before{background:var(--r3-accent);-webkit-backdrop-filter:none;backdrop-filter:none}
.r3-btn.is-featured::after{background:linear-gradient(100deg,transparent 30%,rgb(255 255 255 / .55) 50%,transparent 70%);transform:translateX(-120%);mix-blend-mode:overlay}
.r3--anim .r3-btn.is-featured::after{animation:r3sheen 3.6s 1.2s ease-in-out infinite}
.r3-btn.is-featured .r3-btn__ico{background:rgb(0 0 0 / .1)}
.r3-btn.is-featured .r3-btn__txt small{color:currentColor;opacity:.72}
.r3-btn.is-featured .r3-btn__go{opacity:1}
.r3-btn.is-featured:hover{color:var(--r3-on-accent);background:var(--r3-accent);transform:translateX(4px)}
.r3-btn.is-featured:hover .r3-btn__txt small{color:currentColor}
@keyframes r3sheen{0%{transform:translateX(-120%)}45%,100%{transform:translateX(120%)}}

/* Stil: Glas */
.r3--btn-glass .r3-btn{clip-path:none;border-radius:16px;background:rgb(var(--r3-text-rgb) / .08);box-shadow:inset 0 0 0 1px rgb(var(--r3-text-rgb) / .14)}
.r3--btn-glass .r3-btn::before{clip-path:none;border-radius:15px;background:rgb(var(--r3-bg-rgb) / .35);-webkit-backdrop-filter:blur(14px) saturate(1.3);backdrop-filter:blur(14px) saturate(1.3)}
.r3--btn-glass .r3-btn::after{transform:scaleX(0);transform-origin:left;border-radius:16px}
.r3--btn-glass .r3-btn:hover::after{transform:scaleX(1)}
.r3--btn-glass .r3-btn__ico{clip-path:none;border-radius:11px}
.r3--btn-glass .r3-btn.is-featured::before{border-radius:15px}
/* Stil: Kontur */
.r3--btn-outline .r3-btn{background:var(--r3-line-strong)}
.r3--btn-outline .r3-btn::before{inset:1.5px;background:var(--r3-bg);-webkit-backdrop-filter:none;backdrop-filter:none}
.r3--btn-outline .r3-btn__ico{background:none}
/* Hervorhebung in allen Stilen behalten */
.r3--btn-glass .r3-btn.is-featured,.r3--btn-outline .r3-btn.is-featured{background:var(--r3-accent)}
.r3--btn-glass .r3-btn.is-featured::before,.r3--btn-outline .r3-btn.is-featured::before{background:var(--r3-accent)}
.r3--btn-outline .r3-btn.is-featured .r3-btn__ico,.r3--btn-glass .r3-btn.is-featured .r3-btn__ico{background:rgb(0 0 0 / .1)}
/* Stil: Gefüllt */
.r3--btn-solid .r3-btn{background:var(--r3-accent);color:var(--r3-on-accent)}
.r3--btn-solid .r3-btn::before{background:var(--r3-accent)}
.r3--btn-solid .r3-btn::after{background:var(--r3-text)}
.r3--btn-solid .r3-btn__ico{background:rgb(0 0 0 / .1)}
.r3--btn-solid .r3-btn__txt small{color:currentColor;opacity:.72}
.r3--btn-solid .r3-btn.is-featured{outline:2px solid var(--r3-text);outline-offset:-5px}

/* Überschrift */
.r3-sec{display:flex;align-items:center;gap:14px;margin:18px 0 2px;font-size:12px;font-weight:600;letter-spacing:.34em;text-transform:uppercase;color:var(--r3-muted)}
.r3-sec::before,.r3-sec::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,transparent,var(--r3-line-strong))}
.r3-sec::after{background:linear-gradient(-90deg,transparent,var(--r3-line-strong))}
.r3-sec span{display:flex;align-items:center;gap:10px}
.r3-sec span::before{content:"";width:8px;height:8px;background:var(--r3-accent);clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%)}

.r3-text{margin:2px 0;text-align:center;color:rgb(var(--r3-text-rgb) / .8);font-size:15px}

/* Zahl */
.r3-stat{--r3-cut:12px;position:relative;display:flex;flex-direction:column;align-items:center;padding:18px 16px 16px;clip-path:var(--r3-chamfer);
	background:linear-gradient(135deg,rgb(var(--r3-accent-rgb) / .16),rgb(var(--r3-text-rgb) / .04) 60%)}
.r3-stat__num{font-size:clamp(34px,9vw,46px);font-weight:700;line-height:1;letter-spacing:.02em;color:var(--r3-accent);font-variant-numeric:tabular-nums}
.r3--light .r3-stat__num{color:var(--r3-text)}
.r3-stat__lbl{margin-top:8px;font-size:11.5px;letter-spacing:.3em;text-transform:uppercase;color:var(--r3-muted)}

/* Player */
.r3-embed{--r3-cut:14px;clip-path:var(--r3-chamfer);background:var(--r3-line)}
.r3-embed__consent{width:100%;display:grid;grid-template-columns:42px 1fr 40px;align-items:center;gap:14px;text-align:left;padding:14px 16px 14px 12px;border:0;cursor:pointer;
	background:repeating-linear-gradient(-45deg,rgb(var(--r3-text-rgb) / .03) 0 10px,transparent 10px 20px),rgb(var(--r3-bg-rgb) / .86);
	clip-path:polygon(calc(var(--r3-cut) - .4px) 0,100% 0,100% calc(100% - var(--r3-cut) + .4px),calc(100% - var(--r3-cut) + .4px) 100%,0 100%,0 calc(var(--r3-cut) - .4px));margin:1px;width:calc(100% - 2px)}
.r3-embed__ico svg{width:30px;height:30px;margin:auto}
.r3-embed--spotify .r3-embed__ico{color:#1ed760}
.r3-embed--youtube .r3-embed__ico{color:#ff0033}
.r3-embed--soundcloud .r3-embed__ico{color:#ff5500}
.r3-embed__txt b{display:block;font-weight:600;letter-spacing:.05em;text-transform:uppercase;font-size:15px}
.r3-embed__txt small{display:block;color:var(--r3-muted);font-size:12px;margin-top:3px;line-height:1.35}
.r3-embed__play{--r3-cut:7px;width:40px;height:40px;clip-path:var(--r3-chamfer);background:var(--r3-text);position:relative;transition:transform .3s var(--r3-ease)}
.r3-embed__play::after{content:"";position:absolute;left:15px;top:12px;border-left:13px solid var(--r3-bg);border-top:8px solid transparent;border-bottom:8px solid transparent}
.r3-embed__consent:hover .r3-embed__play{transform:scale(1.08) rotate(-4deg)}
.r3-embed iframe{display:block;width:calc(100% - 2px);margin:1px;border:0;background:#000;clip-path:polygon(calc(var(--r3-cut) - .4px) 0,100% 0,100% calc(100% - var(--r3-cut) + .4px),calc(100% - var(--r3-cut) + .4px) 100%,0 100%,0 calc(var(--r3-cut) - .4px))}
.r3-embed--youtube iframe{aspect-ratio:16/9;height:auto}

.r3-empty{text-align:center;color:var(--r3-muted);padding:30px 0}

/* ------------------------------------------------------------ Fuß */
.r3-foot{margin-top:auto;padding-top:44px;display:flex;flex-direction:column;align-items:center;gap:18px}
.r3-share{--r3-cut:8px;display:inline-flex;align-items:center;gap:9px;padding:10px 18px;border:0;cursor:pointer;clip-path:var(--r3-chamfer);
	background:rgb(var(--r3-text-rgb) / .08);font-size:12px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;transition:background .25s,color .25s}
.r3-share svg{width:16px;height:16px}
.r3-foot__actions{display:flex;flex-wrap:nowrap;justify-content:center;align-items:stretch;gap:8px}
.r3-foot__actions .r3-share{padding:10px 14px;font-size:11px;letter-spacing:.18em}
.r3 .r3-create svg,.r3-foot__actions .r3-share svg{width:14px;height:14px}
.r3-brand--cycle{opacity:0;visibility:hidden;transform:translateY(6px);transition:opacity 1.2s ease,transform 1.2s ease,visibility 0s linear 1.2s}
.r3-brand--cycle.is-on{opacity:1;visibility:visible;transform:none;transition:opacity 1.2s ease,transform 1.2s ease,visibility 0s}
.r3--preview .r3-brand--cycle{opacity:1;visibility:visible;transform:none}
.r3 .r3-create{--r3-cut:8px;display:inline-flex;align-items:center;gap:8px;padding:10px 14px;clip-path:var(--r3-chamfer);text-decoration:none;white-space:nowrap;
	background:var(--r3-accent);color:var(--r3-on-accent);font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;transition:transform .25s var(--r3-ease),filter .25s}
.r3-create svg{width:16px;height:16px;transition:transform .3s var(--r3-ease)}
.r3 .r3-create:hover{transform:translateY(-2px);filter:brightness(1.12)}
.r3-create:hover svg{transform:rotate(90deg)}
.r3--light .r3-create:hover{filter:brightness(1.4)}
.r3-share:hover{background:var(--r3-text);color:var(--r3-bg)}
.r3-brand{display:inline-flex;align-items:center;gap:9px;text-decoration:none;font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--r3-muted);transition:color .25s}
.r3-brand img{width:22px;height:auto;opacity:.75}
.r3--light .r3-brand img{filter:invert(1)}
.r3-brand:hover{color:var(--r3-text)}
.r3-legal{display:flex;gap:18px;font-size:11px;letter-spacing:.12em;text-transform:uppercase}
.r3-legal a{color:rgb(var(--r3-text-rgb) / .42);text-decoration:none}
.r3-legal a:hover{color:var(--r3-text)}

.r3-toast{--r3-cut:8px;position:fixed;left:50%;bottom:26px;z-index:9;transform:translate(-50%,30px);opacity:0;pointer-events:none;
	padding:12px 20px;clip-path:var(--r3-chamfer);background:var(--r3-text);color:var(--r3-bg);font-size:13px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;transition:all .35s var(--r3-ease)}
.r3-toast.is-on{opacity:1;transform:translate(-50%,0)}

/* ------------------------------------------------------------ Auftritt */
.r3--anim .r3-in{opacity:0;transform:translateY(16px);animation:r3in .75s var(--r3-ease) forwards;animation-delay:calc(var(--i,0) * 55ms + 60ms)}
@keyframes r3in{to{opacity:1;transform:none}}
.r3--preview.r3--anim .r3-in{animation-duration:.01s;animation-delay:0s}

@media (max-width:420px){
	.r3-wrap{padding-left:14px;padding-right:14px}
	.r3-btn{grid-template-columns:38px 1fr 20px;gap:10px;padding-right:14px}
	.r3-btn__ico{width:38px;height:38px}
	.r3-btn__txt b{font-size:15px}
	.r3-tagline{letter-spacing:.22em;font-size:11px}
}
@media (prefers-reduced-motion:reduce){
	.r3 *,.r3 *::before,.r3 *::after{animation:none!important;transition:none!important}
	.r3--anim .r3-in{opacity:1;transform:none}
}