/* Public landing composition. Shared identity lives in packages/ui/tokens.css.
   Native HTML is the live Nginx surface; no React runtime is needed here. */
.landing-home .hero {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  align-items: center;
  gap: clamp(24px, 4vw, 64px);
  max-width: 1280px;
  margin: auto;
  padding: 72px 32px 40px;
  text-align: left;
}
.landing-home .hero-inner { min-width: 0; margin: 0; }
.landing-home .hero-headline { font-size: clamp(32px, 4vw, 56px); line-height: 1.12; margin: 0 0 24px; color: var(--my-text); }
.landing-home .hero-headline em { color: var(--my-brand-300); background: none; }
.landing-home .hero-sub { margin: 0 0 28px; max-width: 38ch; }
.landing-home .hero .cta-row { justify-content: flex-start; }
.hero-scene { margin: 0; overflow: hidden; border-radius: var(--my-r-xl); }
.hero-scene img { width: 100%; height: auto; aspect-ratio: 6 / 5; object-fit: cover; object-position: 65% center; }
.server-presence { max-width: 1216px; margin: 0 auto; padding: 20px 0; border-block: 1px solid var(--my-linie-stark); display: flex; flex-wrap: wrap; gap: 12px 32px; color: var(--my-text-2); font-size: 14px; }
.server-presence .live-pill { padding: 0; border: 0; box-shadow: none; background: none; color: inherit; text-transform: none; letter-spacing: 0; }
.server-presence strong { font-variant-numeric: tabular-nums; color: var(--my-text); }
.landing-home .btn-3d { color: var(--my-text-auf-marke); background: var(--my-marke-flaeche); box-shadow: 0 3px 0 var(--my-brand-800); text-transform: none; letter-spacing: 0; padding: 14px 20px; }
.landing-home .btn-3d-discord, .landing-home .btn-3d-secondary { color: var(--my-text); background: var(--my-gehoben); box-shadow: 0 3px 0 var(--my-vertieft); }
.landing-home .ip-badge { border-radius: var(--my-r-md); }
.landing-home .section { max-width: 1280px; margin: auto; padding: 64px 32px; }
.landing-home .section-title, .landing-home .section-sub { text-align: left; margin-left: 0; }
.intro-section .cards-grid { grid-template-columns: 1.2fr 1fr; max-width: none; }
.intro-section .card-3d:first-child { grid-row: span 2; display: flex; flex-direction: column; justify-content: center; background: var(--my-gewaehlt); }
.intro-section .card-3d { box-shadow: none; border: 1px solid var(--my-linie-stark); }
.intro-section .card-3d::before { display: none; }
.landing-home .feature-links { grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: none; gap: 12px; }
.landing-home .outro-inner { max-width: 1100px; text-align: left; box-shadow: none; border: 1px solid var(--my-linie-stark); }
.landing-home .outro-inner p { margin-left: 0; }
.landing-home .outro .cta-row { justify-content: flex-start; }
.join-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; margin: 32px 0 40px; list-style-position: inside; }
.join-steps li { color: var(--my-text-2); }
.join-steps strong { color: var(--my-text); }
.join-steps span { display: block; margin-top: 12px; }
.landing-home #mitspielen { scroll-margin-top: 24px; }
.landing-home :focus-visible { outline: 2px solid var(--my-fokus); outline-offset: 4px; }
@media (max-width: 767px) {
  .landing-home .brand-logo img { height: 36px; }
  .landing-home .nav-left .nav-link span { display: inline; }
  .landing-home .hero { grid-template-columns: 1fr; padding: 48px 20px 24px; gap: 28px; }
  .hero-scene img { aspect-ratio: 16 / 9; }
  .server-presence { margin-inline: 20px; }
  .landing-home .section { padding: 40px 20px; }
  .intro-section .cards-grid, .join-steps { grid-template-columns: 1fr; }
  .landing-home .feature-links { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .landing-home .outro-inner { padding: 28px 20px; }
}
@media (prefers-color-scheme: light) {
  .landing-home .hero-headline em { color: var(--my-brand-700); }
}
@media (prefers-reduced-motion: reduce) {
  .landing-home { scroll-behavior: auto; }
  .landing-home *, .landing-home *::before, .landing-home *::after { animation: none !important; transition: none !important; }
}