html[data-landscape="pestlaender"] { --landscape-image: url("/landscape-pestlaender.webp?v=52d1496ef857"); --landscape-image-small: url("/landscape-pestlaender-small.webp?v=09b7c5c3caf5"); --landscape-shade: 0.08; --landscape-position: 50%; --landscape-position-mobile: 75%; }
html[data-landscape="daemmerwald"] { --landscape-image: url("/landscape-daemmerwald.webp?v=f6e8843f5468"); --landscape-image-small: url("/landscape-daemmerwald-small.webp?v=c91a87c66e72"); --landscape-shade: 0.08; --landscape-position: 50%; --landscape-position-mobile: 80%; }
html[data-landscape="azshara"] { --landscape-image: url("/landscape-azshara.webp?v=ad8b799b12d3"); --landscape-image-small: url("/landscape-azshara-small.webp?v=ad730ef67e9d"); --landscape-shade: 0.1; --landscape-position: 50%; --landscape-position-mobile: 17%; }
html[data-landscape="eschental"] { --landscape-image: url("/landscape-eschental.webp?v=65f3ae77be51"); --landscape-image-small: url("/landscape-eschental-small.webp?v=d5d38c545278"); --landscape-shade: 0.08; --landscape-position: 50%; --landscape-position-mobile: 80%; }
html[data-landscape="sumpfland"] { --landscape-image: url("/landscape-sumpfland.webp?v=ed4837538a57"); --landscape-image-small: url("/landscape-sumpfland-small.webp?v=50050bced87b"); --landscape-shade: 0.08; --landscape-position: 50%; --landscape-position-mobile: 85%; }
html[data-landscape="duestermarschen"] { --landscape-image: url("/landscape-duestermarschen.webp?v=98a39ef22dee"); --landscape-image-small: url("/landscape-duestermarschen-small.webp?v=6e0dfcc22434"); --landscape-shade: 0.08; --landscape-position: 50%; --landscape-position-mobile: 82%; }
html[data-landscape="brachland"] { --landscape-image: url("/landscape-brachland.webp?v=3538bd1593f7"); --landscape-image-small: url("/landscape-brachland-small.webp?v=657c9d45c8bb"); --landscape-shade: 0.22; --landscape-position: 50%; --landscape-position-mobile: 85%; }
html[data-landscape="tanaris"] { --landscape-image: url("/landscape-tanaris.webp?v=d18e11392d69"); --landscape-image-small: url("/landscape-tanaris-small.webp?v=15650fe34fb3"); --landscape-shade: 0.22; --landscape-position: 50%; --landscape-position-mobile: 12%; }
html[data-landscape="westfall"] { --landscape-image: url("/landscape-westfall.webp?v=5a3c9a91a948"); --landscape-image-small: url("/landscape-westfall-small.webp?v=f676a5f11c48"); --landscape-shade: 0.22; --landscape-position: 50%; --landscape-position-mobile: 12%; }
html[data-landscape="rotkammgebirge"] { --landscape-image: url("/landscape-rotkammgebirge.webp?v=28b29cfa2b24"); --landscape-image-small: url("/landscape-rotkammgebirge-small.webp?v=1abc8ee3e5de"); --landscape-shade: 0.22; --landscape-position: 50%; --landscape-position-mobile: 85%; }
html[data-landscape="sengende-schlucht"] { --landscape-image: url("/landscape-sengende-schlucht.webp?v=07f29a56ab24"); --landscape-image-small: url("/landscape-sengende-schlucht-small.webp?v=befc1e368992"); --landscape-shade: 0.18; --landscape-position: 50%; --landscape-position-mobile: 85%; }
html[data-landscape="steinkrallengebirge"] { --landscape-image: url("/landscape-steinkrallengebirge.webp?v=3cfe1fa3d3a4"); --landscape-image-small: url("/landscape-steinkrallengebirge-small.webp?v=42f3f1d6d4b1"); --landscape-shade: 0.22; --landscape-position: 50%; --landscape-position-mobile: 15%; }
/* Decorative scenery. Content surfaces stay dark and still for easy reading. */
html[data-landscape] { background: #111618; }
html[data-landscape] body { isolation: isolate; min-height: 100vh; }
html[data-landscape] body::before {
  content: ''; position: fixed; inset: 0; width: 100%; height: 100vh;
  height: 100lvh; z-index: -1; pointer-events: none;
  background-color: #111618;
  background-image: linear-gradient(rgb(17 22 24 / var(--landscape-shade, .12)), rgb(17 22 24 / var(--landscape-shade, .12))), var(--landscape-image);
  background-size: cover; background-repeat: no-repeat;
  background-position: var(--landscape-position, 50%) center;
}
html[data-landscape] main.shell {
  width: min(1252px, calc(100% - 32px)); padding-inline: 26px;
  margin-block: 24px 48px; background: rgb(17 22 24 / .86);
  border: 1px solid #ffffff14; border-radius: 18px;
  box-shadow: 0 18px 70px #0004;
  overflow-wrap: anywhere;
}
html[data-landscape] .site-header { background: rgb(17 22 24 / .97); }
html[data-landscape] .site-footer { background: rgb(17 22 24 / .96); }
html[data-landscape] .new-hero-copy,
html[data-landscape] .new-hero-art { min-width: 0; }
html[data-landscape] main h1 { overflow-wrap: anywhere; }
html[data-landscape] .new-hero-copy .eyebrow { overflow-wrap: anywhere; }
@media (max-width: 760px) {
  html[data-landscape] main.shell {
    width: calc(100% - 24px); padding-inline: 16px;
    margin-block: 16px 28px; border-radius: 13px;
  }
  html[data-landscape] body::before {
    background-image: linear-gradient(rgb(17 22 24 / var(--landscape-shade, .12)), rgb(17 22 24 / var(--landscape-shade, .12))), var(--landscape-image-small);
    background-position: var(--landscape-position-mobile, 50%) center;
  }
}
@media (forced-colors: active), print {
  html[data-landscape] body::before { display: none; }
  html[data-landscape] main.shell {
    background: transparent; border: 0; border-radius: 0; box-shadow: none;
    width: 100%; margin: 0; padding: 0;
  }
}