/* ============================================================
   LUCKY LOSER — Link-in-bio ("alle Links")
   ============================================================ */

html, body { background: #A8C8E8; overscroll-behavior-y: none; }
.lt { --orange: #E8721A; --text-3: #8A93A0; min-height: 100dvh; background: #A8C8E8; display: flex; flex-direction: column; align-items: center;
  padding: max(clamp(2.4rem,7svh,4rem),env(safe-area-inset-top)) max(1.3rem,env(safe-area-inset-right)) max(clamp(2rem,5svh,3rem),env(safe-area-inset-bottom)) max(1.3rem,env(safe-area-inset-left)); position: relative;
  overflow: hidden; overflow-anchor: none; }
.lt-inner { width: 100%; max-width: 480px; position: relative; z-index: 2; }

.lt-head { text-align: center; }
.lt-photo { width: 116px; height: 116px; margin: 0 auto; position: relative; }
.lt-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 14%; border-radius: 50%;
  border: 5px solid #fff; box-shadow: 0 18px 40px -16px rgba(13,20,40,.5); }
.lt-sticker { position: absolute; bottom: -7px; left: 50%; transform: translateX(-50%) rotate(-3deg);
  font-size: .62rem; font-weight: 700; color: #0D121B; background: var(--orange); padding: .28rem .6rem;
  border-radius: 4px; box-shadow: 0 6px 16px -6px rgba(0,0,0,.4); white-space: nowrap; }
.lt-word { font-family: var(--display); font-weight: 600; font-size: clamp(2rem,9vw,2.7rem); letter-spacing: -.01em;
  color: #fff; line-height: .92; margin-top: 1.5rem; }
.lt-tag { font-size: .72rem; color: #0D121B; margin-top: .7rem; }
.lt-onair { display: inline-flex; align-items: center; gap: .45rem; margin-top: .85rem; font-size: .6rem;
  font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #0D121B; }

.lt-links { display: flex; flex-direction: column; gap: .65rem; margin-top: clamp(1.7rem,4svh,2.4rem); scroll-margin-top: 1rem; }
.lt-btn { display: flex; align-items: center; gap: .9rem; background: #fff; color: #11151C; text-decoration: none;
  min-height: 58px; padding: .9rem 1.15rem; border-radius: 15px; box-shadow: 0 10px 26px -16px rgba(13,20,40,.5);
  transition: transform .25s var(--spring), box-shadow .25s var(--ease); }
.lt-btn:hover, .lt-btn:focus-visible { transform: translateY(-2px); box-shadow: 0 16px 36px -16px rgba(13,20,40,.55); }
.lt-btn:active { transform: translateY(0) scale(.99); }
.lt-ico { width: 26px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: #11151C; }
.lt-label { flex: 1; min-width: 0; font-weight: 700; font-size: .94rem; line-height: 1.15; display: flex; flex-direction: column; gap: 2px; }
.lt-label small { font-family: var(--mono); font-weight: 400; font-size: .62rem; line-height: 1.3; color: #667180;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lt-arrow { color: var(--text-3); font-weight: 700; flex-shrink: 0; transition: transform .25s var(--ease), color .25s; }
.lt-btn:hover .lt-arrow { transform: translateX(3px); color: var(--orange-text); }
.lt-btn.feat { background: var(--orange); color: #0D121B; }
.lt-btn.feat .lt-ico, .lt-btn.feat .lt-arrow { color: #0D121B; }
.lt-btn.feat .lt-label small { color: rgba(13,18,27,.78); }
.lt-btn.feat .lt-label small { display: -webkit-box; white-space: normal; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; text-overflow: ellipsis; }
.lt-tri { width: 0; height: 0; border-style: solid; border-width: 7px 0 7px 11px; border-color: transparent transparent transparent #0D121B; margin-left: 3px; }

.lt .lt-foot { margin-top: clamp(1.6rem,4svh,2.2rem); padding: 0; background: transparent; overflow: visible;
  display: flex; flex-direction: column; align-items: center; gap: .55rem; text-align: center; font-size: .72rem; line-height: 1.45; color: rgba(13,18,27,.76); }
.lt-foot a { color: inherit; text-decoration: underline; }
.lt-foot-links { display: flex; justify-content: center; gap: .9rem; }
.lt-foot-links a { min-height: 44px; display: inline-flex; align-items: center; text-underline-offset: 2px; }

/* Keep the decorative equalizer on the compositor instead of animating
   element height, which can cause visible reflow on mobile browsers. */
.lt-onair .eq i { height: 100%; transform: scaleY(.22); transform-origin: bottom; animation-name: ltEq; will-change: transform; }
@keyframes ltEq { 0%,100% { transform: scaleY(.22); } 50% { transform: scaleY(1); } }

@media (hover: none) {
  .lt-btn:hover { transform: none; box-shadow: 0 10px 26px -16px rgba(13,20,40,.5); }
}

@media (max-width: 600px) {
  .lt { padding-top: max(2.25rem,env(safe-area-inset-top)); padding-right: max(1rem,env(safe-area-inset-right)); padding-bottom: max(1.5rem,env(safe-area-inset-bottom)); padding-left: max(1rem,env(safe-area-inset-left)); }
  .lt-photo { width: 108px; height: 108px; }
  .lt-word { margin-top: 1.35rem; }
  .lt-links { margin-top: 2rem; }
  .lt .lt-foot { margin-top: 1.8rem; }
}

@media (max-width: 350px) {
  .lt { padding-left: .75rem; padding-right: .75rem; }
  .lt-btn { gap: .7rem; padding-left: .9rem; padding-right: .9rem; }
  .lt-label { font-size: .88rem; }
  .lt-label small { font-size: .58rem; }
}