*, 
*::before, 
*::after { 
  box-sizing: border-box; 
  margin: 0; 
  padding: 0; 
}

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: #fafaf7;
  font-family: monospace;
}

nav.landing-nav {
  width: 100%;
  padding: 1rem 2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #e5e7eb;
  background: #ffffff;
}

.nav-logo {
  font-size: 1.1rem;
  font-weight: 900;
  font-family: monospace;
  color: #1f2937;
  letter-spacing: 0.05em;
}

.nav-links {
  display: flex;
  gap: 1.5rem;
  list-style: none;
}

.nav-links a {
  font-size: 0.9rem;
  font-weight: 600;
  font-family: monospace;
  color: #6b7280;
  text-decoration: none;
  transition: color 0.15s;

  &:hover { 
    color: #1f2937; 
  }
}

.landing-hero {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.2rem;
  padding: 2rem 1rem 4rem;
}

/* ARC: F und letztes E niedrigste, V höchstes */
.title-arc {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  line-height: 1;
}

.title-arc span {
  display: inline-block;
  font-size: clamp(3.5rem, 10vw, 8rem);
  font-weight: 900;
  padding: 0 0.06em;
  transform-origin: bottom center;
  // perspective: 500px;
}

.title-arc .l-F  { 
  padding-right: 0.18em; 
}

.title-arc .l-e2 { 
  padding-left:  0.18em; 
}

.title-arc .l-F {
  color: #86efac;
  transform: rotate(-45deg) translateY(120px);
  text-shadow:
    1px 1px 0 #4ade80, 2px 2px 0 #22c55e, 3px 3px 0 #16a34a,
    4px 4px 0 #15803d, 5px 5px 0 #166534, 6px 6px 0 #14532d,
    7px 7px 14px #22c55e, 0 0 8px #86efac,
    0 0 20px rgba(134,239,172,0.7), 0 0 40px rgba(134,239,172,0.3),
    0 -4px 10px #bbf7d0;
}
.title-arc .l-u {
  color: #fca5a5;
  transform: rotate(-34deg) translateY(55px);
  text-shadow:
    1px 1px 0 #f87171, 2px 2px 0 #ef4444, 3px 3px 0 #dc2626,
    4px 4px 0 #b91c1c, 5px 5px 0 #991b1b, 6px 6px 0 #7f1d1d,
    7px 7px 14px #ef4444, 0 0 8px #fca5a5,
    0 0 20px rgba(252,165,165,0.7), 0 0 40px rgba(252,165,165,0.3),
    0 -4px 10px #fecaca;
}
.title-arc .l-n {
  color: #fde68a;
  transform: rotate(-23deg) translateY(9px);
  text-shadow:
    1px 1px 0 #fcd34d, 2px 2px 0 #fbbf24, 3px 3px 0 #f59e0b,
    4px 4px 0 #d97706, 5px 5px 0 #b45309, 6px 6px 0 #92400e,
    7px 7px 14px #fbbf24, 0 0 8px #fde68a,
    0 0 20px rgba(253,230,138,0.7), 0 0 40px rgba(253,230,138,0.3),
    0 -4px 10px #fef3c7;
}
.title-arc .l-i {
  color: #c4b5fd;
  transform: rotate(-11deg) translateY(-19px);
  text-shadow:
    1px 1px 0 #a78bfa, 2px 2px 0 #8b5cf6, 3px 3px 0 #7c3aed,
    4px 4px 0 #6d28d9, 5px 5px 0 #5b21b6, 6px 6px 0 #4c1d95,
    7px 7px 14px #8b5cf6, 0 0 8px #c4b5fd,
    0 0 20px rgba(196,181,253,0.7), 0 0 40px rgba(196,181,253,0.3),
    0 -4px 10px #ede9fe;
}
.title-arc .l-v {
  color: #fdba74;
  transform: rotate(0deg) translateY(-28px);
  text-shadow:
    1px 1px 0 #fb923c, 2px 2px 0 #f97316, 3px 3px 0 #ea580c,
    4px 4px 0 #c2410c, 5px 5px 0 #9a3412, 6px 6px 0 #7c2d12,
    7px 7px 14px #f97316, 0 0 8px #fdba74,
    0 0 20px rgba(253,186,116,0.7), 0 0 40px rgba(253,186,116,0.3),
    0 -4px 10px #fed7aa;
}
.title-arc .l-e1 {
  color: #7dd3fc;
  transform: rotate(11deg) translateY(-19px);
  text-shadow:
    1px 1px 0 #38bdf8, 2px 2px 0 #0ea5e9, 3px 3px 0 #0284c7,
    4px 4px 0 #0369a1, 5px 5px 0 #075985, 6px 6px 0 #0c4a6e,
    7px 7px 14px #0ea5e9, 0 0 8px #7dd3fc,
    0 0 20px rgba(125,211,252,0.7), 0 0 40px rgba(125,211,252,0.3),
    0 -4px 10px #bae6fd;
}
.title-arc .l-r {
  color: #f9a8d4;
  transform: rotate(23deg) translateY(9px);
  text-shadow:
    1px 1px 0 #f472b6, 2px 2px 0 #ec4899, 3px 3px 0 #db2777,
    4px 4px 0 #be185d, 5px 5px 0 #9d174d, 6px 6px 0 #831843,
    7px 7px 14px #ec4899, 0 0 8px #f9a8d4,
    0 0 20px rgba(249,168,212,0.7), 0 0 40px rgba(249,168,212,0.3),
    0 -4px 10px #fce7f3;
}
.title-arc .l-s {
  color: #6ee7b7;
  transform: rotate(34deg) translateY(55px);
  text-shadow:
    1px 1px 0 #34d399, 2px 2px 0 #10b981, 3px 3px 0 #059669,
    4px 4px 0 #047857, 5px 5px 0 #065f46, 6px 6px 0 #064e3b,
    7px 7px 14px #10b981, 0 0 8px #6ee7b7,
    0 0 20px rgba(110,231,183,0.7), 0 0 40px rgba(110,231,183,0.3),
    0 -4px 10px #a7f3d0;
}
.title-arc .l-e2 {
  color: #fbbf24;
  transform: rotate(45deg) translateY(120px);
  text-shadow:
    1px 1px 0 #f59e0b, 2px 2px 0 #d97706, 3px 3px 0 #b45309,
    4px 4px 0 #92400e, 5px 5px 0 #78350f, 6px 6px 0 #451a03,
    7px 7px 14px #d97706, 0 0 8px #fbbf24,
    0 0 20px rgba(251,191,36,0.7), 0 0 40px rgba(251,191,36,0.3),
    0 -4px 10px #fde68a;
}

.title-arc b {
  display: inline-block;
  font-style: normal;
  cursor: default;
  transform: scale(1);
  transition: --scale 0.2s cubic-bezier(0.34, 1.4, 0.64, 1),
              transform 0.2s cubic-bezier(0.34, 1.4, 0.64, 1);
}

.title-arc span b.popping { 
  animation: letter-pop 1.4s ease-in-out forwards; 
}

.subtitle {
  font-size: clamp(1.5rem, 4vw, 3rem);
  font-weight: 700;
  font-family: monospace;
  color: #374151;
  letter-spacing: 0.05em;
}

.enter-btn {
  margin-top: 0.5rem;
  display: inline-block;
  padding: 0.75rem 2.5rem;
  font-size: 1.1rem;
  font-weight: 700;
  font-family: monospace;
  color: #1f2937;
  background: #fde68a;
  border: none;
  border-radius: 999px;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 4px 20px rgba(251,191,36,0.35);
  transition: transform 0.15s, box-shadow 0.15s;

  &:hover {
    transform: translateY(-2px) scale(1.04);
    box-shadow: 0 8px 28px rgba(251,191,36,0.5);
  }
}



@keyframes letter-pop {
  0% , 100%  { transform: scale(1); }
  40%  { transform: scale(1.22); }
}