@font-face {

  font-family: 'Lipi EYCER';

  src: url('assets/fonts/eycer.ttf') format('opentype');

  font-weight: 400;

  font-style: normal;

  font-display: swap;

}



:root {

  --bg: #020403;

  --ink: #f3f0e8;

  --muted: #9ba8a2;

  --line: rgba(255,255,255,.14);

  --red: #c61919;

  --red-dark: #5e0707;

  --green: #133530;

  --glass: rgba(4, 10, 9, .62);

  --ease: cubic-bezier(.16, 1, .22, 1);

}



* { box-sizing: border-box; }

html { scroll-behavior: smooth; background: var(--bg); color: var(--ink); }

html.intro-active, html.intro-active body { overflow: hidden; }

body {

  margin: 0;

  min-height: 100vh;

  font-family: Rajdhani, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  background: var(--bg);

  color: var(--ink);

  overflow-x: hidden;

}



a { color: inherit; text-decoration: none; }



.page-backdrop {

  position: fixed;

  inset: 0;

  z-index: 1;

  overflow: hidden;

  background: #020403;

  pointer-events: none;

}

.backdrop-wall {

  position: absolute;

  inset: 0;

  z-index: 0;

  width: 100%;

  height: 100%;

  object-fit: cover;

  object-position: center center;

  filter: contrast(1.08) saturate(.9) brightness(.74);

  transform: scale(1.001);

}

.backdrop-logo {

  position: absolute;

  z-index: 2;

  left: 50%;

  top: 46.5%;

  width: min(88vw, 1260px);

  max-width: none;

  transform: translate(-50%, -50%);

  opacity: .9;

  mix-blend-mode: screen;

  filter: brightness(1.18) contrast(1.04) drop-shadow(0 0 18px rgba(255,255,255,.34)) drop-shadow(0 0 45px rgba(198,25,25,.24));

  will-change: transform, opacity, filter;

  animation: fyfHeroPose 8.5s ease-in-out infinite;

}

.backdrop-shade {

  position: absolute;

  inset: 0;

  z-index: 1;

  pointer-events: none;

  background:

    radial-gradient(circle at 50% 28%, transparent 0 32%, rgba(0,0,0,.42) 63%, rgba(0,0,0,.88) 100%),

    linear-gradient(180deg, rgba(0,0,0,.1), rgba(0,0,0,.56));

}



.grain {

  position: fixed;

  inset: 0;

  z-index: 50;

  pointer-events: none;

  opacity: .16;

  mix-blend-mode: overlay;

  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 220 220' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");

}



.intro-overlay {

  position: fixed;

  inset: 0;

  z-index: 100;

  background:

    radial-gradient(circle at 50% 38%, rgba(0,0,0,.05), rgba(0,0,0,.68) 74%, #020403 100%),

    url("assets/intro2-poster-first.jpg") center center / cover no-repeat,

    #020403;

  transition: opacity 1.05s var(--ease), visibility 1.05s var(--ease), background .9s var(--ease);

  overflow: hidden;

}

.intro-overlay.is-handoff {

  background: transparent;

  transition: none;

}

.intro-overlay.is-done { opacity: 0; visibility: hidden; pointer-events: none; }

.intro-video {

  position: absolute;

  inset: 0;

  width: 100%;

  height: 100%;

  object-fit: cover;

  object-position: center center;

  transform: none; /* wichtig: gleiche Crop-Logik wie die darunterliegenden Layer */

  filter: contrast(1.04) saturate(.92) brightness(.9);

  opacity: 0;

  pointer-events: none;

  -webkit-user-select: none;

  user-select: none;

  transition: opacity .18s ease, filter 1.75s var(--ease);

}

.intro-overlay.video-playing .intro-video { opacity: 1; }

.intro-overlay.is-handoff .intro-video {

  transition: none;

  opacity: 0;

  filter: contrast(1.02) saturate(.9) brightness(.72);

}

.intro-vignette {

  position: absolute;

  inset: 0;

  pointer-events: none;

  background:

    radial-gradient(circle at 50% 28%, transparent 0 32%, rgba(0,0,0,.42) 63%, rgba(0,0,0,.88) 100%),

    linear-gradient(180deg, rgba(0,0,0,.1), rgba(0,0,0,.56));

  transition: opacity 1.75s var(--ease);

}

.intro-overlay.is-handoff .intro-vignette {

  transition: none;

  opacity: 0;

}

.handoff-glitch {

  position: absolute;

  left: 50%;

  top: 47%;

  width: min(64vw, 920px);

  height: min(66vh, 620px);

  z-index: 6;

  pointer-events: none;

  opacity: 0;

  visibility: hidden;

  background:

    repeating-linear-gradient(0deg, rgba(255,255,255,.36) 0 1px, rgba(0,0,0,.22) 1px 2px, transparent 2px 9px),

    linear-gradient(90deg, transparent 0 24%, rgba(255,255,255,.28) 24% 25%, transparent 25% 56%, rgba(0,0,0,.22) 56% 58%, transparent 58% 100%),

    radial-gradient(ellipse at 50% 48%, rgba(255,255,255,.18), rgba(0,0,0,.18) 58%, transparent 74%);

  mix-blend-mode: screen;

  filter: grayscale(1) contrast(1.65) brightness(1.05);

  transform: translate3d(-50%, -50%, 0);

  -webkit-mask-image: radial-gradient(ellipse at 50% 50%, #000 0 54%, transparent 76%);

  mask-image: radial-gradient(ellipse at 50% 50%, #000 0 54%, transparent 76%);

}

.handoff-glitch::before,

.handoff-glitch::after {

  content: "";

  position: absolute;

  inset: 8% 4%;

  background:

    repeating-linear-gradient(90deg, rgba(255,255,255,.42) 0 1px, rgba(0,0,0,.22) 1px 3px, transparent 3px 18px),

    repeating-linear-gradient(0deg, transparent 0 18px, rgba(255,255,255,.3) 18px 20px, rgba(0,0,0,.26) 20px 23px);

  opacity: .28;

  mix-blend-mode: screen;

}

.handoff-glitch::after {

  opacity: .34;

  mix-blend-mode: overlay;

  clip-path: polygon(0 16%, 100% 16%, 100% 23%, 0 23%, 0 46%, 100% 46%, 100% 52%, 0 52%, 0 70%, 100% 70%, 100% 78%, 0 78%);

}

.intro-overlay.is-glitching .handoff-glitch {

  visibility: visible;

  opacity: .52;

  animation: handoffGlitchBurst 120ms steps(3, end) forwards;

}

.intro-overlay.is-glitching .handoff-glitch::before {

  animation: handoffGlitchSliceA 120ms steps(3, end) forwards;

}

.intro-overlay.is-glitching .handoff-glitch::after {

  animation: handoffGlitchSliceB 120ms steps(3, end) forwards;

}

.age-gate {

  position: absolute;

  inset: 0;

  z-index: 3;

  display: grid;

  place-items: center;

  padding: clamp(18px, 4vw, 48px);

  opacity: 0;

  visibility: hidden;

  pointer-events: none;

  background:

    radial-gradient(circle at 50% 42%, rgba(130, 3, 3, .2) 0 12rem, rgba(0,0,0,.22) 26rem, rgba(0,0,0,.76) 100%),

    linear-gradient(90deg, rgba(0,0,0,.74), rgba(0,0,0,.24), rgba(0,0,0,.74));

  backdrop-filter: blur(2px) saturate(.9);

  transition: opacity 1.05s var(--ease), visibility 1.05s var(--ease);

}

.age-gate::before,

.age-gate::after {

  content: "";

  position: absolute;

  pointer-events: none;

}

.age-gate::before {

  inset: 0;

  background:

    radial-gradient(circle at 50% 40%, transparent 0 19rem, rgba(0,0,0,.42) 35rem, rgba(0,0,0,.82) 100%),

    repeating-linear-gradient(90deg, rgba(255,255,255,.035) 0 1px, transparent 1px 9px);

  opacity: .58;

  mix-blend-mode: overlay;

}

.age-gate::after {

  left: 50%;

  top: 50%;

  width: min(820px, 92vw);

  height: min(820px, 92vw);

  transform: translate(-50%, -50%);

  border-radius: 50%;

  background: radial-gradient(circle, rgba(198,25,25,.18), transparent 62%);

  filter: blur(18px);

  opacity: .72;

  animation: altarPulse 3.7s ease-in-out infinite alternate;

}

.age-gate.is-visible {

  opacity: 1;

  visibility: visible;

  pointer-events: auto;

}

.age-gate__frame {

  width: min(720px, calc(100vw - 40px));

  min-height: min(720px, calc(100vw - 40px));

  position: relative;

  z-index: 1;

  display: grid;

  justify-items: center;

  align-content: center;

  text-align: center;

  padding: clamp(46px, 6vw, 82px) clamp(30px, 6vw, 86px);

  border: 0;

  border-radius: 50%;

  background:

    radial-gradient(circle at 50% 50%, rgba(255,255,255,.08) 0 1px, transparent 2px 47%),

    radial-gradient(circle at 50% 50%, rgba(198,25,25,.28), rgba(198,25,25,.1) 24%, transparent 43%),

    repeating-conic-gradient(from -12deg, rgba(255,255,255,.22) 0deg 1deg, transparent 1deg 9deg, rgba(198,25,25,.34) 9deg 10deg, transparent 10deg 18deg),

    radial-gradient(circle at 50% 50%, rgba(7, 2, 2, .74) 0 48%, rgba(0,0,0,.42) 49% 50%, transparent 51% 100%);

  box-shadow:

    0 42px 130px rgba(0,0,0,.82),

    0 0 120px rgba(198,25,25,.18),

    0 0 0 1px rgba(255,255,255,.08) inset;

  overflow: visible;

  transform: translateY(26px) scale(.96);

  opacity: 0;

  isolation: isolate;

  clip-path: circle(22% at 50% 50%);

  filter: blur(4px);

  transition: opacity 1.05s var(--ease), transform 1.05s var(--ease), clip-path 1.05s var(--ease), filter 1.05s var(--ease);

}

.age-gate.is-visible .age-gate__frame {

  opacity: 1;

  transform: translateY(0) scale(1);

  clip-path: circle(72% at 50% 50%);

  filter: blur(0);

}

.age-gate__frame::before,

.age-gate__frame::after {

  content: "";

  position: absolute;

  pointer-events: none;

  z-index: -1;

}

.age-gate__frame::before {

  inset: -18px;

  border-radius: 50%;

  background:

    radial-gradient(circle, transparent 0 57%, rgba(255,255,255,.82) 57.2% 57.45%, transparent 57.8%),

    radial-gradient(circle, transparent 0 64%, rgba(198,25,25,.72) 64.2% 64.7%, transparent 65%),

    repeating-conic-gradient(from 8deg, rgba(255,255,255,.9) 0deg .45deg, transparent .45deg 13deg, rgba(198,25,25,.78) 13deg 13.65deg, transparent 13.65deg 26deg);

  opacity: .72;

  filter: drop-shadow(0 0 18px rgba(198,25,25,.38));

  animation: unlockRingDrift 18s linear infinite;

}

.age-gate__frame::after {

  inset: 8%;

  border-radius: 50%;

  background:

    linear-gradient(90deg, transparent 0 44%, rgba(255,255,255,.26) 44% 44.5%, transparent 44.5% 55.5%, rgba(255,255,255,.18) 55.5% 56%, transparent 56%),

    linear-gradient(0deg, transparent 0 44%, rgba(198,25,25,.28) 44% 44.5%, transparent 44.5% 55.5%, rgba(198,25,25,.18) 55.5% 56%, transparent 56%),

    radial-gradient(circle, transparent 0 42%, rgba(255,255,255,.16) 42.4% 42.8%, transparent 43.2% 100%);

  opacity: .52;

  mix-blend-mode: screen;

  animation: targetingPulse 3.2s steps(2, end) infinite;

}

.age-gate__blood {

  position: absolute;

  top: 50%;

  width: clamp(72px, 9vw, 118px);

  height: clamp(112px, 13vw, 170px);

  pointer-events: none;

  opacity: .34;

  filter: drop-shadow(0 0 16px rgba(198,25,25,.26));

  background:

    linear-gradient(180deg, transparent, rgba(198,25,25,.78) 44%, transparent 100%),

    radial-gradient(ellipse at 50% 50%, rgba(255,255,255,.22), transparent 66%);

  clip-path: polygon(46% 0, 55% 0, 55% 100%, 46% 100%, 46% 55%, 0 55%, 0 46%, 46% 46%);

  animation: ritualTick 3.9s steps(2, end) infinite alternate;

}

.age-gate__blood--left { left: 4%; transform: translateY(-50%) rotate(-32deg); }

.age-gate__blood--right { right: 4%; transform: translateY(-50%) rotate(32deg); animation-delay: -.9s; opacity: .28; }

.age-gate__sigil {

  width: clamp(118px, 14vw, 170px);

  aspect-ratio: 1;

  position: relative;

  margin: 0 auto 20px;

  display: grid;

  place-items: center;

  filter: drop-shadow(0 0 30px rgba(198,25,25,.5));

  animation: sigilFloat 4.6s ease-in-out infinite;

}

.age-gate__sigil::before {

  content: "";

  position: absolute;

  inset: 17%;

  border-radius: 50%;

  background: radial-gradient(circle, rgba(198,25,25,.34), transparent 68%);

  filter: blur(14px);

  animation: sigilGlow 2.4s ease-in-out infinite alternate;

}

.pentagram {

  width: 100%;

  height: 100%;

  overflow: visible;

  animation: pentagramSpin 28s linear infinite;

}

.pentagram__ring,

.pentagram__star,

.pentagram__cut {

  fill: none;

  vector-effect: non-scaling-stroke;

}

.pentagram__ring--outer { stroke: rgba(245,235,218,.78); stroke-width: 1.3; stroke-dasharray: 2 5; }

.pentagram__ring--inner { stroke: rgba(198,25,25,.58); stroke-width: .9; stroke-dasharray: 18 8; animation: ringDrift 7s linear infinite reverse; transform-origin: 60px 60px; }

.pentagram__star { stroke: rgba(155, 0, 0, .9); stroke-width: 2.4; filter: drop-shadow(0 0 8px rgba(198,25,25,.82)); }

.pentagram__cut { stroke: rgba(255,244,226,.72); stroke-width: .75; stroke-dasharray: 36 10; opacity: .72; }

.age-gate__kicker {

  margin: 0 0 14px;

  color: rgba(255,244,226,.74);

  font-size: 10px;

  font-weight: 900;

  letter-spacing: .46em;

  text-transform: uppercase;

  text-shadow: 0 0 18px rgba(198,25,25,.45);

}

.age-gate h2 {

  margin: 0;

  max-width: 620px;

  font-family: Anton, Inter, system-ui, sans-serif;

  font-size: clamp(34px, 5vw, 68px);

  line-height: .9;

  font-weight: 900;

  letter-spacing: .035em;

  text-transform: uppercase;

  text-wrap: balance;

  text-shadow: 0 0 16px rgba(198,25,25,.4), 0 12px 34px rgba(0,0,0,.72);

}

.age-gate h2 span { display: block; }

.age-gate__copy {

  max-width: 390px;

  margin: 16px auto 0;

  color: rgba(255,255,255,.58);

  font-size: clamp(12px, 1.2vw, 14px);

  line-height: 1.45;

}

.age-gate__actions {

  width: min(520px, 100%);

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 14px;

  margin-top: 32px;

}

.age-btn {

  width: 100%;

  min-width: 0;

  min-height: 62px;

  padding: 0 16px;

  border: 1px solid rgba(255,255,255,.2);

  border-radius: 0;

  color: var(--ink);

  background: rgba(0,0,0,.42);

  font: 900 12px/1.1 Inter, sans-serif;

  letter-spacing: .13em;

  text-transform: uppercase;

  cursor: pointer;

  transition: transform .25s var(--ease), border-color .25s ease, background .25s ease, color .25s ease, box-shadow .25s ease;

  clip-path: polygon(12px 0, 100% 0, calc(100% - 12px) 100%, 0 100%);

}

.age-btn:hover { transform: translateY(-2px); border-color: rgba(255,255,255,.36); }

.age-btn--yes {

  background: linear-gradient(180deg, #fff7e9, #cfc2ad);

  color: #060302;

  border-color: rgba(255,247,233,.92);

  box-shadow: 0 16px 38px rgba(198,25,25,.18), 0 0 0 1px rgba(255,255,255,.22) inset;

}

.age-btn--yes:hover { box-shadow: 0 20px 48px rgba(198,25,25,.3), 0 0 0 1px rgba(255,255,255,.28) inset; }

.age-btn--no {

  background: linear-gradient(180deg, rgba(142, 4, 4, .92), rgba(62, 0, 0, .94));

  border-color: rgba(198,25,25,.72);

  color: #fff4ec;

  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08), 0 14px 34px rgba(94,0,0,.26);

}

.age-btn--no:hover { background: linear-gradient(180deg, rgba(180, 8, 8, .98), rgba(82, 0, 0, .96)); border-color: rgba(255,80,80,.8); }



/* EYCER Access Lock: blutiges Pentagramm-Gate — brutal, aber bewusst überzeichnet */

.age-gate {

  background:

    radial-gradient(circle at 50% 45%, rgba(130, 0, 0, .26) 0 11rem, rgba(0,0,0,.24) 26rem, rgba(0,0,0,.82) 100%),

    linear-gradient(90deg, rgba(0,0,0,.78), rgba(0,0,0,.2), rgba(0,0,0,.78));

  backdrop-filter: blur(2px) saturate(.9);

}

.age-gate::before {

  background:

    radial-gradient(circle at 50% 40%, transparent 0 18rem, rgba(0,0,0,.5) 34rem, rgba(0,0,0,.88) 100%),

    repeating-linear-gradient(90deg, rgba(255,255,255,.035) 0 1px, transparent 1px 9px);

  opacity: .6;

  mix-blend-mode: overlay;

}

.age-gate::after {

  left: 50%;

  top: 50%;

  width: min(860px, 92vw);

  height: min(860px, 92vw);

  transform: translate(-50%, -50%);

  border-radius: 50%;

  background: radial-gradient(circle, rgba(198,25,25,.2), transparent 62%);

  filter: blur(18px);

  opacity: .76;

  animation: altarPulse 3.7s ease-in-out infinite alternate;

}

.age-gate__frame {

  width: min(690px, calc(100vw - 52px));

  min-height: 0;

  padding: clamp(28px, 4vw, 48px) clamp(22px, 4vw, 52px) clamp(24px, 4vw, 40px);

  border: 1px solid rgba(255,255,255,.16);

  border-radius: 32px;

  background:

    linear-gradient(180deg, rgba(255,255,255,.1), transparent 25%),

    radial-gradient(circle at 50% 0%, rgba(198,25,25,.28), transparent 48%),

    repeating-linear-gradient(90deg, rgba(255,255,255,.035) 0 1px, transparent 1px 18px),

    linear-gradient(145deg, rgba(16, 3, 3, .94), rgba(2, 5, 5, .84));

  box-shadow:

    0 38px 120px rgba(0,0,0,.78),

    0 0 0 1px rgba(0,0,0,.45) inset,

    0 0 90px rgba(198,25,25,.24);

  overflow: hidden;

  --blood-ready: 0;

  clip-path: inset(48% 0 48% 0 round 32px);

}

.age-gate.is-visible .age-gate__frame {

  clip-path: inset(0 0 0 0 round 32px);

  animation: frameBloodCharge 1.8s .55s both;

}

.age-gate__frame::before {

  inset: 0;

  border-radius: inherit;

  padding: 1px;

  background: linear-gradient(120deg, transparent, rgba(255,255,255,.66), rgba(156,0,0,.92), rgba(255,255,255,.28), transparent);

  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);

  -webkit-mask-composite: xor;

  mask-composite: exclude;

  opacity: .82;

  filter: none;

  animation: gateBorderWake 1.2s .25s both;

}

.age-gate__frame::after {

  inset: -42% -15% auto;

  height: 62%;

  border-radius: 0;

  background: radial-gradient(ellipse at 50% 0%, rgba(198,25,25,.28), transparent 62%);

  opacity: 0;

  mix-blend-mode: screen;

  animation: bloodAuraRise 1.4s .55s both, bloodAura 4s 1.95s ease-in-out infinite alternate;

}

.age-gate__sigil,

.age-gate__blood { display: block; }

.age-gate__blood {

  position: absolute;

  top: 0;

  width: clamp(42px, 6vw, 68px);

  height: clamp(190px, 24vw, 270px);

  pointer-events: none;

  opacity: 0;

  filter: saturate(1.25) contrast(1.08) drop-shadow(0 12px 16px rgba(0,0,0,.38)) drop-shadow(0 0 12px rgba(198,25,25,.18));

  background:

    linear-gradient(90deg, rgba(22,0,0,.18), rgba(190,8,8,.82) 38%, rgba(82,0,0,.95) 72%, rgba(18,0,0,.16)),

    linear-gradient(180deg, #8b0000 0%, #650000 48%, rgba(48,0,0,.94) 78%, rgba(48,0,0,0) 100%);

  border-radius: 0 0 28px 24px;

  clip-path: polygon(12% 0, 88% 0, 84% 34%, 96% 45%, 76% 100%, 61% 88%, 52% 46%, 39% 38%, 30% 95%, 12% 84%, 20% 42%, 4% 34%);

  transform: translate3d(0, -104%, 0) rotate(var(--blood-rotate, 0deg));

  transform-origin: top center;

}

.age-gate.is-visible .age-gate__blood {

  animation: bloodRunDown 3.2s 1.05s cubic-bezier(.18, .86, .18, 1) forwards;

}

.age-gate__blood::before,

.age-gate__blood::after { display: none; }

.age-gate__blood--left {

  left: clamp(16px, 5vw, 54px);

  --blood-rotate: -1deg;

  --blood-final-opacity: .74;

  --blood-final-y: -8%;

}

.age-gate__blood--right {

  right: clamp(16px, 5vw, 54px);

  --blood-rotate: 1deg;

  --blood-final-opacity: .68;

  --blood-final-y: -6%;

  background:

    linear-gradient(90deg, rgba(18,0,0,.14), rgba(128,0,0,.88) 32%, rgba(210,10,10,.72) 66%, rgba(20,0,0,.18)),

    linear-gradient(180deg, #760000 0%, #540000 50%, rgba(44,0,0,.92) 79%, rgba(44,0,0,0) 100%);

  clip-path: polygon(8% 0, 92% 0, 80% 32%, 96% 42%, 83% 88%, 66% 100%, 55% 45%, 44% 40%, 36% 90%, 18% 96%, 24% 44%, 4% 35%);

}

.age-gate__sigil {

  width: clamp(118px, 16vw, 168px);

  aspect-ratio: 1;

  position: relative;

  margin: 0 auto 18px;

  display: grid;

  place-items: center;

  filter: drop-shadow(0 0 30px rgba(198,25,25,.52));

  animation: sigilSummon .95s .25s both, sigilFloat 4.6s 1.2s ease-in-out infinite;

}

.age-gate__sigil::before {

  content: "";

  position: absolute;

  inset: 16%;

  border-radius: 50%;

  background: radial-gradient(circle, rgba(198,25,25,.38), transparent 68%);

  filter: blur(14px);

  animation: sigilGlow 2.4s ease-in-out infinite alternate;

}

.pentagram { animation: pentagramSpin 16s linear infinite; }

.age-gate__kicker {

  margin-bottom: 12px;

  color: rgba(255,255,255,.72);

  font-size: 11px;

  letter-spacing: .38em;

  text-shadow: 0 0 18px rgba(198,25,25,.48);

}

.age-gate h2 {

  font-family: Inter, system-ui, sans-serif;

  font-size: clamp(34px, 4.8vw, 58px);

  line-height: .96;

  font-weight: 900;

  letter-spacing: -.045em;

  text-transform: none;

  text-shadow: 0 0 32px rgba(198,25,25,.28), 0 14px 36px rgba(0,0,0,.72);

}

.age-gate__copy {

  max-width: 430px;

  margin-top: 14px;

  color: rgba(255,255,255,.64);

  letter-spacing: 0;

  text-transform: none;

  font-size: clamp(13px, 1.4vw, 15px);

}

.age-gate__actions {

  width: min(360px, 100%);

  grid-template-columns: 1fr 1fr;

  gap: 14px;

  margin-top: 30px;

}

.age-btn {

  min-height: 60px;

  border-radius: 999px;

  clip-path: none;

  font: 900 18px/1 Inter, sans-serif;

  letter-spacing: .04em;

}

.age-btn--yes {

  color: #060302;

  background: linear-gradient(180deg, #fff7e9, #cfc2ad);

  border-color: rgba(255,247,233,.92);

  box-shadow: 0 16px 38px rgba(198,25,25,.2), 0 0 0 1px rgba(255,255,255,.22) inset;

}

.age-btn--no {

  color: #fff4ec;

  background: linear-gradient(180deg, rgba(142, 4, 4, .96), rgba(62, 0, 0, .96));

  border-color: rgba(198,25,25,.74);

}

@keyframes ageGateBuild {

  0% { opacity: 0; transform: translateY(26px) scale(.96); clip-path: inset(48% 0 48% 0 round 30px); filter: blur(4px); }

  54% { opacity: 1; clip-path: inset(0 0 0 0 round 30px); filter: blur(0); }

  100% { opacity: 1; transform: translateY(0) scale(1); clip-path: inset(0 0 0 0 round 30px); filter: blur(0); }

}

@keyframes handoffGlitchBurst {

  0% { opacity: 0; transform: translate3d(-50%,-50%,0) scale(1.005); filter: grayscale(1) contrast(1.35) brightness(1.12); clip-path: inset(0 0 0 0); }

  24% { opacity: .5; transform: translate3d(calc(-50% - 6px),calc(-50% + 2px),0) scale(1.012); filter: grayscale(1) contrast(1.9) brightness(1.2); clip-path: inset(10% 0 8% 0); }

  54% { opacity: .38; transform: translate3d(calc(-50% + 8px),calc(-50% - 1px),0) scale(1.004); filter: grayscale(1) contrast(1.7) brightness(.95); clip-path: inset(0 0 18% 0); }

  78% { opacity: .42; transform: translate3d(calc(-50% - 3px),-50%,0) scale(1.008); filter: grayscale(1) contrast(1.85) brightness(1.16); clip-path: inset(28% 0 12% 0); }

  100% { opacity: 0; transform: translate3d(-50%,-50%,0) scale(1); filter: grayscale(1) contrast(1.35) brightness(1); clip-path: inset(0 0 0 0); visibility: hidden; }

}

@keyframes handoffGlitchSliceA {

  0% { transform: translateX(-1.2vw); opacity: .08; }

  32% { transform: translateX(1.8vw); opacity: .36; }

  62% { transform: translateX(-2.4vw) skewX(5deg); opacity: .24; }

  100% { transform: translateX(0); opacity: 0; }

}

@keyframes handoffGlitchSliceB {

  0% { transform: translateY(-.8vh); opacity: .12; }

  36% { transform: translateY(1.2vh); opacity: .34; }

  68% { transform: translateY(-.6vh) scaleY(1.08); opacity: .22; }

  100% { transform: translateY(0); opacity: 0; }

}

@keyframes pentagramSpin { to { transform: rotate(360deg); } }

@keyframes ringDrift { to { transform: rotate(-360deg); } }

@keyframes unlockRingDrift { to { transform: rotate(360deg); } }

@keyframes targetingPulse { 0%, 100% { opacity: .38; } 50% { opacity: .62; } }

@keyframes ritualTick { 0% { opacity: .22; filter: drop-shadow(0 0 10px rgba(198,25,25,.18)); } 100% { opacity: .38; filter: drop-shadow(0 0 22px rgba(198,25,25,.36)); } }

@keyframes sigilFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }

@keyframes sigilSummon {

  0% { opacity: 0; transform: scale(.72) rotate(-16deg); filter: blur(5px) drop-shadow(0 0 0 rgba(198,25,25,0)); }

  56% { opacity: 1; transform: scale(1.06) rotate(3deg); filter: blur(0) drop-shadow(0 0 40px rgba(198,25,25,.72)); }

  100% { opacity: 1; transform: scale(1) rotate(0); filter: blur(0) drop-shadow(0 0 30px rgba(198,25,25,.52)); }

}

@keyframes gateBorderWake {

  0% { opacity: 0; filter: brightness(1); }

  42% { opacity: 1; filter: brightness(1.9); }

  100% { opacity: .82; filter: brightness(1); }

}

@keyframes frameBloodCharge {

  0% { box-shadow: 0 38px 120px rgba(0,0,0,.78), 0 0 0 1px rgba(0,0,0,.45) inset, 0 0 60px rgba(198,25,25,.1); }

  48% { box-shadow: 0 38px 120px rgba(0,0,0,.78), 0 0 0 1px rgba(0,0,0,.45) inset, 0 0 130px rgba(198,25,25,.34); }

  100% { box-shadow: 0 38px 120px rgba(0,0,0,.78), 0 0 0 1px rgba(0,0,0,.45) inset, 0 0 90px rgba(198,25,25,.24); }

}

@keyframes bloodAuraRise {

  0% { opacity: 0; transform: translateY(-26px) scaleY(.32); }

  65% { opacity: 1; transform: translateY(3px) scaleY(1.08); }

  100% { opacity: 1; transform: translateY(0) scaleY(1); }

}

@keyframes bloodRunDown {

  0% {

    opacity: 0;

    transform: translate3d(0, -104%, 0) rotate(var(--blood-rotate, 0deg));

  }

  18% {

    opacity: var(--blood-final-opacity, .72);

  }

  100% {

    opacity: var(--blood-final-opacity, .72);

    transform: translate3d(0, var(--blood-final-y, -7%), 0) rotate(var(--blood-rotate, 0deg));

  }

}

@keyframes sigilGlow { to { opacity: .48; transform: scale(1.16); } }

@keyframes altarPulse { to { opacity: .48; transform: translate(-50%, -50%) scale(1.08); } }

@keyframes bloodAura { to { opacity: .72; transform: translateY(10px); } }

.intro-status {

  position: absolute;

  left: clamp(18px, 4vw, 56px);

  bottom: clamp(22px, 5vw, 58px);

  display: flex;

  align-items: center;

  gap: 12px;

  color: rgba(255,255,255,.72);

  font: 800 11px/1 Inter, sans-serif;

  letter-spacing: .28em;

  text-transform: uppercase;

}

.intro-status span {

  width: 9px;

  height: 9px;

  border-radius: 50%;

  background: var(--red);

  box-shadow: 0 0 24px var(--red);

  animation: pulse 1s infinite alternate;

}

@keyframes pulse { to { opacity: .36; transform: scale(.72); } }



/* v38: cleaner EYCER age gate — no blood, no cheap gimmicks */

.age-gate {

  background:

    radial-gradient(circle at 50% 32%, rgba(198,25,25,.18) 0 10rem, rgba(0,0,0,.18) 28rem, rgba(0,0,0,.84) 100%),

    linear-gradient(90deg, rgba(0,0,0,.86), rgba(0,0,0,.36), rgba(0,0,0,.86));

  backdrop-filter: blur(3px) saturate(.82);

}

.age-gate__blood { display: none !important; }

.age-gate__frame {

  width: min(650px, calc(100vw - 46px));

  padding: clamp(34px, 4.6vw, 58px) clamp(26px, 5vw, 64px) clamp(28px, 4vw, 46px);

  border: 1px solid rgba(255,255,255,.18);

  border-radius: 0;

  background:

    linear-gradient(180deg, rgba(255,255,255,.105), rgba(255,255,255,.025) 23%, transparent 44%),

    radial-gradient(circle at 50% -8%, rgba(198,25,25,.34), transparent 42%),

    linear-gradient(90deg, transparent 0 10%, rgba(255,255,255,.07) 10.2% 10.45%, transparent 10.7% 89.3%, rgba(255,255,255,.07) 89.55% 89.8%, transparent 90%),

    linear-gradient(145deg, rgba(9, 10, 10, .97), rgba(2, 3, 3, .92));

  box-shadow:

    0 44px 140px rgba(0,0,0,.86),

    0 0 0 1px rgba(255,255,255,.035) inset,

    0 0 80px rgba(198,25,25,.16);

  overflow: hidden;

  clip-path: polygon(26px 0, calc(100% - 26px) 0, 100% 26px, 100% calc(100% - 26px), calc(100% - 26px) 100%, 26px 100%, 0 calc(100% - 26px), 0 26px);

}

.age-gate.is-visible .age-gate__frame {

  clip-path: polygon(26px 0, calc(100% - 26px) 0, 100% 26px, 100% calc(100% - 26px), calc(100% - 26px) 100%, 26px 100%, 0 calc(100% - 26px), 0 26px);

  animation: gatePanelWake 1.1s .12s both;

}

.age-gate__frame::before {

  inset: 0;

  border-radius: 0;

  padding: 1px;

  background: linear-gradient(115deg, transparent 0 8%, rgba(255,255,255,.72) 20%, rgba(198,25,25,.76) 48%, rgba(255,255,255,.22) 66%, transparent 92%);

  opacity: .72;

  animation: gateScannerLine 2.8s .35s ease-out both;

}

.age-gate__frame::after {

  inset: auto 9% 18px;

  height: 1px;

  background: linear-gradient(90deg, transparent, rgba(255,255,255,.42), rgba(198,25,25,.68), rgba(255,255,255,.42), transparent);

  opacity: .58;

  filter: drop-shadow(0 0 16px rgba(198,25,25,.45));

  animation: none;

}

.age-gate__sigil {

  width: clamp(106px, 13vw, 148px);

  margin-bottom: 22px;

  opacity: .9;

  filter: drop-shadow(0 0 26px rgba(198,25,25,.38));

  animation: sigilSummon .9s .22s both, sigilFloat 5.8s 1.2s ease-in-out infinite;

}

.pentagram { animation: pentagramSpin 34s linear infinite; }

.age-gate__kicker {

  margin-bottom: 10px;

  font: 700 13px/1 Rajdhani, system-ui, sans-serif;

  letter-spacing: .54em;

  text-transform: uppercase;

  color: rgba(255,255,255,.66);

}

.age-gate h2 {

  font-family: Orbitron, Rajdhani, system-ui, sans-serif;

  font-size: clamp(31px, 5.1vw, 62px);

  line-height: .94;

  font-weight: 900;

  letter-spacing: .015em;

  text-transform: uppercase;

  text-shadow: 0 0 28px rgba(198,25,25,.24), 0 16px 42px rgba(0,0,0,.84);

}

.age-gate__copy {

  max-width: 360px;

  margin-top: 16px;

  font: 600 clamp(15px, 1.45vw, 17px)/1.35 Rajdhani, system-ui, sans-serif;

  letter-spacing: .04em;

  color: rgba(255,255,255,.62);

}

.age-gate__actions {

  width: min(390px, 100%);

  gap: 12px;

  margin-top: 30px;

}

.age-btn {

  min-height: 58px;

  border-radius: 0;

  clip-path: polygon(13px 0, 100% 0, calc(100% - 13px) 100%, 0 100%);

  font: 800 16px/1 Orbitron, Rajdhani, sans-serif;

  letter-spacing: .08em;

}

.age-btn--yes {

  background: linear-gradient(180deg, #f3eee1, #b6aa98);

  border-color: rgba(255,255,255,.82);

}

.age-btn--no {

  background: linear-gradient(180deg, rgba(132, 8, 8, .92), rgba(40, 0, 0, .96));

}

@keyframes gatePanelWake {

  0% { opacity: 0; transform: translateY(14px) scale(.99); }

  62% { opacity: 1; transform: translateY(0) scale(1.004); }

  100% { opacity: 1; transform: translateY(0) scale(1); }

}

@keyframes gateScannerLine {

  0% { opacity: 0; filter: brightness(1); }

  44% { opacity: .9; filter: brightness(1.65); }

  100% { opacity: .72; filter: brightness(1); }

}



/* v39: Panel wirkt geschlossener/fertiger, ohne Blut-Gimmicks */

.age-gate__frame {

  width: min(620px, calc(100vw - 44px));

  padding: clamp(38px, 4.8vw, 60px) clamp(28px, 5.2vw, 66px) clamp(30px, 4vw, 46px);

  border: 1px solid rgba(255,255,255,.2);

  background:

    linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.035) 24%, rgba(255,255,255,.01) 100%),

    radial-gradient(circle at 50% -10%, rgba(198,25,25,.32), transparent 45%),

    repeating-linear-gradient(90deg, rgba(255,255,255,.028) 0 1px, transparent 1px 44px),

    linear-gradient(145deg, rgba(11, 12, 12, .98), rgba(2, 3, 3, .95));

  box-shadow:

    0 48px 150px rgba(0,0,0,.9),

    0 0 0 1px rgba(255,255,255,.06) inset,

    0 0 0 10px rgba(0,0,0,.18),

    0 0 72px rgba(198,25,25,.18);

  clip-path: polygon(22px 0, calc(100% - 22px) 0, 100% 22px, 100% calc(100% - 22px), calc(100% - 22px) 100%, 22px 100%, 0 calc(100% - 22px), 0 22px);

}

.age-gate.is-visible .age-gate__frame {

  clip-path: polygon(22px 0, calc(100% - 22px) 0, 100% 22px, 100% calc(100% - 22px), calc(100% - 22px) 100%, 22px 100%, 0 calc(100% - 22px), 0 22px);

}

.age-gate__frame > * { position: relative; z-index: 2; }

.age-gate__frame::before {

  z-index: 1;

  inset: 12px;

  padding: 1px;

  background: linear-gradient(135deg, rgba(255,255,255,.52), rgba(198,25,25,.76) 35%, rgba(255,255,255,.16) 58%, rgba(255,255,255,.38));

  opacity: .72;

  pointer-events: none;

}

.age-gate__frame::after {

  z-index: 1;

  inset: 0;

  height: auto;

  opacity: .74;

  background:

    linear-gradient(90deg, rgba(255,255,255,.62), rgba(255,255,255,.62)) 18px 18px / 58px 1px no-repeat,

    linear-gradient(180deg, rgba(255,255,255,.62), rgba(255,255,255,.62)) 18px 18px / 1px 58px no-repeat,

    linear-gradient(90deg, rgba(198,25,25,.72), rgba(198,25,25,.72)) calc(100% - 76px) 18px / 58px 1px no-repeat,

    linear-gradient(180deg, rgba(198,25,25,.72), rgba(198,25,25,.72)) calc(100% - 19px) 18px / 1px 58px no-repeat,

    linear-gradient(90deg, rgba(198,25,25,.58), rgba(198,25,25,.58)) 18px calc(100% - 19px) / 58px 1px no-repeat,

    linear-gradient(180deg, rgba(198,25,25,.58), rgba(198,25,25,.58)) 18px calc(100% - 76px) / 1px 58px no-repeat,

    linear-gradient(90deg, rgba(255,255,255,.36), rgba(255,255,255,.36)) calc(100% - 76px) calc(100% - 19px) / 58px 1px no-repeat,

    linear-gradient(180deg, rgba(255,255,255,.36), rgba(255,255,255,.36)) calc(100% - 19px) calc(100% - 76px) / 1px 58px no-repeat,

    linear-gradient(90deg, transparent, rgba(255,255,255,.18), transparent) 50% 25px / 64% 1px no-repeat,

    linear-gradient(90deg, transparent, rgba(198,25,25,.42), transparent) 50% calc(100% - 25px) / 64% 1px no-repeat;

  filter: drop-shadow(0 0 12px rgba(198,25,25,.22));

  pointer-events: none;

}

.age-gate__sigil {

  width: clamp(96px, 12vw, 132px);

  margin-bottom: 20px;

}

.age-gate__kicker {

  margin-bottom: 12px;

  letter-spacing: .48em;

}

.age-gate h2 {

  font-size: clamp(30px, 4.8vw, 58px);

  letter-spacing: .025em;

}

.age-gate__copy {

  margin-top: 14px;

  color: rgba(255,255,255,.72);

  text-transform: uppercase;

  letter-spacing: .18em;

}

.age-btn {

  min-height: 56px;

  border-color: rgba(255,255,255,.24);

  box-shadow: 0 0 0 1px rgba(0,0,0,.36) inset;

}

.age-btn--yes { box-shadow: 0 18px 44px rgba(198,25,25,.16), 0 0 0 1px rgba(255,255,255,.28) inset; }

.age-btn--no { box-shadow: inset 0 0 0 1px rgba(255,255,255,.08), 0 16px 36px rgba(94,0,0,.26); }



.site-header {

  position: fixed;

  top: 0;

  left: 0;

  right: 0;

  z-index: 40;

  display: flex;

  align-items: center;

  justify-content: space-between;

  padding: 22px clamp(18px, 4vw, 58px);

  opacity: 0;

  transform: translateY(-18px);

  transition: opacity .8s var(--ease), transform .8s var(--ease), background .3s ease, border .3s ease;

}

.intro-complete .site-header { opacity: 1; transform: translateY(0); }

.scrolled .site-header {

  background: rgba(2,4,3,.72);

  border-bottom: 1px solid rgba(255,255,255,.08);

  backdrop-filter: blur(16px);

}

.brand {

  font-family: Anton, Impact, sans-serif;

  font-size: 24px;

  letter-spacing: .16em;

  text-shadow: 0 0 24px rgba(198,25,25,.35);

}

.site-header nav { display: flex; gap: 20px; }

.site-header nav a {

  color: rgba(255,255,255,.72);

  font-size: 12px;

  font-weight: 900;

  letter-spacing: .18em;

  text-transform: uppercase;

}

.site-header nav a:hover { color: #fff; }



.hero {

  min-height: 145vh;

  position: relative;

}

.scene {

  position: sticky;

  top: 0;

  z-index: 2;

  height: 100vh;

  overflow: hidden;

  background: transparent;

}

.scene-layer {

  position: absolute;

  inset: 0;

  width: 100%;

  height: 100%;

  object-fit: cover;

  object-position: center center;

  user-select: none;

  pointer-events: none;

}

.person-layer {

  z-index: 3;

  filter: contrast(1.03) saturate(.95) brightness(.96) drop-shadow(0 42px 42px rgba(0,0,0,.38));

  transform-origin: 50% 55%;

  will-change: transform, opacity, filter;

}

.blood-light {

  position: absolute;

  z-index: 4;

  inset: auto 0 0 0;

  height: 38vh;

  pointer-events: none;

  opacity: .4;

  background: radial-gradient(circle at 50% 20%, rgba(198,25,25,.32), transparent 25rem);

  mix-blend-mode: screen;

}



.hero-copy {

  position: fixed;

  z-index: 8;

  left: clamp(18px, 7vw, 110px);

  top: 50%;

  width: min(620px, calc(100vw - 36px));

  transform: translateY(-44%);

  opacity: 0;

  transition: opacity 1s var(--ease), transform 1s var(--ease);

  pointer-events: none;

}

.intro-complete .hero-copy { opacity: 1; transform: translateY(-50%); pointer-events: auto; }

.kicker {

  margin: 0 0 16px;

  color: rgba(255,255,255,.72);

  font-size: 12px;

  font-weight: 900;

  letter-spacing: .32em;

  text-transform: uppercase;

}

h1, h2 {

  margin: 0;

  font-family: Anton, Impact, sans-serif;

  font-weight: 400;

  text-transform: uppercase;

}

h1 {

  font-size: clamp(86px, 15vw, 210px);

  line-height: .82;

  letter-spacing: .08em;

  text-shadow: 0 10px 0 rgba(0,0,0,.2), 0 0 42px rgba(198,25,25,.34);

}

.subline {

  max-width: 520px;

  margin: 18px 0 0;

  color: rgba(255,255,255,.83);

  font-size: clamp(14px, 1.6vw, 20px);

  font-weight: 800;

  letter-spacing: .12em;

  text-transform: uppercase;

}

.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }

.btn {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  min-height: 48px;

  padding: 0 20px;

  border: 1px solid var(--line);

  border-radius: 999px;

  font-size: 12px;

  font-weight: 900;

  letter-spacing: .16em;

  text-transform: uppercase;

  background: rgba(0,0,0,.35);

  backdrop-filter: blur(14px);

}

.btn.primary { background: #f2eee4; color: #070706; border-color: #f2eee4; }

.btn.ghost:hover, .btn.primary:hover { transform: translateY(-2px); }

.scroll-cue {

  position: absolute;

  z-index: 9;

  left: 50%;

  bottom: calc(45vh + 18px);

  transform: translateX(-50%);

  display: grid;

  gap: 10px;

  place-items: center;

  color: rgba(255,255,255,.62);

  font-size: 10px;

  font-weight: 900;

  letter-spacing: .22em;

  text-transform: uppercase;

  opacity: 0;

  transition: opacity .8s var(--ease);

}

.intro-complete .scroll-cue { opacity: 1; }

.scroll-cue span { width: 1px; height: 44px; background: linear-gradient(transparent, #fff, transparent); }



.link-section {

  position: relative;

  z-index: 12;

  max-width: 1180px;

  margin: 0 auto;

  padding: clamp(70px, 11vw, 132px) clamp(18px, 4vw, 56px);

}

.link-section::before {

  content: "";

  position: absolute;

  inset: 26px clamp(10px, 2vw, 28px);

  z-index: -1;

  border-radius: 34px;

  background: linear-gradient(180deg, rgba(2,4,3,.38), rgba(2,4,3,.66));

  border: 1px solid rgba(255,255,255,.06);

  backdrop-filter: blur(2px);

}

.section-head { text-align: center; max-width: 760px; margin: 0 auto 34px; }

.section-head h2 { font-size: clamp(44px, 7vw, 92px); line-height: .9; letter-spacing: .04em; }

.section-head p:not(.kicker) { color: var(--muted); margin: 18px auto 0; font-size: 16px; }

.link-grid { display: grid; gap: 16px; }

.streaming-grid { grid-template-columns: repeat(3, 1fr); }

.social-grid { grid-template-columns: repeat(2, 1fr); max-width: 790px; margin: 0 auto; }

.link-card {

  position: relative;

  min-height: 210px;

  display: flex;

  flex-direction: column;

  justify-content: flex-end;

  padding: 24px;

  overflow: hidden;

  border: 1px solid rgba(255,255,255,.12);

  border-radius: 22px;

  background:

    linear-gradient(145deg, rgba(255,255,255,.08), rgba(255,255,255,.025)),

    rgba(5, 10, 9, .78);

  box-shadow: 0 24px 70px rgba(0,0,0,.42);

  transition: transform .35s var(--ease), border-color .35s ease, background .35s ease;

}

.link-card::before {

  content: "";

  position: absolute;

  inset: -1px;

  background: radial-gradient(circle at 25% 0%, var(--accent, rgba(255,255,255,.2)), transparent 16rem);

  opacity: .34;

}

.link-card:hover { transform: translateY(-7px); border-color: rgba(255,255,255,.34); }

.card-index, .card-title, .card-copy { position: relative; z-index: 1; }

.card-index { position: absolute; top: 22px; right: 24px; color: rgba(255,255,255,.42); font-weight: 900; letter-spacing: .18em; }

.card-title { font-family: Anton, Impact, sans-serif; font-size: clamp(32px, 4vw, 56px); letter-spacing: .04em; text-transform: uppercase; }

.card-copy { color: rgba(255,255,255,.72); margin-top: 8px; font-weight: 700; }

.spotify { --accent: rgba(30, 215, 96, .55); }

.soundcloud { --accent: rgba(255, 85, 0, .52); }

.youtube { --accent: rgba(255, 0, 0, .52); }

.instagram { --accent: rgba(225, 48, 108, .55); }

.tiktok { --accent: rgba(0, 242, 234, .43); }

.footer {

  position: relative;

  z-index: 12;

  display: flex;

  justify-content: space-between;

  gap: 18px;

  padding: 36px clamp(18px, 4vw, 56px);

  border-top: 1px solid rgba(255,255,255,.1);

  color: rgba(255,255,255,.5);

  font-size: 12px;

  font-weight: 800;

  letter-spacing: .18em;

  text-transform: uppercase;

}



@keyframes fyfHeroPose {

  0%, 100% { transform: translate(-50%, -50%) scale(1) rotate(0deg); opacity: .88; }

  42% { transform: translate(-50.35%, -50.85%) scale(1.018) rotate(-.18deg); opacity: .98; }

  68% { transform: translate(-49.8%, -49.65%) scale(1.008) rotate(.14deg); opacity: .93; }

}



/* v40 homepage polish */

.scrolled .site-header {

  background: transparent;

  border-bottom-color: transparent;

  backdrop-filter: none;

}

.brand,

h1,

h2,

.card-title {

  font-family: Orbitron, Rajdhani, system-ui, sans-serif;

}

.brand {

  font-weight: 900;

  letter-spacing: .2em;

}

.hero {

  min-height: 128vh;

}

.blood-light {

  display: none;

}

.hero-copy {

  left: 50%;

  top: 57%;

  width: min(760px, calc(100vw - 36px));

  text-align: center;

  transform: translate(-50%, -38px);

  transition: opacity 1.15s var(--ease), transform 1.15s var(--ease);

}

.intro-complete .hero-copy {

  opacity: 1;

  transform: translate(-50%, -50%);

}

.hero-copy .kicker {

  margin-bottom: 14px;

  color: rgba(255,255,255,.74);

  letter-spacing: .46em;

}

h1 {

  font-size: clamp(72px, 10.5vw, 160px);

  line-height: .86;

  letter-spacing: .11em;

  font-weight: 900;

  text-shadow: 0 0 34px rgba(255,255,255,.28), 0 0 64px rgba(198,25,25,.26), 0 20px 50px rgba(0,0,0,.68);

}

.subline {

  margin: 16px auto 0;

  max-width: 640px;

  color: rgba(255,255,255,.82);

  font-family: Rajdhani, system-ui, sans-serif;

  font-size: clamp(16px, 1.75vw, 22px);

  font-weight: 700;

  letter-spacing: .2em;

}

.hero-actions {

  justify-content: center;

  margin-top: 28px;

}

.btn {

  border-radius: 0;

  clip-path: polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%);

  font-family: Orbitron, Rajdhani, sans-serif;

}

.link-section {

  max-width: 1120px;

  padding: clamp(58px, 8vw, 104px) clamp(20px, 4vw, 52px);

}

.link-section::before {

  display: none;

}

.section-head {

  max-width: 820px;

  margin-bottom: 28px;

}

.section-head .kicker {

  margin-bottom: 14px;

  color: rgba(255,255,255,.66);

  font-family: Orbitron, Rajdhani, sans-serif;

  letter-spacing: .46em;

}

.section-head h2 {

  font-size: clamp(40px, 6.4vw, 82px);

  line-height: .92;

  font-weight: 900;

  letter-spacing: .04em;

  text-shadow: 0 0 30px rgba(255,255,255,.18), 0 0 46px rgba(198,25,25,.16);

}

.section-head p:not(.kicker) {

  max-width: 520px;

  color: rgba(255,255,255,.68);

  font: 600 18px/1.35 Rajdhani, system-ui, sans-serif;

  letter-spacing: .04em;

}

.link-grid {

  gap: 18px;

  align-items: stretch;

}

.link-card {

  min-height: 184px;

  display: grid;

  place-items: center;

  align-content: center;

  gap: 12px;

  padding: 26px 22px;

  text-align: center;

  border-radius: 0;

  clip-path: polygon(18px 0, 100% 0, 100% calc(100% - 18px), calc(100% - 18px) 100%, 0 100%, 0 18px);

  border: 1px solid rgba(255,255,255,.18);

  background:

    linear-gradient(180deg, rgba(255,255,255,.09), rgba(255,255,255,.025)),

    radial-gradient(circle at 50% 0, var(--accent, rgba(255,255,255,.2)), transparent 62%),

    rgba(4, 7, 7, .86);

  box-shadow: 0 24px 70px rgba(0,0,0,.46), 0 0 0 1px rgba(255,255,255,.04) inset;

}

.link-card::before {

  inset: 12px;

  border: 1px solid rgba(255,255,255,.08);

  background: linear-gradient(90deg, transparent, rgba(255,255,255,.12), transparent) 50% 0 / 70% 1px no-repeat;

  opacity: .9;

  pointer-events: none;

}

.link-card::after {

  content: "";

  position: absolute;

  inset: auto 18px 16px;

  height: 1px;

  background: linear-gradient(90deg, transparent, var(--brand, rgba(255,255,255,.5)), transparent);

  opacity: .7;

}

.link-card:hover {

  transform: translateY(-5px);

  border-color: rgba(255,255,255,.34);

  background:

    linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.035)),

    radial-gradient(circle at 50% 0, var(--accent, rgba(255,255,255,.2)), transparent 58%),

    rgba(5, 8, 8, .9);

}

.card-icon,

.card-title,

.card-copy { position: relative; z-index: 1; }

.card-icon {

  width: 46px;

  height: 46px;

  display: grid;

  place-items: center;

  color: #fff;

  background: var(--brand, rgba(255,255,255,.72));

  box-shadow: 0 0 34px color-mix(in srgb, var(--brand, #fff) 42%, transparent);

  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);

}

.card-icon svg {

  width: 26px;

  height: 26px;

  fill: currentColor;

}

.card-title {

  font-size: clamp(22px, 2.8vw, 38px);

  line-height: 1;

  font-weight: 900;

  letter-spacing: .055em;

  text-transform: uppercase;

}

.card-copy {

  margin-top: -2px;

  color: rgba(255,255,255,.74);

  font: 700 16px/1.2 Rajdhani, system-ui, sans-serif;

  letter-spacing: .045em;

}

.spotify { --accent: rgba(30, 215, 96, .25); --brand: #1ed760; }

.soundcloud { --accent: rgba(255, 85, 0, .28); --brand: #ff5500; }

.youtube { --accent: rgba(255, 0, 0, .25); --brand: #ff1b1b; }

.instagram { --accent: rgba(225, 48, 108, .26); --brand: #e1306c; }

.tiktok { --accent: rgba(0, 242, 234, .25); --brand: #00f2ea; }



/* v43: readable content stage + cleaner platform cards */

.scrolled .scroll-cue {

  opacity: 0 !important;

  visibility: hidden;

  pointer-events: none;

  transform: translate(-50%, 12px);

}

.link-section {

  isolation: isolate;

  padding-top: clamp(74px, 9vw, 118px);

  padding-bottom: clamp(74px, 9vw, 118px);

}

.link-section::before {

  display: block;

  inset: clamp(18px, 3vw, 34px) clamp(12px, 2.6vw, 34px);

  z-index: -1;

  border-radius: 0;

  clip-path: polygon(28px 0, calc(100% - 28px) 0, 100% 28px, 100% calc(100% - 28px), calc(100% - 28px) 100%, 28px 100%, 0 calc(100% - 28px), 0 28px);

  background:

    linear-gradient(180deg, rgba(2, 3, 3, .9), rgba(2, 3, 3, .72) 48%, rgba(2, 3, 3, .9)),

    radial-gradient(circle at 50% 0, rgba(255,255,255,.06), transparent 52%);

  border: 1px solid rgba(255,255,255,.11);

  box-shadow: 0 38px 120px rgba(0,0,0,.64), 0 0 0 1px rgba(255,255,255,.03) inset;

  backdrop-filter: blur(8px) brightness(.45) saturate(.8);

}

.section-head {

  width: fit-content;

  max-width: min(860px, 100%);

  padding: 0 clamp(12px, 2vw, 22px);

}

.section-head h2 {

  color: rgba(255,255,255,.96);

  text-shadow: 0 2px 0 rgba(0,0,0,.9), 0 0 22px rgba(0,0,0,.9), 0 0 34px rgba(198,25,25,.18);

}

.section-head p:not(.kicker),

.section-head .kicker {

  text-shadow: 0 2px 14px rgba(0,0,0,.92);

}

.link-grid {

  width: 100%;

  max-width: 1040px;

  margin-inline: auto;

  gap: 14px;

}

.link-card {

  min-height: 156px;

  padding: 24px 22px 22px;

  gap: 10px;

  background:

    linear-gradient(180deg, rgba(255,255,255,.075), rgba(255,255,255,.018)),

    linear-gradient(135deg, rgba(0,0,0,.92), rgba(9, 11, 11, .96));

  border-color: rgba(255,255,255,.16);

  box-shadow: 0 26px 72px rgba(0,0,0,.56), 0 0 0 1px rgba(255,255,255,.035) inset;

}

.link-card::before {

  inset: 0;

  border: 0;

  background:

    linear-gradient(90deg, var(--brand, rgba(255,255,255,.7)), transparent 42%, transparent 58%, var(--brand, rgba(255,255,255,.7))) 0 0 / 100% 2px no-repeat,

    radial-gradient(circle at 50% 0, var(--accent, rgba(255,255,255,.18)), transparent 56%);

  opacity: .78;

}

.link-card::after {

  inset: auto 24px 18px;

  opacity: .45;

}

.link-card:hover {

  transform: translateY(-4px);

  background:

    linear-gradient(180deg, rgba(255,255,255,.1), rgba(255,255,255,.024)),

    linear-gradient(135deg, rgba(0,0,0,.94), rgba(11, 13, 13, .98));

}

.card-icon {

  width: 50px;

  height: 50px;

  border-radius: 0;

  color: #050505;

  background: color-mix(in srgb, var(--brand, #fff) 88%, #fff 12%);

  box-shadow: 0 0 0 1px rgba(255,255,255,.26) inset, 0 0 30px color-mix(in srgb, var(--brand, #fff) 28%, transparent);

}

.card-title {

  max-width: 100%;

  color: rgba(255,255,255,.96);

  font-size: clamp(21px, 2.3vw, 32px);

  letter-spacing: .045em;

  text-shadow: 0 2px 16px rgba(0,0,0,.72);

  overflow-wrap: normal;

  white-space: nowrap;

}

.card-copy {

  color: rgba(255,255,255,.72);

  font-size: 15px;

  text-shadow: 0 1px 10px rgba(0,0,0,.82);

}



@media (max-width: 820px) {

  .site-header { padding: 16px 18px; }

  .site-header nav { display: none; }

  .brand { font-size: 20px; letter-spacing: .12em; }

  .hero { min-height: 138vh; }

  .hero-copy { left: 50%; top: 57%; width: min(340px, calc(100vw - 28px)); transform: translate(-50%, -40px); }

  .intro-complete .hero-copy { transform: translate(-50%, -50%); }

  h1 { font-size: clamp(46px, 15vw, 66px); letter-spacing: .045em; }

  .subline { font-size: 12px; line-height: 1.45; max-width: 310px; letter-spacing: .13em; }

  .backdrop-logo { width: 132vw; top: 45%; opacity: .78; }

  .scene-layer { object-position: center center; }

  .hero-actions { gap: 10px; }

  .btn { min-height: 44px; padding: 0 16px; font-size: 10px; }

  .age-gate { padding: 16px; align-items: center; }

  .age-gate__frame {

    width: min(330px, calc(100vw - 34px));

    min-height: 0;

    max-width: calc(100vw - 34px);

    border-radius: 0;

    padding: 26px 18px 22px;

    clip-path: polygon(18px 0, calc(100% - 18px) 0, 100% 18px, 100% calc(100% - 18px), calc(100% - 18px) 100%, 18px 100%, 0 calc(100% - 18px), 0 18px);

    background:

      linear-gradient(180deg, rgba(255,255,255,.13), rgba(255,255,255,.035) 24%, rgba(255,255,255,.01) 100%),

      radial-gradient(circle at 50% -8%, rgba(198,25,25,.28), transparent 42%),

      linear-gradient(145deg, rgba(9, 10, 10, .98), rgba(2, 3, 3, .96));

  }

  .age-gate.is-visible .age-gate__frame {

    clip-path: polygon(18px 0, calc(100% - 18px) 0, 100% 18px, 100% calc(100% - 18px), calc(100% - 18px) 100%, 18px 100%, 0 calc(100% - 18px), 0 18px);

  }

  .age-gate__frame::before { inset: 10px; }

  .age-gate__frame::after { inset: 0; height: auto; }

  .age-gate__sigil { display: grid; width: 82px; margin-bottom: 12px; }

  .age-gate__blood { display: none !important; }

  .age-gate h2 {

    max-width: 286px;

    font-size: clamp(25px, 7vw, 32px);

    line-height: .96;

    letter-spacing: .015em;

  }

  .age-gate__kicker { font-size: 9px; letter-spacing: .28em; }

  .age-gate__copy { font-size: 12px; max-width: 270px; margin-top: 10px; letter-spacing: .14em; }

  .age-gate__actions { grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 18px; width: min(240px, 100%); }

  .age-btn { min-height: 46px; font-size: 14px; letter-spacing: .04em; padding: 0 10px; }

  .streaming-grid, .social-grid { grid-template-columns: 1fr; }

  .link-section { padding: 54px 18px; }

  .section-head h2 { font-size: clamp(34px, 11vw, 52px); }

  .section-head p:not(.kicker) { font-size: 15px; }

  .link-card { min-height: 150px; border-radius: 0; }

  .card-title { font-size: clamp(24px, 8vw, 34px); }

  .footer { flex-direction: column; }

}



/* v46: Hero-Lesbarkeit, hellere Content-Stage, echte Plattform-Logos ohne Kachelblock */

.hero-copy {

  isolation: isolate;

}

.hero-copy::before {

  content: "";

  position: absolute;

  z-index: -1;

  left: 50%;

  top: 50%;

  width: min(940px, 104vw);

  height: min(320px, 42vh);

  transform: translate(-50%, -50%);

  pointer-events: none;

  background:

    radial-gradient(ellipse at 50% 50%, rgba(0,0,0,.56), rgba(0,0,0,.34) 44%, rgba(0,0,0,.08) 76%, transparent 100%);

  filter: blur(10px);

  opacity: .9;

}

.hero-copy .kicker,

.subline {

  text-shadow: 0 2px 12px rgba(0,0,0,.94), 0 0 26px rgba(0,0,0,.72);

}

h1 {

  text-shadow:

    0 2px 0 rgba(0,0,0,.95),

    0 10px 34px rgba(0,0,0,.92),

    0 0 42px rgba(0,0,0,.8),

    0 0 34px rgba(198,25,25,.22);

}

.link-section::before {

  inset: clamp(18px, 3vw, 34px) clamp(12px, 2.6vw, 34px);

  background:

    linear-gradient(180deg, rgba(10, 12, 12, .68), rgba(8, 10, 10, .54) 48%, rgba(10, 12, 12, .68)),

    radial-gradient(circle at 50% 0, rgba(255,255,255,.12), transparent 54%);

  border-color: rgba(255,255,255,.16);

  box-shadow: 0 30px 92px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.04) inset;

  backdrop-filter: blur(5px) brightness(.82) saturate(.9);

}

.section-head h2 {

  text-shadow: 0 2px 0 rgba(0,0,0,.8), 0 0 22px rgba(0,0,0,.74), 0 0 28px rgba(198,25,25,.14);

}

.link-card {

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  min-height: 164px;

  gap: 9px;

  text-align: center;

}

.link-card > * {

  align-self: center;

}

.card-icon {

  width: 56px;

  height: 42px;

  display: flex;

  align-items: center;

  justify-content: center;

  color: var(--brand, #fff);

  background: transparent;

  box-shadow: none;

  clip-path: none;

  border-radius: 0;

  filter: drop-shadow(0 0 16px color-mix(in srgb, var(--brand, #fff) 42%, transparent));

}

.card-icon svg {

  width: 40px;

  height: 40px;

  display: block;

  fill: currentColor;

}

.spotify .card-icon svg { width: 38px; height: 38px; }

.soundcloud .card-icon svg { width: 48px; height: 48px; }

.youtube .card-icon svg { width: 44px; height: 44px; }

.instagram .card-icon svg { width: 39px; height: 39px; }

.tiktok .card-icon svg { width: 36px; height: 36px; }

.card-title {

  width: 100%;

  display: block;

  text-align: center;

  line-height: 1.02;

}

.card-copy {

  width: 100%;

  display: block;

  margin: 0;

  text-align: center;

}

.spotify { --brand: #1db954; }

.soundcloud { --brand: #ff5500; }

.youtube { --brand: #ff0000; }

.instagram { --brand: #e4405f; }

.tiktok { --brand: #00f2ea; }



@media (max-width: 820px) {

  .hero-copy::before {

    width: min(430px, 112vw);

    height: min(260px, 36vh);

    opacity: .86;

  }

  .link-section::before {

    background:

      linear-gradient(180deg, rgba(10, 12, 12, .72), rgba(8, 10, 10, .58) 48%, rgba(10, 12, 12, .72)),

      radial-gradient(circle at 50% 0, rgba(255,255,255,.1), transparent 54%);

  }

  .link-card {

    min-height: 142px;

    align-items: center;

    justify-content: center;

    text-align: center;

  }

}



/* v47: supplied original EYCER font */

.brand,

h1,

.hero-copy h1 {

  font-family: 'Lipi EYCER', Orbitron, Rajdhani, system-ui, sans-serif;

  font-weight: 400;

  letter-spacing: .035em;

}

.hero-copy h1 {

  font-size: clamp(92px, 13vw, 190px);

  line-height: .82;

}

.footer span:first-child {

  font-family: 'Lipi EYCER', Orbitron, Rajdhani, system-ui, sans-serif;

  font-weight: 400;

  letter-spacing: .04em;

}



@media (max-width: 820px) {

  .hero-copy h1 {

    font-size: clamp(58px, 18vw, 86px);

    letter-spacing: .02em;

  }

}



/* v49: EYCER-Font wirklich überall verwenden */

html,

body,

button,

a,

input,

textarea,

select,

.kicker,

.subline,

.btn,

.site-header nav a,

.section-head p,

.card-title,

.card-copy,

.footer,

.age-gate,

.age-gate__kicker,

.age-gate__copy,

.age-btn,

h1,

h2,

.brand {

  font-family: 'Lipi EYCER', Orbitron, Rajdhani, system-ui, sans-serif !important;

  font-weight: 400 !important;

}

body {

  letter-spacing: .035em;

}

.kicker,

.site-header nav a,

.btn,

.footer,

.age-gate__kicker,

.age-btn {

  letter-spacing: .16em;

}

.hero-copy .kicker,

.section-head .kicker {

  letter-spacing: .22em;

}

.subline,

.section-head p:not(.kicker),

.card-copy,

.age-gate__copy {

  letter-spacing: .055em;

}

h1,

h2,

.card-title,

.brand,

.footer span:first-child {

  letter-spacing: .035em;

}



@media (max-width: 820px) {

  .kicker,

  .site-header nav a,

  .btn,

  .footer,

  .age-gate__kicker,

  .age-btn {

    letter-spacing: .1em;

  }

}



/* v50: echte Plattform-Logo-Dateien statt selbstgebastelter Inline-Icons */

.platform-logo {

  width: 88px;

  height: 42px;

  display: flex;

  align-items: center;

  justify-content: center;

  color: var(--brand, #fff);

  background: transparent !important;

  box-shadow: none !important;

  clip-path: none !important;

  border-radius: 0 !important;

  filter: drop-shadow(0 0 16px color-mix(in srgb, var(--brand, #fff) 42%, transparent));

}

.platform-logo img {

  display: block;

  width: 100%;

  height: 100%;

  object-fit: contain;

}

.spotify .platform-logo img { width: 42px; }

.soundcloud .platform-logo img { width: 72px; }

.youtube .platform-logo img { width: 58px; }

.instagram .platform-logo img { width: 42px; }

.tiktok .platform-logo img { width: 38px; }

.tiktok { --brand: #ffffff; --accent: rgba(255,255,255,.18); }

.instagram { --brand: #e4405f; --accent: rgba(228,64,95,.24); }



@media (max-width: 820px) {

  .platform-logo { width: 82px; height: 40px; }

}



/* v53: transparente Navbar größer, ohne weißen Scroll-Strich */

.site-header {

  padding: 30px clamp(22px, 4.6vw, 72px);

  border-bottom: 0 !important;

  box-shadow: none !important;

  background: transparent !important;

  backdrop-filter: none !important;

}

.scrolled .site-header {

  border-bottom: 0 !important;

  box-shadow: none !important;

  background: transparent !important;

  backdrop-filter: none !important;

}

.brand {

  font-size: 31px;

}

.site-header nav {

  gap: 28px;

}

.site-header nav a {

  font-size: 15px;

  line-height: 1;

}



@media (max-width: 820px) {

  .site-header {

    padding: 22px 20px;

  }

  .brand {

    font-size: 25px;

  }

}



/* v56: FYF-Logo mit echtem 3D-Kippen zur Maus — ohne ruckelige Dauer-Loop */

.page-backdrop {

  perspective: 900px;

  perspective-origin: 50% 46%;

}

.backdrop-logo {

  animation: none !important;

  transform:

    translate3d(calc(-50% + var(--fyf-x, 0px)), calc(-50% + var(--fyf-y, 0px)), var(--fyf-z, 0px))

    rotateX(var(--fyf-rx, 0deg))

    rotateY(var(--fyf-ry, 0deg))

    rotateZ(var(--fyf-rz, 0deg))

    scale(var(--fyf-scale, 1));

  transform-origin: 50% 52%;

  transform-style: preserve-3d;

  transition: transform .5s cubic-bezier(.16, 1, .22, 1), opacity .25s ease, filter .25s ease;

  will-change: transform;

  backface-visibility: hidden;

}

@keyframes fyfMobileHeroPose {

  0%, 100% {

    transform:

      translate3d(-50%, -50%, 0)

      rotateX(0deg)

      rotateY(0deg)

      rotateZ(0deg)

      scale(1) !important;

  }

  36% {

    transform:

      translate3d(calc(-50% - 7px), calc(-50% - 4px), 14px)

      rotateX(3.8deg)

      rotateY(-6.2deg)

      rotateZ(-.32deg)

      scale(1.01) !important;

  }

  68% {

    transform:

      translate3d(calc(-50% + 6px), calc(-50% + 3px), 10px)

      rotateX(-2.6deg)

      rotateY(5.1deg)

      rotateZ(.26deg)

      scale(1.006) !important;

  }

}



@media (max-width: 820px), (max-device-width: 820px), (hover: none), (pointer: coarse) {

  .page-backdrop {

    perspective: 820px;

    perspective-origin: 50% 44%;

  }

  .backdrop-logo {

    animation: fyfMobileHeroPose 7.5s ease-in-out infinite !important;

    transition: opacity .25s ease, filter .25s ease;

    transform-origin: 50% 52%;

    transform-style: preserve-3d;

  }

}



@media (prefers-reduced-motion: reduce) {

  html { scroll-behavior: auto; }

  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }

  .intro-overlay { display: none; }

  html.intro-active, html.intro-active body { overflow: auto; }

}





/* v59: Booking section */

.booking-section {

  padding-top: clamp(62px, 8vw, 104px);

}

.booking-panel {

  width: min(900px, 100%);

  margin: 0 auto;

  display: grid;

  gap: 28px;

  justify-items: center;

  text-align: center;

}

.booking-head {

  margin-bottom: 0;

}

.booking-card {

  position: relative;

  width: min(720px, 100%);

  display: grid;

  justify-items: center;

  gap: 16px;

  padding: clamp(28px, 5vw, 46px) clamp(18px, 4vw, 42px);

  overflow: hidden;

  border: 1px solid rgba(255,255,255,.16);

  background:

    linear-gradient(180deg, rgba(255,255,255,.085), rgba(255,255,255,.018)),

    radial-gradient(circle at 50% 0, rgba(198,25,25,.22), transparent 54%),

    linear-gradient(135deg, rgba(0,0,0,.94), rgba(9, 11, 11, .97));

  box-shadow: 0 32px 92px rgba(0,0,0,.58), 0 0 0 1px rgba(255,255,255,.035) inset;

  clip-path: polygon(26px 0, calc(100% - 26px) 0, 100% 26px, 100% calc(100% - 26px), calc(100% - 26px) 100%, 26px 100%, 0 calc(100% - 26px), 0 26px);

}

.booking-card::before {

  content: "";

  position: absolute;

  inset: 0;

  pointer-events: none;

  background:

    linear-gradient(90deg, rgba(198,25,25,.86), transparent 42%, transparent 58%, rgba(198,25,25,.86)) 0 0 / 100% 2px no-repeat,

    radial-gradient(circle at 50% 100%, rgba(255,255,255,.08), transparent 55%);

  opacity: .86;

}

.booking-label,

.booking-mail,

.booking-actions {

  position: relative;

  z-index: 1;

}

.booking-label {

  color: rgba(255,255,255,.58);

  font-size: 12px;

  letter-spacing: .16em;

  text-transform: uppercase;

}

.booking-mail {

  color: rgba(255,255,255,.98);

  font-size: clamp(30px, 5vw, 62px);

  line-height: .95;

  letter-spacing: .035em;

  text-shadow: 0 0 24px rgba(255,255,255,.18), 0 0 42px rgba(198,25,25,.2), 0 16px 44px rgba(0,0,0,.72);

  overflow-wrap: anywhere;

}

.booking-mail:hover {

  color: #fff;

  text-shadow: 0 0 28px rgba(255,255,255,.28), 0 0 58px rgba(198,25,25,.36), 0 16px 44px rgba(0,0,0,.72);

}

.booking-actions {

  display: flex;

  flex-wrap: wrap;

  justify-content: center;

  gap: 12px;

  margin-top: 8px;

}

@media (max-width: 820px) {

  .booking-section { padding-top: 46px; }

  .booking-card {

    gap: 13px;

    padding: 30px 18px;

    clip-path: polygon(18px 0, calc(100% - 18px) 0, 100% 18px, 100% calc(100% - 18px), calc(100% - 18px) 100%, 18px 100%, 0 calc(100% - 18px), 0 18px);

  }

  .booking-mail {

    font-size: clamp(26px, 9vw, 38px);

  }

  .booking-actions {

    width: 100%;

  }

  .booking-actions .btn {

    width: min(260px, 100%);

  }

}





/* v60: Booking mail on desktop stays strong but not broken */

.booking-card {

  width: min(900px, 100%);

}

.booking-mail {

  font-size: clamp(32px, 4.1vw, 58px);

  white-space: nowrap;

  overflow-wrap: normal;

  word-break: normal;

}

@media (max-width: 820px) {

  .booking-mail {

    white-space: normal;

    overflow-wrap: anywhere;

    font-size: clamp(24px, 8.2vw, 34px);

  }

}





/* v61: Mobile-first polish — compact link hub, cleaner booking mail, visible mobile nav */

@media (max-width: 820px), (max-device-width: 820px), (hover: none) and (pointer: coarse) {

  .site-header {

    align-items: flex-start;

    gap: 10px;

    padding: 14px 18px 10px;

  }

  .site-header nav {

    display: flex !important;

    flex-wrap: wrap;

    justify-content: flex-end;

    gap: 8px 10px;

    max-width: 225px;

  }

  .site-header nav a {

    font-size: 9px;

    letter-spacing: .075em;

    padding: 7px 8px 6px;

    border: 1px solid rgba(255,255,255,.14);

    background: rgba(0,0,0,.24);

    backdrop-filter: blur(8px);

    clip-path: polygon(7px 0, 100% 0, calc(100% - 7px) 100%, 0 100%);

  }

  .link-section {

    padding: 42px 18px;

  }

  .link-section::before {

    inset: 12px 12px;

  }

  .section-head {

    margin-bottom: 24px;

  }

  .section-head h2 {

    font-size: clamp(31px, 10vw, 46px);

    line-height: .94;

  }

  .section-head p:not(.kicker) {

    max-width: 320px;

    font-size: 14px;

    line-height: 1.45;

  }

  .link-card {

    min-height: 128px;

    padding: 20px 16px 18px;

    gap: 6px;

  }

  .platform-logo {

    width: 72px;

    height: 34px;

  }

  .card-title {

    font-size: clamp(22px, 7.6vw, 31px);

    line-height: .95;

  }

  .card-copy {

    font-size: 13px;

    line-height: 1.25;

  }

  .booking-section {

    padding-top: 32px;

  }

  .booking-panel {

    gap: 22px;

  }

  .booking-card {

    padding: 26px 16px 28px;

    gap: 12px;

  }

  .booking-label {

    font-size: 10px;

    letter-spacing: .13em;

  }

  .booking-mail {

    white-space: nowrap;

    overflow-wrap: normal;

    word-break: normal;

    font-size: clamp(20px, 6.2vw, 26px);

    line-height: 1;

  }

  .booking-actions {

    gap: 10px;

  }

  .booking-actions .btn {

    width: min(250px, 100%);

    min-height: 48px;

  }

}



@media (max-width: 370px) {

  .site-header nav {

    max-width: 198px;

    gap: 6px;

  }

  .site-header nav a {

    font-size: 8px;

    padding-inline: 7px;

  }

  .booking-mail {

    font-size: clamp(18px, 5.9vw, 22px);

  }

}





/* v62: Mobile header scrolls away so section content is never covered */

@media (max-width: 820px), (max-device-width: 820px), (hover: none) and (pointer: coarse) {

  .site-header {

    position: absolute;

  }

  .scrolled .site-header {

    background: transparent !important;

    backdrop-filter: none !important;

    border-bottom: 0 !important;

    box-shadow: none !important;

  }

}





/* v63: Mobile hero nav fits all three links cleanly */

@media (max-width: 820px), (max-device-width: 820px), (hover: none) and (pointer: coarse) {

  .site-header {

    flex-direction: column;

    align-items: center;

    justify-content: flex-start;

    gap: 8px;

    padding: 12px 14px 8px;

  }

  .site-header nav {

    width: 100%;

    max-width: 360px;

    justify-content: center;

    flex-wrap: nowrap;

    gap: 6px;

  }

  .site-header nav a {

    font-size: 8px;

    letter-spacing: .055em;

    padding: 6px 7px 5px;

  }

}





/* v65: real 9:16 mobile intro + first pass static-layer alignment */

@media (max-width: 820px), (max-device-width: 820px), (hover: none) and (pointer: coarse) {

  .intro-overlay {

    background:

      radial-gradient(circle at 50% 38%, rgba(0,0,0,.04), rgba(0,0,0,.66) 74%, #020403 100%),

      url("assets/mobile-intro-poster-first.jpg") center center / cover no-repeat,

      #020403;

  }

  .intro-video {

    inset: 0 !important;

    left: 0 !important;

    top: 0 !important;

    width: 100% !important;

    height: 100% !important;

    transform: none !important;

    object-fit: cover;

    object-position: center center;

    filter: contrast(1.04) saturate(.94) brightness(.94);

  }

  .backdrop-logo {

    width: 132vw;

    top: 50.5%;

    opacity: .9;

  }

  .intro-vignette {

    background:

      radial-gradient(circle at 50% 38%, transparent 0 44%, rgba(0,0,0,.28) 70%, rgba(0,0,0,.84) 100%),

      linear-gradient(180deg, rgba(0,0,0,.06), rgba(0,0,0,.52));

  }

  .handoff-glitch {

    width: min(82vw, 560px);

    height: min(54vh, 470px);

    top: 50%;

  }

}



/* v69: Mobile backdrop must not zoom while browser chrome collapses; FYF fits inside 9:16 */

@media (max-width: 820px), (max-device-width: 820px), (hover: none) and (pointer: coarse) {

  .page-backdrop {

    position: fixed !important;

    top: 0 !important;

    left: 0 !important;

    right: 0 !important;

    bottom: auto !important;

    inset: 0 auto auto 0;

    width: 100vw;

    height: var(--stable-vh, 100vh);

    min-height: var(--stable-vh, 100vh);

    max-height: var(--stable-vh, 100vh);

    overflow: hidden;

  }

  .backdrop-wall {

    position: absolute !important;

    top: 0 !important;

    left: 0 !important;

    width: 100vw;

    height: var(--stable-vh, 100vh);

    min-height: var(--stable-vh, 100vh);

    object-fit: cover;

    object-position: center center;

    transform: none !important;

  }

  .person-layer {

    object-fit: cover;

    object-position: center center;

  }

  .backdrop-logo {

    width: min(108vw, 520px);

    top: 50%;

    opacity: .88;

    animation: none !important;

  }

  .hero-copy {

    top: calc(var(--stable-vh, 100vh) * .57) !important;

  }

}



/* v73: short build-up after age confirmation */

.hero-copy .kicker,

.hero-copy h1,

.hero-copy .subline,

.hero-actions .btn {

  will-change: opacity, transform, filter, clip-path;

}

html.intro-active .hero-copy .kicker,

html.intro-active .hero-copy h1,

html.intro-active .hero-copy .subline,

html.intro-active .hero-actions .btn {

  opacity: 0;

}

.intro-complete .hero-copy .kicker {

  animation: eycerBuildSmall .42s cubic-bezier(.16,1,.22,1) .08s both;

}

.intro-complete .hero-copy h1 {

  animation: eycerBuildTitle .58s cubic-bezier(.16,1,.22,1) .18s both;

}

.intro-complete .hero-copy .subline {

  animation: eycerBuildSmall .42s cubic-bezier(.16,1,.22,1) .34s both;

}

.intro-complete .hero-actions .btn:nth-child(1) {

  animation: eycerBuildButton .46s cubic-bezier(.16,1,.22,1) .48s both;

}

.intro-complete .hero-actions .btn:nth-child(2) {

  animation: eycerBuildButton .46s cubic-bezier(.16,1,.22,1) .58s both;

}

@keyframes eycerBuildSmall {

  0% { opacity: 0; transform: translate3d(0, 14px, 0); filter: blur(7px); letter-spacing: .34em; }

  65% { opacity: 1; transform: translate3d(0, -2px, 0); filter: blur(0); }

  100% { opacity: 1; transform: translate3d(0, 0, 0); filter: blur(0); }

}

@keyframes eycerBuildTitle {

  0% { opacity: 0; transform: translate3d(0, 26px, 0) scale(.94); filter: blur(8px); clip-path: inset(48% 0 48% 0); }

  58% { opacity: 1; transform: translate3d(0, -3px, 0) scale(1.018); filter: blur(0); clip-path: inset(0 0 0 0); }

  100% { opacity: 1; transform: translate3d(0, 0, 0) scale(1); filter: blur(0); clip-path: inset(0 0 0 0); }

}

@keyframes eycerBuildButton {

  0% { opacity: 0; transform: translate3d(0, 22px, 0); filter: blur(6px); }

  70% { opacity: 1; transform: translate3d(0, -2px, 0); filter: blur(0); }

  100% { opacity: 1; transform: translate3d(0, 0, 0); filter: blur(0); }

}



/* v74: remove dark hero text box + prevent intro vignette flash */

.hero-copy::before {

  display: none !important;

}

@media (max-width: 820px), (max-device-width: 820px), (hover: none) and (pointer: coarse) {

  .intro-overlay {

    background: #020403;

  }

  .intro-vignette {

    opacity: 0 !important;

  }

}



/* v76: precise EYCER-only backing plate + content waits directly below viewport */

@media (max-width: 820px), (max-device-width: 820px), (hover: none) and (pointer: coarse) {

  .hero {

    min-height: 104vh !important;

  }

  .hero-copy h1 {

    position: relative;

    z-index: 0;

    display: inline-block;

    padding: 0 .035em .025em;

    text-shadow:

      0 0 18px rgba(255,255,255,.22),

      0 0 30px rgba(198,25,25,.18) !important;

  }

  .hero-copy h1::before {

    content: "";

    position: absolute;

    z-index: -1;

    left: .01em;

    right: .045em;

    top: .16em;

    bottom: .10em;

    background: linear-gradient(90deg, rgba(0,0,0,.28), rgba(0,0,0,.56) 42%, rgba(0,0,0,.46) 58%, rgba(0,0,0,.20));

    filter: blur(.5px);

    border-radius: 2px;

  }

  .link-section:first-of-type {

    margin-top: -3vh;

    padding-top: 20px;

  }

}



/* v77: slower mobile person fade + scroll cue back at bottom + refined EYCER backing */

@media (max-width: 820px), (max-device-width: 820px), (hover: none) and (pointer: coarse) {

  .hero {

    min-height: 136vh !important;

  }

  .scene {

    position: fixed !important;

    inset: 0 !important;

    top: 0 !important;

    height: var(--stable-vh, 100vh) !important;

    min-height: var(--stable-vh, 100vh) !important;

    max-height: var(--stable-vh, 100vh) !important;

    width: 100vw !important;

    z-index: 2;

  }

  #streaming {

    /* #streaming is the first content section after the hero; :first-of-type does not match

       because the hero is also a section. */

    margin-top: -32vh;

    padding-top: 30px;

  }

  .scroll-cue {

    position: fixed !important;

    left: 50% !important;

    top: auto !important;

    bottom: max(18px, calc(env(safe-area-inset-bottom) + 18px)) !important;

    transform: translateX(-50%) !important;

    gap: 8px;

    opacity: 0;

    transition: opacity .34s var(--ease), transform .34s var(--ease), visibility .34s var(--ease);

  }

  .intro-complete .scroll-cue {

    opacity: .82;

  }

  .scrolled .scroll-cue {

    opacity: 0 !important;

    visibility: hidden;

    pointer-events: none;

    transform: translate(-50%, 10px) !important;

  }

  .hero-copy h1 {

    padding: 0 .04em .018em;

    text-shadow:

      0 0 16px rgba(255,255,255,.18),

      0 0 28px rgba(198,25,25,.16),

      0 3px 12px rgba(0,0,0,.58) !important;

  }

  .hero-copy h1::before {

    left: .035em;

    right: .075em;

    top: .205em;

    bottom: .155em;

    background:

      linear-gradient(90deg, rgba(0,0,0,.10), rgba(0,0,0,.50) 24%, rgba(0,0,0,.56) 54%, rgba(0,0,0,.22) 88%, rgba(0,0,0,.06)),

      linear-gradient(180deg, rgba(198,25,25,.12), transparent 24%, transparent 76%, rgba(198,25,25,.10));

    box-shadow:

      0 8px 24px rgba(0,0,0,.34),

      0 0 0 1px rgba(255,255,255,.045) inset;

    filter: blur(.35px);

    border-radius: 1px;

  }

}



/* v78: smoother FYF hero pose + smart header */

.site-header {

  transition:

    opacity .65s var(--ease),

    transform .65s var(--ease),

    padding .45s var(--ease),

    background .45s ease,

    filter .45s ease !important;

  will-change: transform, opacity, padding;

}

.header-compact .site-header {

  padding-top: 16px;

  padding-bottom: 12px;

  filter: drop-shadow(0 18px 30px rgba(0,0,0,.22));

}

.header-hidden .site-header {

  transform: translateY(-125%) !important;

  opacity: 0 !important;

  pointer-events: none;

}

.backdrop-logo {

  transition: opacity .22s ease, filter .22s ease !important;

  transform-origin: 50% 52%;

  transform-style: preserve-3d;

  backface-visibility: hidden;

  contain: layout paint style;

}

@keyframes fyfMobileHeroPoseSmooth {

  0%, 100% {

    transform: translate3d(-50%, -50%, 0) scale(.992);

    opacity: .86;

    filter: brightness(1.10) contrast(1.04) drop-shadow(0 0 14px rgba(255,255,255,.24)) drop-shadow(0 0 34px rgba(198,25,25,.16));

  }

  50% {

    transform: translate3d(-50%, -50%, 0) scale(1.022);

    opacity: .96;

    filter: brightness(1.22) contrast(1.055) drop-shadow(0 0 24px rgba(255,255,255,.38)) drop-shadow(0 0 58px rgba(198,25,25,.25));

  }

}

@media (max-width: 820px), (max-device-width: 820px), (hover: none) and (pointer: coarse) {

  .site-header {

    position: fixed !important;

    top: 0 !important;

    left: 0;

    right: 0;

    background: linear-gradient(180deg, rgba(2,4,3,.72), rgba(2,4,3,.26) 72%, transparent) !important;

    backdrop-filter: none !important;

    border-bottom: 0 !important;

  }

  .header-compact .site-header {

    padding-top: 8px;

    padding-bottom: 6px;

    background: linear-gradient(180deg, rgba(2,4,3,.82), rgba(2,4,3,.38) 68%, transparent) !important;

  }

  .backdrop-logo {

    /* Mobile: FYF must sit centered in the visible screen, behind the head/upper wall — not down at CTA/scroll area. */

    top: 38% !important;

    width: min(116vw, 560px);

    animation: fyfMobileHeroPoseSmooth 7.8s ease-in-out infinite !important;

    will-change: transform, filter;

  }

}



/* v86: make HELL KARTELL / EFN readable over the white FYF logo without a ugly big box */

.hero-copy .kicker {

  position: relative;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  padding: .22em .74em .18em;

  color: rgba(255,255,255,.92) !important;

  line-height: 1.1;

  text-shadow:

    0 1px 0 rgba(0,0,0,.9),

    0 0 10px rgba(0,0,0,.96),

    0 0 20px rgba(0,0,0,.78);

  background:

    linear-gradient(90deg, transparent, rgba(2,4,3,.50) 18%, rgba(2,4,3,.64) 50%, rgba(2,4,3,.50) 82%, transparent);

  box-shadow:

    0 0 22px rgba(0,0,0,.44),

    0 0 0 1px rgba(255,255,255,.055) inset;

}

@media (max-width: 820px), (max-device-width: 820px), (hover: none) and (pointer: coarse) {

  .hero-copy .kicker {

    font-size: clamp(11px, 3.25vw, 15px);

    letter-spacing: .14em !important;

    padding: .30em .84em .22em;

    margin-bottom: 12px;

    background:

      linear-gradient(90deg, transparent, rgba(2,4,3,.58) 14%, rgba(2,4,3,.72) 50%, rgba(2,4,3,.58) 86%, transparent);

  }

}



/* v87: iOS Safari viewport stabilization — logo/text no longer depend on changing browser chrome height */

@supports (height: 100svh) {

  @media (max-width: 820px), (max-device-width: 820px), (hover: none) and (pointer: coarse) {

    .page-backdrop,

    .backdrop-wall,

    .scene {

      height: 100svh !important;

      min-height: 100svh !important;

      max-height: 100svh !important;

    }

    .backdrop-logo {

      top: 38svh !important;

    }

    .hero-copy {

      /* fixed visual position: low enough that the face stays free, independent of Safari URL bar state */

      top: 60.5svh !important;

    }

  }

}



/* v89: use the JS-stabilized visual viewport variable for the mobile hero positions */

@media (max-width: 820px), (max-device-width: 820px), (hover: none) and (pointer: coarse) {

  .page-backdrop,

  .backdrop-wall,

  .scene {

    height: var(--stable-vh, 100svh) !important;

    min-height: var(--stable-vh, 100svh) !important;

    max-height: var(--stable-vh, 100svh) !important;

  }

  .backdrop-logo {

    top: calc(var(--stable-vh, 100svh) * .38) !important;

  }

  .hero-copy {

    top: calc(var(--stable-vh, 100svh) * .605) !important;

  }

}



/* v90: reserve intrinsic FYF/logo geometry before image decode so Safari first-load transform is correct */

.backdrop-logo {

  aspect-ratio: 5999 / 4775;

  height: auto;

  display: block;

}

.backdrop-wall,

.person-layer {

  aspect-ratio: 5504 / 3072;

}



/* v91: Safari repaint fix for hero CTA fill — no delayed backdrop-filter fill on Instagram button */

.hero-actions .btn {

  position: relative;

  overflow: hidden;

  isolation: isolate;

  backdrop-filter: none !important;

  -webkit-backdrop-filter: none !important;

  transform: translate3d(0, 0, 0);

  background-clip: padding-box;

}

.hero-actions .btn.ghost {

  background: linear-gradient(135deg, rgba(2,4,3,.78), rgba(8,12,11,.86)) !important;

  border-color: rgba(255,255,255,.26);

  box-shadow:

    0 14px 34px rgba(0,0,0,.32),

    0 0 0 1px rgba(255,255,255,.045) inset;

}

.hero-actions .btn.primary {

  background: linear-gradient(135deg, #f2eee4, #d9d1c2) !important;

  color: #070706;

  border-color: rgba(255,255,255,.72);

}

@media (max-width: 820px), (max-device-width: 820px), (hover: none) and (pointer: coarse) {

  .hero-actions .btn.ghost {

    background: linear-gradient(135deg, rgba(2,4,3,.82), rgba(8,12,11,.90)) !important;

  }

}





/* v92: monochrome rough link blocks + 2x2 streaming/social + merch section */

.streaming-grid {

  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;

  max-width: 820px;

}

.social-grid {

  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;

  max-width: 820px;

}

.link-section::before {

  background:

    radial-gradient(circle at 50% 0, rgba(255,255,255,.105), transparent 56%),

    linear-gradient(180deg, rgba(28,30,29,.48), rgba(10,12,12,.38) 52%, rgba(24,24,22,.44)) !important;

  border-color: rgba(255,255,255,.115) !important;

  box-shadow: 0 28px 88px rgba(0,0,0,.38), 0 0 0 1px rgba(255,255,255,.035) inset !important;

  backdrop-filter: blur(2px) brightness(.95) saturate(.72) !important;

  clip-path: polygon(24px 0, calc(100% - 42px) 0, 100% 28px, calc(100% - 10px) 73%, 100% calc(100% - 28px), calc(100% - 34px) 100%, 28px 100%, 0 calc(100% - 22px), 12px 64%, 0 26px) !important;

}

.link-card {

  appearance: none;

  -webkit-appearance: none;

  color: inherit;

  cursor: pointer;

  min-height: 148px !important;

  background:

    linear-gradient(180deg, rgba(255,255,255,.082), rgba(255,255,255,.022)),

    radial-gradient(circle at 50% 0, rgba(255,255,255,.095), transparent 58%),

    linear-gradient(135deg, rgba(20,22,21,.48), rgba(7,8,8,.38)) !important;

  border-color: rgba(238,238,226,.18) !important;

  box-shadow: 0 20px 52px rgba(0,0,0,.36), 0 0 0 1px rgba(255,255,255,.035) inset !important;

  clip-path: polygon(15px 0, calc(100% - 7px) 0, 100% 13px, calc(100% - 6px) calc(100% - 23px), calc(100% - 25px) 100%, 10px 100%, 0 calc(100% - 12px), 7px 58%, 0 14px) !important;

}

.link-card::before {

  background:

    linear-gradient(90deg, rgba(238,238,226,.52), transparent 35%, transparent 64%, rgba(238,238,226,.36)) 0 0 / 100% 1px no-repeat,

    repeating-linear-gradient(115deg, rgba(255,255,255,.045) 0 1px, transparent 1px 12px),

    radial-gradient(circle at 50% 0, rgba(255,255,255,.12), transparent 50%) !important;

  opacity: .62 !important;

}

.link-card::after {

  background: linear-gradient(90deg, transparent, rgba(238,238,226,.38), transparent) !important;

  opacity: .34 !important;

}

.link-card:hover,

.link-card:focus-visible {

  border-color: rgba(255,255,255,.34) !important;

  background:

    linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.032)),

    radial-gradient(circle at 50% 0, rgba(255,255,255,.14), transparent 58%),

    linear-gradient(135deg, rgba(26,28,27,.55), rgba(10,11,11,.45)) !important;

}

.platform-logo {

  filter: drop-shadow(0 0 12px rgba(255,255,255,.18)) !important;

}

.platform-logo img {

  filter: grayscale(1) brightness(1.82) contrast(.78) opacity(.9) !important;

}

.spotify,

.soundcloud,

.youtube,

.instagram,

.tiktok,

.more-streaming {

  --brand: rgba(238,238,226,.72) !important;

  --accent: rgba(255,255,255,.10) !important;

}

.more-mark {

  position: relative;

  z-index: 1;

  display: grid;

  place-items: center;

  width: 42px;

  height: 42px;

  color: rgba(238,238,226,.86);

  border: 1px solid rgba(255,255,255,.22);

  clip-path: polygon(8px 0, 100% 0, calc(100% - 7px) 100%, 0 100%);

  background: rgba(255,255,255,.045);

  font-size: 31px;

  line-height: 1;

  text-shadow: 0 0 16px rgba(255,255,255,.18);

}

.more-streaming[aria-expanded="true"] .more-mark { transform: rotate(45deg); }

.more-platforms {

  width: min(820px, 100%);

  margin: 16px auto 0;

  display: grid;

  grid-template-columns: repeat(4, minmax(0, 1fr));

  gap: 9px;

  padding: 14px;

  border: 1px solid rgba(255,255,255,.13);

  background: rgba(22,23,22,.34);

  clip-path: polygon(14px 0, calc(100% - 18px) 0, 100% 15px, calc(100% - 8px) 100%, 16px 100%, 0 calc(100% - 14px));

}

.more-platforms[hidden] { display: none !important; }

.more-platforms a {

  display: grid;

  place-items: center;

  min-height: 42px;

  padding: 9px 8px;

  color: rgba(238,238,226,.78);

  border: 1px solid rgba(255,255,255,.12);

  background: rgba(255,255,255,.035);

  clip-path: polygon(8px 0, 100% 0, calc(100% - 7px) 100%, 0 100%);

  font-size: 13px;

  text-transform: uppercase;

}

.more-platforms a:hover { color: #fff; border-color: rgba(255,255,255,.26); }

.merch-section { padding-top: clamp(50px, 7vw, 92px); padding-bottom: clamp(50px, 7vw, 92px); }

.merch-stage {

  width: min(1040px, 100%);

  margin: 0 auto;

  display: grid;

  grid-template-columns: minmax(150px, 1fr) minmax(260px, 1.15fr) minmax(150px, 1fr);

  gap: 16px;

  align-items: stretch;

}

.merch-core,

.merch-sample {

  position: relative;

  min-height: 230px;

  display: grid;

  place-items: center;

  text-align: center;

  overflow: hidden;

  border: 1px solid rgba(238,238,226,.16);

  background:

    linear-gradient(180deg, rgba(255,255,255,.075), rgba(255,255,255,.018)),

    linear-gradient(135deg, rgba(26,27,26,.46), rgba(8,9,9,.34));

  clip-path: polygon(18px 0, calc(100% - 8px) 0, 100% 16px, calc(100% - 6px) calc(100% - 24px), calc(100% - 28px) 100%, 12px 100%, 0 calc(100% - 16px), 8px 57%, 0 18px);

  box-shadow: 0 22px 64px rgba(0,0,0,.34);

}

.merch-core::before,

.merch-sample::before {

  content: "";

  position: absolute;

  inset: 0;

  pointer-events: none;

  background:

    repeating-linear-gradient(108deg, rgba(255,255,255,.055) 0 1px, transparent 1px 11px),

    radial-gradient(circle at 50% 0, rgba(255,255,255,.12), transparent 56%);

  opacity: .5;

}

.merch-sample span {

  position: relative;

  z-index: 1;

  color: rgba(238,238,226,.45);

  font-size: clamp(22px, 3vw, 38px);

  text-transform: uppercase;

}

.merch-core { padding: 28px 24px; align-content: center; gap: 18px; }

.merch-copy {

  position: relative;

  z-index: 1;

  max-width: 430px;

  margin: 0;

  color: rgba(238,238,226,.74);

  font-size: clamp(18px, 2.4vw, 25px);

  line-height: 1.25;

}

.merch-btn { position: relative; z-index: 1; }

@media (max-width: 820px), (max-device-width: 820px), (hover: none) and (pointer: coarse) {

  .site-header nav { max-width: 258px; gap: 7px !important; }

  .site-header nav a { font-size: 8px !important; padding: 7px 7px 6px !important; }

  .streaming-grid, .social-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px !important; }

  .link-card { min-height: 112px !important; padding: 16px 9px 14px !important; gap: 5px !important; }

  .platform-logo { width: 55px !important; height: 27px !important; }

  .spotify .platform-logo img, .instagram .platform-logo img { width: 31px !important; }

  .soundcloud .platform-logo img { width: 48px !important; }

  .youtube .platform-logo img { width: 42px !important; }

  .tiktok .platform-logo img { width: 29px !important; }

  .card-title { font-size: clamp(17px, 5.7vw, 23px) !important; white-space: normal !important; }

  .card-copy { font-size: 11px !important; }

  .more-mark { width: 32px; height: 32px; font-size: 24px; }

  .more-platforms { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 10px; }

  .more-platforms a { min-height: 38px; font-size: 10px; }

  .merch-stage { grid-template-columns: 1fr 1fr; gap: 10px; }

  .merch-core { grid-column: 1 / -1; order: -1; min-height: 176px; padding: 24px 16px; }

  .merch-sample { min-height: 128px; }

  .merch-copy { font-size: clamp(16px, 5vw, 20px); }

}

@media (max-width: 370px) {

  .site-header nav { max-width: 236px; }

  .site-header nav a { font-size: 7.5px !important; padding-inline: 6px !important; }

  .card-title { font-size: clamp(15px, 5.2vw, 20px) !important; }

}





/* v93: prevent long SoundCloud label clipping in 2x2 mobile grid */

@media (max-width: 820px), (max-device-width: 820px), (hover: none) and (pointer: coarse) {

  .soundcloud .card-title {

    font-size: clamp(13px, 4.4vw, 18px) !important;

    letter-spacing: .018em !important;

    white-space: nowrap !important;

    transform: scaleX(.92);

    transform-origin: center;

  }

}





/* v94: dirtier torn-card treatment — less clean, more eaten/industrial */

.link-card {

  border-color: rgba(238,238,226,.13) !important;

  background:

    radial-gradient(circle at 18% 12%, rgba(255,255,255,.11), transparent 24%),

    radial-gradient(circle at 78% 84%, rgba(255,255,255,.055), transparent 26%),

    repeating-linear-gradient(101deg, rgba(255,255,255,.055) 0 1px, transparent 1px 7px, rgba(0,0,0,.12) 7px 9px, transparent 9px 18px),

    linear-gradient(158deg, rgba(42,44,42,.36), rgba(6,7,7,.22) 44%, rgba(30,31,29,.30)) !important;

  box-shadow:

    0 18px 44px rgba(0,0,0,.28),

    0 0 0 1px rgba(255,255,255,.025) inset,

    8px 0 0 -7px rgba(255,255,255,.18) inset,

    -10px 0 0 -9px rgba(255,255,255,.14) inset !important;

  clip-path: polygon(

    8% 0, 21% 4%, 34% 0, 49% 3%, 63% 0, 76% 5%, 94% 0,

    100% 10%, 97% 23%, 100% 35%, 96% 49%, 100% 64%, 98% 78%, 100% 92%,

    91% 100%, 76% 96%, 62% 100%, 48% 97%, 34% 100%, 19% 95%, 5% 100%,

    0 88%, 4% 76%, 0 61%, 3% 47%, 0 32%, 4% 19%, 0 7%

  ) !important;

}

.link-card::before {

  inset: 0 !important;

  background:

    linear-gradient(90deg, transparent 0 7%, rgba(238,238,226,.34) 9%, transparent 17%, transparent 78%, rgba(238,238,226,.22) 84%, transparent 94%),

    repeating-linear-gradient(0deg, rgba(255,255,255,.04) 0 1px, transparent 1px 10px),

    repeating-linear-gradient(92deg, rgba(0,0,0,.18) 0 2px, transparent 2px 17px) !important;

  opacity: .72 !important;

  mix-blend-mode: screen;

}

.link-card::after {

  inset: auto 9% 13px 7% !important;

  height: 1px !important;

  background: linear-gradient(90deg, transparent, rgba(238,238,226,.32) 18%, transparent 36%, rgba(238,238,226,.22) 62%, transparent) !important;

  opacity: .55 !important;

}

.link-card:hover,

.link-card:focus-visible {

  background:

    radial-gradient(circle at 16% 8%, rgba(255,255,255,.15), transparent 25%),

    repeating-linear-gradient(101deg, rgba(255,255,255,.07) 0 1px, transparent 1px 7px, rgba(0,0,0,.14) 7px 9px, transparent 9px 18px),

    linear-gradient(158deg, rgba(50,52,49,.42), rgba(8,9,9,.26) 44%, rgba(35,36,34,.35)) !important;

  border-color: rgba(238,238,226,.24) !important;

}

.more-platforms,

.merch-core,

.merch-sample,

.booking-card,

.link-section::before {

  clip-path: polygon(

    3% 0, 18% 2%, 32% 0, 47% 1.5%, 59% 0, 74% 2.5%, 96% 0,

    100% 5%, 98% 19%, 100% 33%, 97.5% 50%, 100% 66%, 98% 84%, 100% 96%,

    94% 100%, 78% 98%, 64% 100%, 49% 98%, 34% 100%, 20% 97%, 4% 100%,

    0 94%, 2% 79%, 0 63%, 2.5% 48%, 0 31%, 2% 16%, 0 4%

  ) !important;

}

.more-platforms,

.merch-core,

.merch-sample {

  background:

    repeating-linear-gradient(104deg, rgba(255,255,255,.05) 0 1px, transparent 1px 10px, rgba(0,0,0,.12) 10px 13px, transparent 13px 22px),

    linear-gradient(160deg, rgba(36,38,36,.38), rgba(8,9,9,.22)) !important;

  border-color: rgba(238,238,226,.14) !important;

}

.platform-logo img { opacity: .82 !important; }

.youtube .card-copy {

  max-width: 130px;

  line-height: 1.08 !important;

}

@media (max-width: 820px), (max-device-width: 820px), (hover: none) and (pointer: coarse) {

  .link-card {

    min-height: 118px !important;

    padding: 16px 8px 14px !important;

  }

  .youtube .card-copy {

    max-width: 118px;

    font-size: 9.6px !important;

    letter-spacing: .025em !important;

  }

}





/* v95: platform logos unified pure white */

.platform-logo,

.card-icon.platform-logo {

  color: #fff !important;

  filter: drop-shadow(0 0 14px rgba(255,255,255,.28)) !important;

}

.platform-logo img,

.spotify .platform-logo img,

.soundcloud .platform-logo img,

.youtube .platform-logo img,

.instagram .platform-logo img,

.tiktok .platform-logo img {

  filter: brightness(0) invert(1) contrast(1.05) opacity(1) !important;

  opacity: 1 !important;

}

.spotify,

.soundcloud,

.youtube,

.instagram,

.tiktok,

.more-streaming {

  --brand: rgba(255,255,255,.82) !important;

  --accent: rgba(255,255,255,.10) !important;

}





/* v96: equal title sizes in platform cards + shorter Weitere label */

.link-card .card-title,

.soundcloud .card-title,

.more-streaming .card-title {

  font-size: clamp(21px, 2.3vw, 32px) !important;

  letter-spacing: .045em !important;

  transform: none !important;

  white-space: nowrap !important;

}

@media (max-width: 820px), (max-device-width: 820px), (hover: none) and (pointer: coarse) {

  .link-card .card-title,

  .soundcloud .card-title,

  .more-streaming .card-title {

    font-size: clamp(17px, 5.7vw, 23px) !important;

    letter-spacing: .035em !important;

    transform: none !important;

    white-space: nowrap !important;

  }

}

@media (max-width: 370px) {

  .link-card .card-title,

  .soundcloud .card-title,

  .more-streaming .card-title {

    font-size: clamp(15px, 5.2vw, 20px) !important;

  }

}





/* v97: mobile equal but smaller platform titles so SOUNDCLOUD fits cleanly */

@media (max-width: 820px), (max-device-width: 820px), (hover: none) and (pointer: coarse) {

  .link-card .card-title,

  .spotify .card-title,

  .youtube .card-title,

  .soundcloud .card-title,

  .more-streaming .card-title,

  .instagram .card-title,

  .tiktok .card-title {

    font-size: clamp(15px, 4.65vw, 18px) !important;

    letter-spacing: .012em !important;

    line-height: .98 !important;

    transform: none !important;

    white-space: nowrap !important;

    max-width: 100% !important;

  }

  .link-card {

    padding-left: 7px !important;

    padding-right: 7px !important;

  }

  .card-copy {

    font-size: 10.5px !important;

    letter-spacing: .026em !important;

  }

  .youtube .card-copy {

    font-size: 9.2px !important;

    max-width: 124px !important;

  }

}

@media (max-width: 370px) {

  .link-card .card-title,

  .spotify .card-title,

  .youtube .card-title,

  .soundcloud .card-title,

  .more-streaming .card-title,

  .instagram .card-title,

  .tiktok .card-title {

    font-size: clamp(14px, 4.35vw, 16px) !important;

  }

}





/* v98: lock platform card rows so logos, titles and subtitles sit on the same horizontal lines */

@media (max-width: 820px), (max-device-width: 820px), (hover: none) and (pointer: coarse) {

  .streaming-grid .link-card,

  .social-grid .link-card {

    display: grid !important;

    grid-template-rows: 40px 26px 22px !important;

    align-content: center !important;

    justify-items: center !important;

    row-gap: 7px !important;

    min-height: 138px !important;

    padding-top: 18px !important;

    padding-bottom: 18px !important;

  }

  .streaming-grid .platform-logo,

  .social-grid .platform-logo,

  .more-streaming .more-mark {

    grid-row: 1 !important;

    align-self: center !important;

    justify-self: center !important;

    margin: 0 !important;

  }

  .streaming-grid .card-title,

  .social-grid .card-title {

    grid-row: 2 !important;

    align-self: center !important;

    margin: 0 !important;

    line-height: 1 !important;

  }

  .streaming-grid .card-copy,

  .social-grid .card-copy {

    grid-row: 3 !important;

    align-self: center !important;

    margin: 0 !important;

    line-height: 1.08 !important;

  }

  .more-streaming .more-mark {

    width: 26px !important;

    height: 26px !important;

    font-size: 19px !important;

    line-height: 1 !important;

    border-color: rgba(255,255,255,.28) !important;

  }

  .more-streaming[aria-expanded="true"] .more-mark {

    transform: rotate(45deg) !important;

  }

  .spotify .platform-logo img,

  .instagram .platform-logo img {

    width: 32px !important;

    height: 32px !important;

  }

  .youtube .platform-logo img {

    width: 42px !important;

    height: 32px !important;

  }

  .soundcloud .platform-logo img {

    width: 52px !important;

    height: 32px !important;

  }

  .tiktok .platform-logo img {

    width: 30px !important;

    height: 32px !important;

  }

}





/* v99: EYCER word shadowbox — tight bottom, clipped top, soft side fade */

.hero-copy h1::before {

  left: -.02em !important;

  right: .02em !important;

  top: .19em !important;

  bottom: .035em !important;

  border-radius: 1px !important;

  background:

    linear-gradient(90deg,

      transparent 0%,

      rgba(0,0,0,.08) 5%,

      rgba(0,0,0,.42) 16%,

      rgba(0,0,0,.58) 34%,

      rgba(0,0,0,.60) 52%,

      rgba(0,0,0,.52) 70%,

      rgba(0,0,0,.24) 87%,

      rgba(0,0,0,.05) 95%,

      transparent 100%),

    linear-gradient(180deg,

      rgba(0,0,0,.42) 0%,

      rgba(0,0,0,.58) 18%,

      rgba(0,0,0,.50) 72%,

      rgba(0,0,0,.20) 92%,

      transparent 100%) !important;

  box-shadow:

    0 7px 18px rgba(0,0,0,.30),

    0 0 0 1px rgba(255,255,255,.035) inset !important;

  filter: blur(.32px) !important;

  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 13%, #000 84%, transparent 100%) !important;

  mask-image: linear-gradient(90deg, transparent 0%, #000 13%, #000 84%, transparent 100%) !important;

}

@media (max-width: 820px), (max-device-width: 820px), (hover: none) and (pointer: coarse) {

  .hero-copy h1::before {

    left: -.025em !important;

    right: .035em !important;

    top: .205em !important;

    bottom: .045em !important;

    background:

      linear-gradient(90deg,

        transparent 0%,

        rgba(0,0,0,.06) 5%,

        rgba(0,0,0,.44) 16%,

        rgba(0,0,0,.62) 36%,

        rgba(0,0,0,.63) 56%,

        rgba(0,0,0,.42) 82%,

        rgba(0,0,0,.06) 95%,

        transparent 100%),

      linear-gradient(180deg,

        rgba(0,0,0,.44) 0%,

        rgba(0,0,0,.62) 18%,

        rgba(0,0,0,.54) 72%,

        rgba(0,0,0,.22) 92%,

        transparent 100%) !important;

  }

}





/* v100: desktop/PC EYCER backing fits the word itself, not the full headline row */

@media (min-width: 821px) and (hover: hover) and (pointer: fine) {

  .hero-copy h1 {

    position: relative !important;

    z-index: 0 !important;

    display: inline-block !important;

    width: auto !important;

    padding: 0 .035em .018em .025em !important;

  }

  .hero-copy h1::before {

    content: "" !important;

    position: absolute !important;

    z-index: -1 !important;

    left: .015em !important;

    right: .045em !important;

    top: .155em !important;

    bottom: .045em !important;

    border-radius: 1px !important;

    background:

      linear-gradient(90deg,

        transparent 0%,

        rgba(0,0,0,.10) 4%,

        rgba(0,0,0,.52) 13%,

        rgba(0,0,0,.64) 34%,

        rgba(0,0,0,.62) 58%,

        rgba(0,0,0,.42) 84%,

        rgba(0,0,0,.08) 96%,

        transparent 100%),

      linear-gradient(180deg,

        rgba(0,0,0,.46) 0%,

        rgba(0,0,0,.64) 20%,

        rgba(0,0,0,.54) 76%,

        rgba(0,0,0,.20) 94%,

        transparent 100%) !important;

    box-shadow:

      0 7px 18px rgba(0,0,0,.30),

      0 0 0 1px rgba(255,255,255,.028) inset !important;

    filter: blur(.28px) !important;

    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 9%, #000 89%, transparent 100%) !important;

    mask-image: linear-gradient(90deg, transparent 0%, #000 9%, #000 89%, transparent 100%) !important;

  }

}





/* v101: restore the subtle EYCER shadow, only shorten it horizontally on PC */

@media (min-width: 821px) and (hover: hover) and (pointer: fine) {

  .hero-copy h1 {

    position: relative !important;

    z-index: 0 !important;

    display: inline-block !important;

    width: auto !important;

    padding: 0 .035em .018em .025em !important;

  }

  .hero-copy h1::before {

    content: "" !important;

    position: absolute !important;

    z-index: -1 !important;

    left: .075em !important;

    right: .105em !important;

    top: .19em !important;

    bottom: .035em !important;

    border-radius: 1px !important;

    background:

      linear-gradient(90deg,

        transparent 0%,

        rgba(0,0,0,.08) 5%,

        rgba(0,0,0,.42) 16%,

        rgba(0,0,0,.58) 34%,

        rgba(0,0,0,.60) 52%,

        rgba(0,0,0,.52) 70%,

        rgba(0,0,0,.24) 87%,

        rgba(0,0,0,.05) 95%,

        transparent 100%),

      linear-gradient(180deg,

        rgba(0,0,0,.42) 0%,

        rgba(0,0,0,.58) 18%,

        rgba(0,0,0,.50) 72%,

        rgba(0,0,0,.20) 92%,

        transparent 100%) !important;

    box-shadow:

      0 7px 18px rgba(0,0,0,.30),

      0 0 0 1px rgba(255,255,255,.035) inset !important;

    filter: blur(.32px) !important;

    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 13%, #000 84%, transparent 100%) !important;

    mask-image: linear-gradient(90deg, transparent 0%, #000 13%, #000 84%, transparent 100%) !important;

  }

}





/* v102: ultra-minimal PC EYCER backing — same idea, much softer and tight to the word */

@media (min-width: 821px) and (hover: hover) and (pointer: fine) {

  .hero-copy h1 {

    position: relative !important;

    z-index: 0 !important;

    display: inline-block !important;

    width: auto !important;

    padding: 0 .018em .012em .014em !important;

  }

  .hero-copy h1::before {

    content: "" !important;

    position: absolute !important;

    z-index: -1 !important;

    /* tight to the visible EYCER word: no broad slab, only a faint backing directly under letters */

    left: .125em !important;

    right: .145em !important;

    top: .245em !important;

    bottom: .105em !important;

    border-radius: 0 !important;

    background: linear-gradient(90deg,

      transparent 0%,

      rgba(0,0,0,.035) 8%,

      rgba(0,0,0,.105) 18%,

      rgba(0,0,0,.145) 36%,

      rgba(0,0,0,.145) 56%,

      rgba(0,0,0,.095) 76%,

      rgba(0,0,0,.025) 92%,

      transparent 100%) !important;

    box-shadow: none !important;

    filter: blur(.18px) !important;

    opacity: .72 !important;

    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 15%, #000 86%, transparent 100%) !important;

    mask-image: linear-gradient(90deg, transparent 0%, #000 15%, #000 86%, transparent 100%) !important;

  }

}





/* v103: keep the approved ultra-minimal PC shadow, only cut away the lower bleed marked in red */

@media (min-width: 821px) and (hover: hover) and (pointer: fine) {

  .hero-copy h1::before {

    /* same v102 subtle shadow, but bottom edge pulled up so it does not sit under the letters */

    bottom: .185em !important;

    top: .245em !important;

    background: linear-gradient(90deg,

      transparent 0%,

      rgba(0,0,0,.035) 8%,

      rgba(0,0,0,.105) 18%,

      rgba(0,0,0,.145) 36%,

      rgba(0,0,0,.145) 56%,

      rgba(0,0,0,.095) 76%,

      rgba(0,0,0,.025) 92%,

      transparent 100%) !important;

    box-shadow: none !important;

    filter: blur(.18px) !important;

    opacity: .72 !important;

    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 15%, #000 86%, transparent 100%) !important;

    mask-image: linear-gradient(90deg, transparent 0%, #000 15%, #000 86%, transparent 100%) !important;

  }

}





/* v104: PC shadowbox exactly 8% narrower horizontally, same approved shadow strength */

@media (min-width: 821px) and (hover: hover) and (pointer: fine) {

  .hero-copy h1::before {

    transform: scaleX(.92) !important;

    transform-origin: 50% 50% !important;

  }

}





/* v105: force PC/large-screen shadowbox shorter vertically — no hover/pointer condition */

@media (min-width: 821px) {

  .hero-copy h1::before {

    /* Keep the approved subtle shadow but cut its lower part upward visibly. */

    top: .245em !important;

    bottom: .30em !important;

    left: .125em !important;

    right: .145em !important;

    transform: none !important;

    background: linear-gradient(90deg,

      transparent 0%,

      rgba(0,0,0,.035) 8%,

      rgba(0,0,0,.105) 18%,

      rgba(0,0,0,.145) 36%,

      rgba(0,0,0,.145) 56%,

      rgba(0,0,0,.095) 76%,

      rgba(0,0,0,.025) 92%,

      transparent 100%) !important;

    box-shadow: none !important;

    filter: blur(.18px) !important;

    opacity: .72 !important;

    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 15%, #000 86%, transparent 100%) !important;

    mask-image: linear-gradient(90deg, transparent 0%, #000 15%, #000 86%, transparent 100%) !important;

  }

}





/* v106: requested copy, real merch samples, Feierstoff branding, darker content boxes */

.link-section::before {

  background:

    radial-gradient(circle at 50% 0, rgba(255,255,255,.075), transparent 56%),

    linear-gradient(180deg, rgba(12,13,13,.58), rgba(3,4,4,.50) 52%, rgba(12,12,11,.56)) !important;

  border-color: rgba(255,255,255,.10) !important;

}

.link-card,

.more-platforms,

.merch-core,

.merch-sample,

.booking-card {

  background:

    repeating-linear-gradient(104deg, rgba(255,255,255,.038) 0 1px, transparent 1px 10px, rgba(0,0,0,.18) 10px 13px, transparent 13px 22px),

    linear-gradient(160deg, rgba(21,23,22,.50), rgba(2,3,3,.38)) !important;

  border-color: rgba(238,238,226,.12) !important;

}

.link-card {

  background:

    radial-gradient(circle at 18% 12%, rgba(255,255,255,.075), transparent 24%),

    radial-gradient(circle at 78% 84%, rgba(255,255,255,.038), transparent 26%),

    repeating-linear-gradient(101deg, rgba(255,255,255,.038) 0 1px, transparent 1px 7px, rgba(0,0,0,.18) 7px 9px, transparent 9px 18px),

    linear-gradient(158deg, rgba(22,24,23,.50), rgba(3,4,4,.38) 44%, rgba(18,19,18,.44)) !important;

}

.merch-stage {

  grid-template-columns: minmax(180px, .95fr) minmax(300px, 1.05fr) minmax(180px, .95fr) !important;

}

.merch-sample {

  padding: clamp(12px, 2vw, 22px) !important;

  min-height: 300px !important;

}

.merch-sample img {

  position: relative;

  z-index: 1;

  display: block;

  width: 100%;

  height: 100%;

  max-height: 360px;

  object-fit: contain;

  filter: drop-shadow(0 24px 38px rgba(0,0,0,.48)) contrast(1.06) brightness(.96);

}

.merch-core {

  min-height: 300px !important;

  align-content: center !important;

  gap: 16px !important;

}

.feierstoff-logo {

  position: relative;

  z-index: 1;

  width: clamp(54px, 7vw, 86px);

  height: auto;

  display: block;

  filter: drop-shadow(0 0 18px rgba(255,255,255,.16));

  opacity: .96;

}

.merch-copy--headline {

  max-width: 430px !important;

  color: rgba(255,255,255,.92) !important;

  font-size: clamp(26px, 3vw, 42px) !important;

  line-height: 1.02 !important;

  text-transform: uppercase;

  text-shadow: 0 3px 18px rgba(0,0,0,.72);

}

@media (max-width: 820px), (max-device-width: 820px), (hover: none) and (pointer: coarse) {

  .subline {

    font-size: clamp(14px, 4vw, 18px) !important;

    letter-spacing: .055em !important;

  }

  .merch-stage {

    grid-template-columns: 1fr 1fr !important;

    gap: 10px !important;

  }

  .merch-core {

    grid-column: 1 / -1;

    order: -1;

    min-height: 190px !important;

    padding: 24px 16px !important;

  }

  .merch-sample {

    min-height: 180px !important;

    padding: 10px !important;

  }

  .merch-sample img {

    max-height: 210px;

  }

  .feierstoff-logo {

    width: 58px;

  }

  .merch-copy--headline {

    font-size: clamp(21px, 7vw, 30px) !important;

  }

}





/* v107: content boxes brutally torn/cracked + merch CTA copy */

.link-section::before {

  clip-path: polygon(

    0 7%, 2.5% 0, 7% 2.5%, 11% 0, 17% 4%, 22% 0, 29% 3%, 35% 0,

    43% 2%, 50% 0, 58% 3.5%, 64% 0, 72% 4%, 79% 0, 86% 2.5%, 94% 0, 100% 6%,

    97% 12%, 100% 18%, 96% 25%, 100% 31%, 97% 37%, 100% 45%, 95% 52%,

    100% 60%, 97% 66%, 100% 74%, 94% 81%, 100% 91%, 96% 100%,

    90% 96%, 84% 100%, 77% 95%, 70% 100%, 62% 96%, 55% 100%, 48% 95%,

    41% 100%, 34% 96%, 27% 100%, 20% 95%, 14% 100%, 7% 96%, 0 100%,

    4% 91%, 0 84%, 3.5% 76%, 0 68%, 5% 60%, 0 52%, 4% 44%, 0 36%,

    3% 29%, 0 21%, 4% 14%

  ) !important;

  background:

    repeating-linear-gradient(38deg, rgba(255,255,255,.035) 0 1px, transparent 1px 15px, rgba(0,0,0,.26) 15px 18px, transparent 18px 31px),

    repeating-linear-gradient(121deg, rgba(255,255,255,.026) 0 1px, transparent 1px 9px),

    radial-gradient(circle at 22% 11%, rgba(255,255,255,.07), transparent 19%),

    radial-gradient(circle at 86% 82%, rgba(255,255,255,.045), transparent 24%),

    linear-gradient(180deg, rgba(9,10,10,.68), rgba(1,2,2,.58) 52%, rgba(8,8,7,.66)) !important;

}

.link-section::after {

  content: "";

  position: absolute;

  z-index: -1;

  inset: clamp(22px, 3.4vw, 40px) clamp(16px, 3vw, 42px);

  pointer-events: none;

  opacity: .42;

  background:

    linear-gradient(112deg, transparent 0 11%, rgba(255,255,255,.16) 11.4% 11.8%, transparent 12.2% 100%),

    linear-gradient(64deg, transparent 0 38%, rgba(255,255,255,.10) 38.3% 38.9%, transparent 39.4% 100%),

    linear-gradient(154deg, transparent 0 66%, rgba(255,255,255,.09) 66.5% 67%, transparent 67.5% 100%),

    linear-gradient(25deg, transparent 0 73%, rgba(0,0,0,.52) 73.2% 73.8%, transparent 74.4% 100%);

  clip-path: polygon(8% 0, 26% 8%, 42% 0, 57% 6%, 74% 0, 94% 10%, 100% 34%, 91% 52%, 100% 77%, 82% 100%, 61% 91%, 46% 100%, 26% 90%, 8% 100%, 0 78%, 9% 58%, 0 35%);

  mix-blend-mode: screen;

}

.link-card,

.more-platforms,

.merch-core,

.merch-sample,

.booking-card {

  clip-path: polygon(

    0 11%, 6% 0, 13% 5%, 20% 0, 29% 6%, 38% 0, 45% 4%, 54% 0,

    63% 7%, 72% 0, 82% 5%, 92% 0, 100% 13%, 95% 22%, 100% 31%,

    94% 42%, 100% 53%, 96% 64%, 100% 76%, 92% 88%, 100% 100%,

    85% 95%, 75% 100%, 64% 92%, 55% 100%, 45% 94%, 34% 100%, 25% 91%,

    14% 100%, 5% 93%, 0 100%, 7% 84%, 0 73%, 6% 61%, 0 50%, 8% 39%,

    0 28%, 6% 19%

  ) !important;

  background:

    repeating-linear-gradient(47deg, rgba(255,255,255,.052) 0 1px, transparent 1px 8px, rgba(0,0,0,.28) 8px 11px, transparent 11px 23px),

    repeating-linear-gradient(131deg, rgba(255,255,255,.026) 0 1px, transparent 1px 12px),

    radial-gradient(circle at 18% 9%, rgba(255,255,255,.09), transparent 22%),

    radial-gradient(circle at 79% 88%, rgba(255,255,255,.045), transparent 22%),

    linear-gradient(158deg, rgba(18,20,19,.56), rgba(1,2,2,.44) 44%, rgba(14,15,14,.50)) !important;

}

.link-card::before,

.merch-core::before,

.merch-sample::before,

.booking-card::before {

  background:

    linear-gradient(112deg, transparent 0 21%, rgba(255,255,255,.18) 21.2% 21.8%, transparent 22.4% 100%),

    linear-gradient(41deg, transparent 0 55%, rgba(255,255,255,.12) 55.2% 55.8%, transparent 56.5% 100%),

    repeating-linear-gradient(0deg, rgba(255,255,255,.035) 0 1px, transparent 1px 11px),

    repeating-linear-gradient(93deg, rgba(0,0,0,.28) 0 2px, transparent 2px 19px) !important;

  opacity: .82 !important;

  mix-blend-mode: screen;

}

.link-card::after {

  background:

    linear-gradient(90deg, transparent, rgba(238,238,226,.28) 12%, transparent 24%, rgba(0,0,0,.5) 38%, transparent 48%, rgba(238,238,226,.18) 62%, transparent) !important;

  opacity: .64 !important;

}

@media (max-width: 820px), (max-device-width: 820px), (hover: none) and (pointer: coarse) {

  .link-section::after {

    inset: 16px 16px;

    opacity: .36;

  }

}



/* v108: organisch zerfetztes/angebranntes Papier — SVG-Masken statt Bastelscheren-Polygon */
.link-section::before {
  -webkit-mask-image: url("assets/ripped-section-mask.svg") !important;
  mask-image: url("assets/ripped-section-mask.svg") !important;
  -webkit-mask-size: 100% 100% !important;
  mask-size: 100% 100% !important;
  -webkit-mask-repeat: no-repeat !important;
  mask-repeat: no-repeat !important;
  clip-path: none !important;
  border: 0 !important;
  background:
    radial-gradient(ellipse at 12% 19%, rgba(0,0,0,.92) 0 2.3rem, transparent 2.95rem),
    radial-gradient(ellipse at 80% 18%, rgba(0,0,0,.86) 0 2.9rem, transparent 3.7rem),
    radial-gradient(ellipse at 25% 78%, rgba(0,0,0,.78) 0 2.6rem, transparent 3.4rem),
    radial-gradient(ellipse at 76% 72%, rgba(0,0,0,.72) 0 3.2rem, transparent 4.1rem),
    radial-gradient(circle at 18% 13%, rgba(155,64,22,.34), transparent 13%),
    radial-gradient(circle at 87% 78%, rgba(155,64,22,.27), transparent 15%),
    repeating-linear-gradient(7deg, rgba(255,255,255,.018) 0 1px, transparent 1px 6px, rgba(0,0,0,.20) 6px 9px, transparent 9px 20px),
    repeating-linear-gradient(103deg, rgba(255,255,255,.026) 0 1px, transparent 1px 17px),
    linear-gradient(180deg, rgba(12,13,12,.72), rgba(2,2,2,.61) 48%, rgba(9,8,7,.70)) !important;
  box-shadow:
    0 34px 96px rgba(0,0,0,.50),
    inset 0 0 0 1px rgba(255,255,255,.045),
    inset 0 16px 34px rgba(255,255,255,.035),
    inset 0 -22px 40px rgba(0,0,0,.38) !important;
}
.link-section::after {
  inset: clamp(18px, 3vw, 36px) clamp(12px, 2.5vw, 34px) !important;
  opacity: .62 !important;
  background:
    radial-gradient(ellipse at 13% 22%, rgba(0,0,0,.82) 0 2.1rem, rgba(138,50,16,.34) 2.15rem 2.55rem, transparent 3rem),
    radial-gradient(ellipse at 80% 18%, rgba(0,0,0,.76) 0 2.6rem, rgba(144,52,16,.30) 2.65rem 3.15rem, transparent 3.8rem),
    radial-gradient(ellipse at 74% 74%, rgba(0,0,0,.68) 0 3rem, rgba(120,43,14,.24) 3.05rem 3.55rem, transparent 4.2rem),
    linear-gradient(116deg, transparent 0 9%, rgba(255,255,255,.16) 9.2% 9.55%, transparent 10% 100%),
    linear-gradient(67deg, transparent 0 43%, rgba(0,0,0,.50) 43.2% 43.85%, transparent 44.4% 100%),
    linear-gradient(154deg, transparent 0 68%, rgba(255,255,255,.08) 68.2% 68.55%, transparent 69.1% 100%) !important;
  clip-path: none !important;
  mix-blend-mode: screen;
  -webkit-mask-image: url("assets/ripped-section-mask.svg");
  mask-image: url("assets/ripped-section-mask.svg");
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}
.link-card,
.more-platforms,
.merch-core,
.merch-sample,
.booking-card {
  overflow: hidden !important;
  border: 0 !important;
  clip-path: none !important;
  -webkit-mask-image: url("assets/ripped-card-mask.svg") !important;
  mask-image: url("assets/ripped-card-mask.svg") !important;
  -webkit-mask-size: 100% 100% !important;
  mask-size: 100% 100% !important;
  -webkit-mask-repeat: no-repeat !important;
  mask-repeat: no-repeat !important;
  background:
    radial-gradient(ellipse at 13% 19%, rgba(0,0,0,.95) 0 20px, rgba(114,43,15,.34) 22px 28px, transparent 37px),
    radial-gradient(ellipse at 82% 15%, rgba(0,0,0,.88) 0 18px, rgba(150,54,17,.30) 19px 25px, transparent 35px),
    radial-gradient(ellipse at 88% 72%, rgba(0,0,0,.82) 0 22px, rgba(112,42,14,.25) 24px 31px, transparent 44px),
    radial-gradient(ellipse at 30% 79%, rgba(0,0,0,.70) 0 17px, rgba(134,48,15,.24) 18px 24px, transparent 34px),
    repeating-linear-gradient(4deg, rgba(255,255,255,.034) 0 1px, transparent 1px 5px, rgba(0,0,0,.20) 5px 7px, transparent 7px 19px),
    repeating-linear-gradient(98deg, rgba(255,255,255,.026) 0 1px, transparent 1px 13px),
    radial-gradient(circle at 21% 7%, rgba(255,255,255,.075), transparent 20%),
    radial-gradient(circle at 76% 88%, rgba(255,255,255,.04), transparent 24%),
    linear-gradient(156deg, rgba(19,20,19,.66), rgba(1,2,2,.50) 44%, rgba(14,13,12,.58)) !important;
  box-shadow:
    0 22px 58px rgba(0,0,0,.42),
    inset 0 0 0 1px rgba(255,255,255,.05),
    inset 0 18px 32px rgba(255,255,255,.035),
    inset 0 -22px 38px rgba(0,0,0,.42) !important;
}
.link-card::before,
.merch-core::before,
.merch-sample::before,
.booking-card::before {
  inset: 0 !important;
  background:
    linear-gradient(111deg, transparent 0 16%, rgba(255,255,255,.22) 16.15% 16.55%, transparent 17.2% 100%),
    linear-gradient(36deg, transparent 0 57%, rgba(255,255,255,.11) 57.1% 57.55%, transparent 58.2% 100%),
    radial-gradient(ellipse at 13% 19%, rgba(0,0,0,.72) 0 22px, transparent 38px),
    radial-gradient(ellipse at 82% 15%, rgba(0,0,0,.66) 0 20px, transparent 36px),
    radial-gradient(ellipse at 88% 72%, rgba(0,0,0,.62) 0 24px, transparent 45px),
    repeating-linear-gradient(0deg, rgba(255,255,255,.025) 0 1px, transparent 1px 8px),
    repeating-linear-gradient(91deg, rgba(0,0,0,.24) 0 2px, transparent 2px 21px) !important;
  opacity: .78 !important;
  mix-blend-mode: screen;
}
.link-card::after {
  inset: auto 8% 10px 8% !important;
  height: 20px !important;
  opacity: .78 !important;
  background:
    radial-gradient(ellipse at 8% 45%, rgba(0,0,0,.78) 0 8px, transparent 15px),
    radial-gradient(ellipse at 31% 66%, rgba(0,0,0,.55) 0 5px, transparent 11px),
    radial-gradient(ellipse at 63% 38%, rgba(0,0,0,.62) 0 7px, transparent 14px),
    radial-gradient(ellipse at 91% 52%, rgba(0,0,0,.74) 0 8px, transparent 15px),
    linear-gradient(90deg, transparent, rgba(238,238,226,.26) 12%, transparent 27%, rgba(99,36,12,.40) 46%, transparent 59%, rgba(238,238,226,.16) 72%, transparent) !important;
  mix-blend-mode: screen;
}
.link-card:hover,
.link-card:focus-visible {
  transform: translateY(-5px) rotate(-.22deg) !important;
  filter: brightness(1.08) contrast(1.04);
}
.link-card:nth-child(even) { transform: rotate(.18deg); }
.link-card:nth-child(odd) { transform: rotate(-.12deg); }
.link-card:nth-child(even):hover,
.link-card:nth-child(even):focus-visible { transform: translateY(-5px) rotate(.04deg) !important; }
.more-platforms a {
  clip-path: none !important;
  -webkit-mask-image: url("assets/ripped-card-mask.svg");
  mask-image: url("assets/ripped-card-mask.svg");
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  border: 0 !important;
  background:
    radial-gradient(ellipse at 85% 20%, rgba(0,0,0,.62) 0 9px, transparent 18px),
    linear-gradient(150deg, rgba(255,255,255,.07), rgba(0,0,0,.20)) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.09);
}
@media (max-width: 820px), (max-device-width: 820px), (hover: none) and (pointer: coarse) {
  .link-section::after { inset: 14px 12px !important; opacity: .50 !important; }
  .link-card,
  .more-platforms,
  .merch-core,
  .merch-sample,
  .booking-card {
    background:
      radial-gradient(ellipse at 12% 18%, rgba(0,0,0,.9) 0 15px, rgba(126,45,15,.28) 16px 21px, transparent 29px),
      radial-gradient(ellipse at 84% 16%, rgba(0,0,0,.82) 0 14px, rgba(126,45,15,.24) 15px 20px, transparent 28px),
      radial-gradient(ellipse at 88% 74%, rgba(0,0,0,.78) 0 16px, rgba(126,45,15,.22) 17px 23px, transparent 32px),
      repeating-linear-gradient(4deg, rgba(255,255,255,.032) 0 1px, transparent 1px 5px, rgba(0,0,0,.20) 5px 7px, transparent 7px 18px),
      linear-gradient(156deg, rgba(19,20,19,.66), rgba(1,2,2,.52) 44%, rgba(14,13,12,.58)) !important;
  }
}


/* v109: Reset weg vom räudigen Papierlook — clean, eckig, industrial, wenig Schnickschnack */
.link-section {
  isolation: isolate;
}
.link-section::before {
  -webkit-mask-image: none !important;
  mask-image: none !important;
  clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 18px 100%, 0 calc(100% - 18px)) !important;
  border: 1px solid rgba(255,255,255,.105) !important;
  background:
    linear-gradient(180deg, rgba(14,16,16,.70), rgba(3,4,4,.56) 52%, rgba(10,11,11,.68)) !important;
  box-shadow:
    0 30px 88px rgba(0,0,0,.42),
    inset 0 0 0 1px rgba(255,255,255,.028) !important;
  backdrop-filter: blur(2px) brightness(.94) saturate(.75) !important;
}
.link-section::after {
  content: "" !important;
  position: absolute !important;
  z-index: -1 !important;
  inset: clamp(22px, 3vw, 38px) clamp(18px, 3vw, 42px) !important;
  pointer-events: none !important;
  opacity: .28 !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
  clip-path: none !important;
  mix-blend-mode: screen !important;
  background:
    linear-gradient(90deg, rgba(255,255,255,.12), transparent 18%, transparent 82%, rgba(255,255,255,.08)),
    linear-gradient(180deg, rgba(255,255,255,.10), transparent 20%, transparent 80%, rgba(255,255,255,.06)) !important;
}
.link-card,
.more-platforms,
.merch-core,
.merch-sample,
.booking-card {
  -webkit-mask-image: none !important;
  mask-image: none !important;
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px)) !important;
  border: 1px solid rgba(238,238,226,.14) !important;
  overflow: hidden !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.012)),
    linear-gradient(145deg, rgba(21,23,23,.60), rgba(4,5,5,.46)) !important;
  box-shadow:
    0 18px 52px rgba(0,0,0,.34),
    inset 0 0 0 1px rgba(255,255,255,.025) !important;
  transform: none !important;
  filter: none !important;
}
.link-card::before,
.merch-core::before,
.merch-sample::before,
.booking-card::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  pointer-events: none !important;
  background:
    linear-gradient(90deg, rgba(238,238,226,.20), transparent 22%, transparent 78%, rgba(238,238,226,.12)) 0 0 / 100% 1px no-repeat,
    linear-gradient(180deg, rgba(255,255,255,.055), transparent 34%) !important;
  opacity: .72 !important;
  mix-blend-mode: normal !important;
}
.link-card::after {
  content: "" !important;
  position: absolute !important;
  left: 14px !important;
  right: 14px !important;
  bottom: 12px !important;
  height: 1px !important;
  opacity: .35 !important;
  background: linear-gradient(90deg, transparent, rgba(238,238,226,.34), transparent) !important;
  mix-blend-mode: normal !important;
}
.link-card:hover,
.link-card:focus-visible {
  transform: translateY(-4px) !important;
  border-color: rgba(255,255,255,.30) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.075), rgba(255,255,255,.018)),
    linear-gradient(145deg, rgba(27,29,29,.64), rgba(6,7,7,.50)) !important;
  box-shadow:
    0 24px 62px rgba(0,0,0,.42),
    inset 0 0 0 1px rgba(255,255,255,.035) !important;
}
.link-card:nth-child(even),
.link-card:nth-child(odd) { transform: none !important; }
.link-card:nth-child(even):hover,
.link-card:nth-child(even):focus-visible,
.link-card:nth-child(odd):hover,
.link-card:nth-child(odd):focus-visible { transform: translateY(-4px) !important; }
.more-platforms a {
  -webkit-mask-image: none !important;
  mask-image: none !important;
  clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px)) !important;
  border: 1px solid rgba(255,255,255,.11) !important;
  background: rgba(255,255,255,.035) !important;
  box-shadow: none !important;
}
.merch-core,
.merch-sample {
  min-height: 286px !important;
}
.booking-card {
  background:
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.015)),
    linear-gradient(145deg, rgba(19,21,21,.70), rgba(4,5,5,.54)) !important;
}
@media (max-width: 820px), (max-device-width: 820px), (hover: none) and (pointer: coarse) {
  .link-section::before {
    clip-path: polygon(0 0, calc(100% - 13px) 0, 100% 13px, 100% 100%, 13px 100%, 0 calc(100% - 13px)) !important;
  }
  .link-section::after { opacity: .20 !important; inset: 16px 14px !important; }
  .link-card,
  .more-platforms,
  .merch-core,
  .merch-sample,
  .booking-card {
    clip-path: polygon(0 0, calc(100% - 9px) 0, 100% 9px, 100% 100%, 9px 100%, 0 calc(100% - 9px)) !important;
    background:
      linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.012)),
      linear-gradient(145deg, rgba(21,23,23,.62), rgba(4,5,5,.48)) !important;
  }
}


/* v110: EYCER shadowbox tighter — same approved color, hugs the word closer */
.hero-copy h1 {
  position: relative !important;
  z-index: 0 !important;
  display: inline-block !important;
  width: auto !important;
  padding: 0 .010em .006em .010em !important;
}
.hero-copy h1::before {
  content: "" !important;
  position: absolute !important;
  z-index: -1 !important;
  left: .3em !important;
  right: .3em !important;
  top: .3em !important;
  bottom: .3em !important;
  border-radius: 0 !important;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(0,0,0,.035) 8%,
    rgba(0,0,0,.105) 18%,
    rgba(0,0,0,.145) 36%,
    rgba(0,0,0,.145) 56%,
    rgba(0,0,0,.095) 76%,
    rgba(0,0,0,.025) 92%,
    transparent 100%) !important;
  box-shadow: none !important;
  filter: blur(.18px) !important;
  opacity: .72 !important;
  transform: none !important;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 11%, #000 89%, transparent 100%) !important;
  mask-image: linear-gradient(90deg, transparent 0%, #000 11%, #000 89%, transparent 100%) !important;
}
@media (max-width: 820px), (max-device-width: 820px), (hover: none) and (pointer: coarse) {
  .hero-copy h1 {
    padding: 0 .006em .004em .006em !important;
  }
  .hero-copy h1::before {
    left: .3em !important;
    right: .195em !important;
    top: .295em !important;
    bottom: .315em !important;
    background: linear-gradient(90deg,
      transparent 0%,
      rgba(0,0,0,.045) 8%,
      rgba(0,0,0,.125) 18%,
      rgba(0,0,0,.165) 36%,
      rgba(0,0,0,.165) 56%,
      rgba(0,0,0,.110) 76%,
      rgba(0,0,0,.035) 92%,
      transparent 100%) !important;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 10%, #000 90%, transparent 100%) !important;
    mask-image: linear-gradient(90deg, transparent 0%, #000 10%, #000 90%, transparent 100%) !important;
  }
}


/* v111: langer EYCER Agegate-Warntext lesbar integrieren */
.age-gate__frame {
  width: min(860px, calc(100vw - 32px)) !important;
  padding: clamp(22px, 3.2vw, 42px) clamp(18px, 4vw, 56px) !important;
  align-content: center !important;
  gap: 0 !important;
}
.age-gate__sigil {
  width: clamp(72px, 8vw, 118px) !important;
  margin-bottom: 12px !important;
}
.age-gate__kicker {
  margin-bottom: 9px !important;
}
.age-gate h2 {
  font-size: clamp(28px, 4.2vw, 54px) !important;
  line-height: .92 !important;
}
.age-gate__copy {
  max-width: 760px !important;
  margin: 16px auto 0 !important;
  color: rgba(255,255,255,.76) !important;
  font-family: Rajdhani, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  font-size: clamp(13px, 1.28vw, 16px) !important;
  line-height: 1.32 !important;
  letter-spacing: .018em !important;
  text-transform: none !important;
  text-align: center !important;
}
.age-gate__copy p {
  margin: 0 auto 10px !important;
}
.age-gate__copy p:last-child {
  margin-bottom: 0 !important;
}
.age-gate__confirm {
  margin: 18px auto 0 !important;
  color: rgba(255,244,226,.90) !important;
  font-family: 'Lipi EYCER', Orbitron, Rajdhani, system-ui, sans-serif !important;
  font-size: clamp(17px, 2vw, 24px) !important;
  line-height: 1 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  text-shadow: 0 0 18px rgba(198,25,25,.38) !important;
}
.age-gate__actions {
  margin-top: 14px !important;
  width: min(430px, 100%) !important;
  gap: 12px !important;
}
.age-btn {
  min-height: 52px !important;
}
@media (max-width: 820px), (max-device-width: 820px), (hover: none) and (pointer: coarse) {
  .age-gate {
    padding: 12px !important;
    overflow-y: auto !important;
    align-items: start !important;
  }
  .age-gate__frame {
    width: min(100%, 560px) !important;
    margin: 10px auto !important;
    padding: 20px 16px 18px !important;
    border-radius: 24px !important;
  }
  .age-gate__sigil {
    width: 68px !important;
    margin-bottom: 8px !important;
  }
  .age-gate__kicker {
    font-size: 8px !important;
    letter-spacing: .28em !important;
    margin-bottom: 8px !important;
  }
  .age-gate h2 {
    font-size: clamp(27px, 8.5vw, 40px) !important;
  }
  .age-gate__copy {
    margin-top: 12px !important;
    font-size: clamp(12px, 3.35vw, 14px) !important;
    line-height: 1.25 !important;
    letter-spacing: .01em !important;
  }
  .age-gate__copy p {
    margin-bottom: 8px !important;
  }
  .age-gate__confirm {
    margin-top: 12px !important;
    font-size: clamp(16px, 5vw, 21px) !important;
  }
  .age-gate__actions {
    margin-top: 10px !important;
    width: min(260px, 100%) !important;
    gap: 10px !important;
  }
  .age-btn {
    min-height: 46px !important;
  }
}


/* v112 TEST: große Hero-Backdrop-Shadowbox vertikal schmaler machen */
.backdrop-shade {
  background:
    radial-gradient(ellipse at 50% 30%, transparent 0 48%, rgba(0,0,0,.20) 68%, rgba(0,0,0,.50) 100%),
    linear-gradient(180deg, rgba(0,0,0,.04) 0%, rgba(0,0,0,.12) 58%, rgba(0,0,0,.26) 100%) !important;
}


/* v113 TEST: untere Hero-Backdrop-Fläche extrem klein machen */
.backdrop-shade {
  background:
    radial-gradient(ellipse 62% 22% at 50% 31%, transparent 0 58%, rgba(0,0,0,.10) 76%, rgba(0,0,0,.24) 100%),
    linear-gradient(180deg, rgba(0,0,0,.02) 0%, rgba(0,0,0,.03) 74%, rgba(0,0,0,.16) 100%) !important;
}


/* v114 TEST: tatsächliche H1-EYCER-Shadowbox extrem flach/vertikal kleiner */
.hero-copy h1::before {
  left: .22em !important;
  right: .24em !important;
  top: .385em !important;
  bottom: .445em !important;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(0,0,0,.035) 8%,
    rgba(0,0,0,.105) 18%,
    rgba(0,0,0,.145) 36%,
    rgba(0,0,0,.145) 56%,
    rgba(0,0,0,.095) 76%,
    rgba(0,0,0,.025) 92%,
    transparent 100%) !important;
  opacity: .72 !important;
  filter: blur(.18px) !important;
}
@media (max-width: 820px), (max-device-width: 820px), (hover: none) and (pointer: coarse) {
  .hero-copy h1::before {
    left: .20em !important;
    right: .22em !important;
    top: .36em !important;
    bottom: .42em !important;
  }
}


/* v115 TEST: alles was mit dem EYCER-Text mitscrollt radikal verkleinern/abschalten */
.hero-copy::before {
  display: none !important;
  content: none !important;
  opacity: 0 !important;
}
.hero-copy h1::before {
  display: none !important;
  content: none !important;
  opacity: 0 !important;
}
.hero-copy h1,
.hero-copy .kicker,
.hero-copy .subline {
  text-shadow: none !important;
}


/* v116: richtige Shadow-Quelle gefunden — breite Hero-Shadowbox aus, nur kleiner enger EYCER-Schatten */
.hero-copy::before {
  display: none !important;
  content: none !important;
  opacity: 0 !important;
}
.hero-copy h1,
.hero-copy .kicker,
.hero-copy .subline {
  text-shadow: none !important;
}
.hero-copy h1::before {
  display: block !important;
  content: "" !important;
  position: absolute !important;
  z-index: -1 !important;
  left: .28em !important;
  right: .30em !important;
  top: .39em !important;
  bottom: .45em !important;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(0,0,0,.045) 8%,
    rgba(0,0,0,.13) 22%,
    rgba(0,0,0,.18) 42%,
    rgba(0,0,0,.16) 60%,
    rgba(0,0,0,.08) 82%,
    transparent 100%) !important;
  opacity: .82 !important;
  filter: blur(.22px) !important;
  transform: none !important;
  border-radius: 0 !important;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 12%, #000 88%, transparent 100%) !important;
  mask-image: linear-gradient(90deg, transparent 0%, #000 12%, #000 88%, transparent 100%) !important;
}
@media (max-width: 820px), (max-device-width: 820px), (hover: none) and (pointer: coarse) {
  .hero-copy h1::before {
    left: .24em !important;
    right: .26em !important;
    top: .36em !important;
    bottom: .43em !important;
  }
}


/* v117: alter weicher EYCER-Hero-Schatten zurück, aber kleiner + manuelle Regler */
:root {
  /* DREHREGLER EYCER-SHADOWBOX */
  --eycer-shadow-width: 560px;    /* breiter/schmaler: z.B. 480px, 620px, 700px */
  --eycer-shadow-height: 132px;   /* höher/flacher: z.B. 90px, 150px, 220px */
  --eycer-shadow-x: 0px;          /* nach links/rechts: negativ = links, positiv = rechts */
  --eycer-shadow-y: 10px;         /* nach oben/unten: negativ = hoch, positiv = runter */
  --eycer-shadow-opacity: .82;    /* Stärke: 0 = weg, 1 = voll */
  --eycer-shadow-blur: 10px;      /* Weichheit: 0px hart, 16px weicher */
}
.hero-copy {
  isolation: isolate !important;
}
.hero-copy::before {
  display: block !important;
  content: "" !important;
  position: absolute !important;
  z-index: -1 !important;
  left: 50% !important;
  top: 50% !important;
  width: min(var(--eycer-shadow-width), calc(100vw - 28px)) !important;
  height: var(--eycer-shadow-height) !important;
  transform: translate(calc(-50% + var(--eycer-shadow-x)), calc(-50% + var(--eycer-shadow-y))) !important;
  pointer-events: none !important;
  background: radial-gradient(ellipse at 50% 50%, rgba(0,0,0,.56), rgba(0,0,0,.34) 44%, rgba(0,0,0,.08) 76%, transparent 100%) !important;
  filter: blur(var(--eycer-shadow-blur)) !important;
  opacity: var(--eycer-shadow-opacity) !important;
}
.hero-copy h1,
.hero-copy .kicker,
.hero-copy .subline {
  text-shadow: none !important;
}
.hero-copy h1::before {
  display: none !important;
  content: none !important;
  opacity: 0 !important;
}
@media (max-width: 820px), (max-device-width: 820px), (hover: none) and (pointer: coarse) {
  :root {
    --eycer-shadow-width: 360px;
    --eycer-shadow-height: 110px;
    --eycer-shadow-x: 0px;
    --eycer-shadow-y: 6px;
    --eycer-shadow-opacity: .80;
    --eycer-shadow-blur: 9px;
  }
}

/* Hamster-Easteregg: 5x auf den Kopf der Person tippen/klicken */
.hamster-head-tap {
  position: absolute;
  z-index: 6;
  left: 51%;
  top: 27%;
  width: clamp(70px, 9vw, 145px);
  height: clamp(86px, 14vh, 170px);
  transform: translate(-50%, -50%);
  border: 0;
  padding: 0;
  margin: 0;
  border-radius: 999px;
  background: transparent;
  color: transparent;
  cursor: default;
  opacity: 0;
  appearance: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.intro-active .hamster-head-tap {
  pointer-events: none;
}

.hamster-modal {
  position: fixed;
  inset: 0;
  z-index: 4000;
  display: grid;
  place-items: center;
  padding: clamp(16px, 4vw, 48px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .16s ease, visibility .16s ease;
}

.hamster-modal.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.hamster-modal__backdrop {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 46%, rgba(255,255,255,.10), transparent 34rem),
    rgba(0,0,0,.78);
  backdrop-filter: blur(8px);
}

.hamster-modal__frame {
  position: relative;
  z-index: 1;
  width: min(92vw, 760px);
  max-height: 86vh;
  border: 1px solid rgba(255,255,255,.22);
  background: #050505;
  box-shadow: 0 30px 90px rgba(0,0,0,.78), 0 0 48px rgba(198,25,25,.22);
  overflow: hidden;
}

.hamster-modal__video {
  display: block;
  width: 100%;
  max-height: 86vh;
  object-fit: contain;
  background: #000;
}

body.hamster-open {
  overflow: hidden;
}

@media (max-width: 820px), (max-device-width: 820px), (hover: none) and (pointer: coarse) {
  .hamster-head-tap {
    left: 51%;
    top: 26%;
    width: clamp(76px, 24vw, 128px);
    height: clamp(86px, 18vh, 150px);
  }

  .hamster-modal {
    padding: 14px;
  }

  .hamster-modal__frame {
    width: min(94vw, 520px);
  }
}

/* v121: Mobile footer one-line split — EYCER left / FUCK YOUR FAITH right */
@media (max-width: 820px), (max-device-width: 820px), (hover: none) and (pointer: coarse) {
  .footer {
    flex-direction: row !important;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 24px 18px 28px;
    font-size: clamp(9px, 2.7vw, 12px);
    line-height: 1;
    letter-spacing: .075em;
    white-space: nowrap;
  }

  .footer span:first-child {
    text-align: left;
  }

  .footer span:last-child {
    text-align: right;
    margin-left: auto;
  }
}

/* v122: Mobile Agegate wirklich mittig im sichtbaren Screen platzieren */
@media (max-width: 820px), (max-device-width: 820px), (hover: none) and (pointer: coarse) {
  .age-gate {
    display: grid !important;
    align-items: center !important;
    justify-items: center !important;
    min-height: var(--stable-vh, 100dvh) !important;
    padding: 16px 12px !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
  }

  .age-gate__frame {
    margin: auto !important;
  }

  .age-gate__actions {
    width: min(320px, 100%) !important;
  }
}

/* v123: Mobile Agegate ohne seitliches Abschneiden */
@media (max-width: 820px), (max-device-width: 820px), (hover: none) and (pointer: coarse) {
  .age-gate,
  .age-gate__frame,
  .age-gate__frame * {
    box-sizing: border-box;
  }

  .age-gate__frame {
    width: min(100%, calc(100vw - 24px)) !important;
    max-width: 560px !important;
    padding: 20px 16px 18px !important;
  }

  .age-gate__copy {
    max-width: 100% !important;
    width: 100% !important;
  }

  .age-gate__confirm {
    width: 100% !important;
    max-width: 100% !important;
    font-size: clamp(15px, 4.45vw, 18px) !important;
    line-height: 1.05 !important;
    white-space: normal !important;
    overflow-wrap: normal !important;
  }

  .age-gate__actions {
    width: min(330px, 100%) !important;
  }

  .age-btn {
    min-width: 0 !important;
    font-size: clamp(12px, 3.45vw, 14px) !important;
    line-height: 1.02 !important;
    padding-inline: 12px !important;
  }
}

/* v124: Mobile Agegate-Buttons sicher innerhalb von 390px halten */
@media (max-width: 820px), (max-device-width: 820px), (hover: none) and (pointer: coarse) {
  .age-gate__actions {
    width: min(300px, 100%) !important;
    gap: 8px !important;
  }

  .age-btn {
    min-height: 44px !important;
    font-size: clamp(11px, 3.15vw, 13px) !important;
    letter-spacing: .055em !important;
    padding-inline: 8px !important;
  }
}