/* Linktree-Seite (/links). Nutzt die Variablen aus style.css. */
.links-page {
  min-height: 100vh;
  background:
    radial-gradient(50rem 26rem at 50% -4rem, rgba(12, 192, 223, .28), transparent 70%),
    radial-gradient(40rem 30rem at 100% 100%, rgba(13, 92, 182, .45), transparent 70%),
    var(--bg);
  background-attachment: fixed;
}
.links {
  width: min(100% - 2rem, 30rem);
  margin-inline: auto;
  padding: max(1.25rem, env(safe-area-inset-top)) 0 max(2.5rem, env(safe-area-inset-bottom));
}
.links__back { display: inline-block; padding: .4rem 0; font-size: .9rem; color: var(--muted); text-decoration: none; }
.links__back:hover { color: var(--text); }

/* Profil */
.profile { text-align: center; padding: .75rem 0 1.6rem; }
.profile__avatar {
  width: 112px; aspect-ratio: 1; margin: 0 auto 1rem; border-radius: 50%;
  object-fit: cover; background: var(--blue);
  box-shadow: 0 0 0 3px var(--bg), 0 0 0 6px var(--accent), 0 14px 40px rgba(12, 192, 223, .35);
}
.profile__name { font-size: 1.7rem; font-weight: 800; margin: 0; }
.profile__handle { margin: .1rem 0 .6rem; color: var(--accent); font-weight: 700; }
.profile__tagline { margin: 0; font-size: .95rem; }
.profile__sub { margin: .15rem 0 0; font-size: .85rem; color: var(--muted); }

.next-stream {
  display: inline-flex; flex-direction: column; align-items: center; gap: .1rem;
  margin-top: 1.1rem; padding: .6rem 1.2rem; border-radius: 999px; text-decoration: none;
  background: rgba(12, 192, 223, .12); border: 1px solid rgba(12, 192, 223, .45);
}
.next-stream[hidden] { display: none; }
.next-stream__label { font-size: .68rem; text-transform: uppercase; letter-spacing: .14em; font-weight: 700; color: var(--accent); }
.next-stream__when { font-size: .95rem; font-weight: 700; }
.next-stream--live { background: rgba(255, 77, 77, .14); border-color: rgba(255, 107, 107, .6); }
.next-stream--live .next-stream__label { color: #ff6b6b; }

/* Gruppen & Link-Karten */
.group { margin-bottom: 1.5rem; }
.group__title { margin: 0 0 .6rem .2rem; font-size: .75rem; text-transform: uppercase; letter-spacing: .16em; color: var(--accent); }
.lnk {
  display: flex; align-items: center; gap: .9rem; margin-bottom: .6rem; padding: .9rem 1rem;
  text-decoration: none; border-radius: var(--radius);
  background: rgba(15, 47, 92, .72); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, .08);
  transition: transform .15s, border-color .15s, background .15s, box-shadow .15s;
}
.lnk:hover, .lnk:focus-visible { transform: translateY(-3px); border-color: var(--accent); background: rgba(15, 47, 92, .95); box-shadow: 0 12px 28px rgba(0, 0, 0, .35); }
.lnk:active { transform: scale(.985); }
.lnk__icon {
  flex: 0 0 auto; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px;
  background: rgba(12, 192, 223, .14); color: var(--accent);
}
.lnk__icon--letter { font-weight: 800; font-size: .95rem; letter-spacing: -.02em; }
.lnk__icon svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.lnk__text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; line-height: 1.35; }
.lnk__text strong { font-size: 1rem; }
.lnk__text small { font-size: .8rem; color: var(--muted); }
.lnk__arrow { flex: 0 0 auto; color: var(--muted); font-size: 1.1rem; transition: color .15s, transform .15s; }
.lnk:hover .lnk__arrow { color: var(--accent); transform: translate(2px, -2px); }
.lnk--featured { background: linear-gradient(135deg, rgba(13, 92, 182, .9), rgba(15, 47, 92, .85)); border-color: rgba(12, 192, 223, .5); }
.lnk--featured .lnk__icon { background: var(--accent); color: var(--accent-ink); }
.lnk--small { padding: .7rem 1rem; }

.links__footer { text-align: center; padding-top: .8rem; }
.links__footer p { margin: 1.2rem 0 0; font-size: .8rem; color: var(--muted); }
.links__footer a:not(.btn) { text-underline-offset: 3px; }

@media (min-width: 640px) { .links { padding-top: 2.5rem; } }
@media (prefers-reduced-motion: reduce) { .lnk { transition: none; } .lnk:hover { transform: none; } }