/* Linkr - Retro-Röhrenfernseher (CRT), schwarz/weiß. Farben kommen aus theme.css (Admin > Design). */
@font-face{font-family:"PS2P";src:url(fonts/press-start-2p.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}

:root{
  --a1:#f4f4f4;--a2:#8f8f8f;--bg:#050505;--screen:#030303;--fg:#f4f4f4;--muted:#9c9c9c;--panel:#0d0d0d;--hl-fg:#050505;
  --a1-rgb:244,244,244;--a2-rgb:143,143,143;--bg-rgb:5,5,5;--fg-rgb:244,244,244;
  --pixel:"PS2P","Courier New",monospace;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
*{margin:0}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;background:var(--bg)}
body{min-height:100vh;min-height:100dvh;background:var(--bg);color:var(--fg);font:400 16px/1.5 var(--sans);overflow-x:hidden;-webkit-font-smoothing:antialiased}
a{color:inherit}
img{display:block;max-width:100%}
[hidden]{display:none!important}

/* ---------- Bildschirm-Atmosphäre: Scanlines, Vignette, Bildlauf-Balken ---------- */
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    repeating-linear-gradient(0deg,rgba(255,255,255,.028) 0 1px,transparent 1px 3px),
    radial-gradient(85% 65% at 50% 38%,rgba(var(--a1-rgb),.075),transparent 72%),
    var(--bg)}
body::after{content:"";position:fixed;inset:0;z-index:30;pointer-events:none;
  background:radial-gradient(ellipse at center,transparent 58%,rgba(0,0,0,.6) 100%)}
html::before{content:"";position:fixed;left:0;right:0;top:-25%;height:22%;z-index:29;pointer-events:none;
  background:linear-gradient(to bottom,transparent,rgba(var(--a1-rgb),.045),transparent)}

/* ---------- Röhren-Bildschirm (Grundbaustein) ---------- */
.crt{position:relative;border-radius:14px;color:var(--a1);
  background:radial-gradient(130% 150% at 50% 38%,rgba(var(--a1-rgb),.13),rgba(var(--a1-rgb),0) 68%),var(--screen);
  border:2px solid var(--a1);
  box-shadow:0 0 0 3px var(--bg),0 0 0 4px rgba(var(--a1-rgb),.5),inset 0 0 26px rgba(0,0,0,.85),0 0 22px rgba(var(--a1-rgb),.1)}
.crt::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:repeating-linear-gradient(0deg,rgba(255,255,255,.05) 0 1px,transparent 1px 3px)}

/* ---------- Layout ---------- */
.stage{width:100%;max-width:520px;margin:0 auto;min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;align-items:center;
  padding:max(40px,env(safe-area-inset-top)) 18px calc(max(24px,env(safe-area-inset-bottom)) + var(--ck,0px))}
.hero{display:flex;flex-direction:column;align-items:center;text-align:center;width:100%}

.av{width:104px;height:104px;overflow:hidden;border-radius:16px}
.av--round{border-radius:50%}
.av img{width:100%;height:100%;object-fit:cover;filter:contrast(1.05)}
.av-fallback{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font:400 34px/1 var(--pixel);color:var(--a1);text-shadow:0 0 12px rgba(var(--a1-rgb),.7)}

.name{margin-top:24px;font:400 20px/1.4 var(--pixel);letter-spacing:.03em;color:var(--a1);word-break:break-word;text-transform:uppercase;
  text-shadow:0 0 10px rgba(var(--a1-rgb),.55)}
.handle{margin-top:12px;font:400 10px/1.5 var(--pixel);color:var(--muted);word-break:break-word;letter-spacing:.05em}
.bio{margin-top:18px;max-width:42ch;color:var(--muted);font-size:15px;line-height:1.6}

.socials{list-style:none;padding:0;margin:22px 0 0;display:flex;flex-wrap:wrap;gap:14px;justify-content:center}
.soc{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:10px;text-decoration:none;transition:background .15s,color .15s,box-shadow .15s}
@media (hover:hover){.soc:hover{background:var(--a1);color:var(--hl-fg);box-shadow:0 0 0 3px var(--bg),0 0 0 4px rgba(var(--a1-rgb),.5),0 0 22px rgba(var(--a1-rgb),.5)}}
.soc:active{background:var(--a1);color:var(--hl-fg)}
.soc:focus-visible,.btn:focus-visible{outline:3px dashed var(--a1);outline-offset:6px}
.soc .ic{position:relative;z-index:1}

.ic{width:20px;height:20px;display:block;flex:none}
.ic-emoji{font-size:19px;line-height:22px;text-align:center;font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif}
.ic-img{width:24px;height:24px;object-fit:cover;filter:grayscale(1) contrast(1.1)}

/* ---------- Link-Kacheln (wie die Twitch-Panels) ---------- */
nav{width:100%;margin-top:32px}
.links{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:18px;width:100%}
.btn{display:flex;flex-direction:column;gap:6px;min-height:92px;padding:11px 16px 10px;text-decoration:none;-webkit-tap-highlight-color:transparent;
  transition:transform .15s ease,box-shadow .15s ease,background .15s,color .15s}
.b-top,.b-bot{display:flex;justify-content:space-between;align-items:center;gap:12px;font:400 8px/1.3 var(--pixel);letter-spacing:.06em;text-transform:uppercase}
.b-top{color:var(--a1);opacity:.92}
.b-top span:first-child{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.b-top span:last-child{flex:none}
.b-main{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:6px;padding:2px 0}
.b-title{font:400 17px/1.35 var(--pixel);text-transform:uppercase;overflow-wrap:anywhere;hyphens:auto;text-shadow:0 0 10px rgba(var(--a1-rgb),.6)}
.b-sub{font-size:12px;line-height:1.35;color:var(--muted);overflow-wrap:anywhere}
.b-bot{color:var(--a1)}
.b-play{display:flex;align-items:center;gap:8px}
.b-play::before{content:"";width:0;height:0;border-style:solid;border-width:4px 0 4px 7px;border-color:transparent transparent transparent currentColor}
.b-ic{display:flex;color:var(--a1)}

.l--hl .btn{background:var(--a1);color:var(--hl-fg);border-color:var(--a1)}
.l--hl .b-top,.l--hl .b-bot,.l--hl .b-ic{color:var(--hl-fg)}
.l--hl .b-title{text-shadow:none}
.l--hl .b-sub{color:var(--hl-fg);opacity:.75}
.l--hl .btn::after{background:repeating-linear-gradient(0deg,rgba(0,0,0,.09) 0 1px,transparent 1px 3px)}

@media (hover:hover){
  .l:not(.l--hl) .btn:hover{transform:translateY(-3px);box-shadow:0 0 0 3px var(--bg),0 0 0 4px rgba(var(--a1-rgb),.7),inset 0 0 26px rgba(0,0,0,.7),0 0 34px rgba(var(--a1-rgb),.32)}
  .l--hl .btn:hover{transform:translateY(-3px);box-shadow:0 0 0 3px var(--bg),0 0 0 4px rgba(var(--a1-rgb),.7),0 0 34px rgba(var(--a1-rgb),.45)}
}
.l:not(.l--hl) .btn:active{background:var(--a1);color:var(--hl-fg);transform:scale(.985)}
.l:not(.l--hl) .btn:active .b-top,.l:not(.l--hl) .btn:active .b-bot,.l:not(.l--hl) .btn:active .b-ic,.l:not(.l--hl) .btn:active .b-sub{color:var(--hl-fg)}
.l:not(.l--hl) .btn:active .b-title{text-shadow:none}
.l--hl .btn:active{transform:scale(.985)}

/* ---------- Eigene Link-Farben (Marke / Custom, Verlauf) ---------- */
.lc .btn{background:var(--lc-bg);color:var(--lc-fg);border-color:rgb(var(--lc1));
  box-shadow:0 0 0 3px var(--bg),0 0 0 4px rgba(var(--lc1),.65),0 0 24px rgba(var(--lc1),.32)}
.lc .b-top,.lc .b-bot,.lc .b-ic,.lc .b-sub{color:var(--lc-fg)}
.lc .b-sub{opacity:.8}
.lc .b-title{text-shadow:none}
.lc .btn::after{background:repeating-linear-gradient(0deg,rgba(0,0,0,.14) 0 1px,transparent 1px 3px)}
.lc .soc{background:var(--lc-bg);color:var(--lc-fg);border-color:rgb(var(--lc1));
  box-shadow:0 0 0 3px var(--bg),0 0 0 4px rgba(var(--lc1),.65),0 0 16px rgba(var(--lc1),.3)}
.lc .soc::after{background:repeating-linear-gradient(0deg,rgba(0,0,0,.14) 0 1px,transparent 1px 3px)}
@media (hover:hover){
  .l.lc .btn:hover{transform:translateY(-3px);box-shadow:0 0 0 3px var(--bg),0 0 0 4px rgba(var(--lc1),.9),0 0 38px rgba(var(--lc1),.55)}
  .lc .soc:hover{background:var(--lc-bg);color:var(--lc-fg);filter:brightness(1.12)}
}
.l.lc .btn:active{transform:scale(.985);filter:brightness(1.15)}

/* ---------- Footer ---------- */
.foot{margin-top:auto;padding-top:48px;display:flex;gap:10px;align-items:center;justify-content:center;font:400 9px/1.3 var(--pixel);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.foot a{color:var(--muted);text-decoration:none;padding:14px 6px;border-bottom:1px solid transparent}
.foot a:hover,.foot a:focus-visible{color:var(--a1);border-bottom-color:var(--a1)}

/* ---------- Hinweis-Fenster ---------- */
.cookie{position:fixed;z-index:20;left:14px;right:14px;bottom:max(16px,env(safe-area-inset-bottom));max-width:500px;margin:0 auto;
  display:flex;align-items:center;gap:14px;padding:14px 14px 14px 18px;font-size:14px;line-height:1.45;color:var(--fg)}
.cookie p{flex:1}
.cookie a{color:var(--a1);text-underline-offset:3px}
.cookie button{flex:none;font:400 10px/1 var(--pixel);padding:13px 15px 12px;border:2px solid var(--a1);border-radius:8px;cursor:pointer;background:transparent;color:var(--a1);position:relative;z-index:1}
.cookie button:hover,.cookie button:active{background:var(--a1);color:var(--hl-fg)}
.cookie button:focus-visible{outline:3px dashed var(--a1);outline-offset:3px}

/* ---------- Rechtstexte ---------- */
.stage--doc{max-width:780px;align-items:stretch}
.back{align-self:flex-start;font:400 10px/1 var(--pixel);color:var(--a1);text-decoration:none;padding:14px 4px;margin-bottom:14px;text-transform:uppercase}
.back:hover,.back:focus-visible{text-shadow:0 0 10px rgba(var(--a1-rgb),.8)}
.doc{padding:24px 20px 10px;overflow-wrap:anywhere;color:var(--fg);border-radius:16px}
.doc>*{position:relative;z-index:1}
.doc h1{font:400 18px/1.45 var(--pixel);margin-bottom:24px;text-transform:uppercase;color:var(--a1);text-shadow:0 0 10px rgba(var(--a1-rgb),.5)}
.doc h2{font:400 11px/1.7 var(--pixel);color:var(--a1);margin:28px 0 10px;text-transform:uppercase}
.doc p{margin:0 0 14px;color:var(--fg);opacity:.92}
.doc a{color:var(--a1);text-underline-offset:3px}
.legal .foot{padding-top:34px}

/* ---------- Größere Bildschirme ---------- */
@media (min-width:600px){
  .stage{padding-top:max(64px,env(safe-area-inset-top))}
  .av{width:120px;height:120px}
  .name{font-size:26px}
  .handle{font-size:11px}
  .bio{font-size:16px}
  .b-title{font-size:20px}
  .btn{min-height:100px;padding:13px 20px 12px}
  .doc{padding:36px 36px 16px}
  .doc h1{font-size:22px}
}
@media (max-width:360px){
  .name{font-size:16px}
  .b-title{font-size:15px}
  .cookie{flex-direction:column;align-items:stretch}
  .cookie button{align-self:flex-end}
}

/* ---------- Animationen (nur wenn erlaubt) ---------- */
@media (prefers-reduced-motion:no-preference){
  @keyframes roll{from{transform:translateY(0)}to{transform:translateY(620%)}}
  @keyframes on{0%{opacity:0;transform:scaleY(.04)}45%{opacity:1;transform:scaleY(.04)}100%{opacity:1;transform:none}}
  @keyframes flick{0%,100%{opacity:1}47%{opacity:.985}50%{opacity:.955}53%{opacity:.99}}
  @keyframes rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
  html::before{animation:roll 9s linear infinite}
  .stage{animation:flick 6s infinite}
  .av{animation:on .7s .05s backwards}
  .hero>*:not(.av){animation:rise .5s backwards}
  .name{animation-delay:.85s!important}.handle{animation-delay:1s!important}.bio{animation-delay:1.15s!important}.socials{animation-delay:1.35s!important}
  .links>.l{animation:on .55s backwards}
  .links>.l:nth-child(1){animation-delay:1.6s}.links>.l:nth-child(2){animation-delay:1.75s}.links>.l:nth-child(3){animation-delay:1.9s}
  .links>.l:nth-child(4){animation-delay:2.05s}.links>.l:nth-child(5){animation-delay:2.2s}.links>.l:nth-child(n+6){animation-delay:2.35s}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}html::before{display:none}}
@media (forced-colors:active){.crt{border:2px solid CanvasText}}