@font-face { font-family: "Barlow Condensed"; src: url("assets/barlow-condensed-800.ttf") format("truetype"); font-style: normal; font-weight: 800; font-display: swap; }
:root { --spielraum-blue: #bde5ee; --spielraum-ink: #14333d; --spielraum-coral: #f47b62; }
.spielraum-world { isolation: isolate; background: var(--spielraum-blue); color: var(--spielraum-ink); }
.spielraum-hero { height: 100svh; min-height: 780px; display: flex; flex-direction: column; overflow: clip; }
.spielraum-header { position: relative; z-index: 5; flex: 0 0 96px; display: flex; align-items: center; justify-content: space-between; gap: 30px; padding: 20px 5%; color: #fff; background: var(--spielraum-ink); }
.spielraum-wordmark { display: inline-flex; align-items: baseline; gap: .2em; min-height: 44px; padding-block: 8px; font-size: 26px; font-weight: 750; letter-spacing: -.055em; text-decoration: none; }
.spielraum-wordmark span { font-weight: 400; }
.spielraum-nav { display: flex; align-items: center; gap: clamp(28px, 3vw, 58px); }
.spielraum-nav a { display: inline-flex; align-items: center; min-height: 44px; font-size: 15px; text-decoration: none; text-underline-offset: 7px; }
.spielraum-nav a:hover { text-decoration: underline; }
.spielraum-hero a:focus-visible { outline-color: var(--spielraum-coral); }
.spielraum-stage { position: relative; flex: 1; isolation: isolate; }
.spielraum-stage::before { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: radial-gradient(#14333d 0.65px, transparent .8px); background-size: 5px 5px; opacity: .065; }
.spielraum-person { position: absolute; bottom: 0; z-index: 2; pointer-events: none; }
.spielraum-person img { display: block; width: 100%; height: auto; }
.spielraum-woman { width: 45%; left: -12%; bottom: -27%; transform: rotate(7deg); }
.spielraum-man { width: 37%; right: -9%; bottom: -16%; transform: rotate(-6deg); }
.spielraum-paper { position: absolute; right: -8%; top: 7%; width: 29%; height: 118%; background: var(--spielraum-coral); transform: rotate(13deg); border-radius: 160px 0 0 0; }
.spielraum-accent { position: absolute; display: block; height: auto; pointer-events: none; }
.spielraum-weave { right: 20%; top: 3%; width: 13%; max-width: 240px; transform: rotate(9deg); }
.spielraum-pixels { left: 18%; top: 2%; width: 8%; max-width: 150px; transform: rotate(-8deg); }
.spielraum-steps { bottom: 5%; left: 31%; width: 12%; max-width: 220px; transform: rotate(-6deg); }
.spielraum-content { position: relative; z-index: 3; width: 62%; margin: 0 auto; padding-top: clamp(105px, 15vh, 170px); text-align: center; }
.spielraum-eyebrow { font-size: 11px; font-weight: 650; letter-spacing: .17em; text-transform: uppercase; margin: 0 0 26px; }
.spielraum-content h1 { margin: 0; font-family: "Barlow Condensed", Impact, sans-serif; font-size: clamp(80px, 8.7vw, 174px); font-weight: 800; line-height: .95; letter-spacing: -.025em; text-transform: uppercase; }
.spielraum-first { display: block; padding-right: 8%; white-space: nowrap; }
.spielraum-second { display: inline-block; position: relative; margin-top: 14px; margin-left: 7%; padding: 0 19px 10px; white-space: nowrap; transform: rotate(-2deg); }
.spielraum-second::before { content: ""; position: absolute; z-index: -1; inset: -1px -5px -2px; background: var(--spielraum-coral); clip-path: polygon(0 6%, 98% 0, 100% 87%, 2% 100%); }
.spielraum-intro { max-width: 405px; margin: 33px auto 0; font-size: 17px; line-height: 1.5; text-wrap: pretty; }
.spielraum-cta { display: inline-flex; align-items: center; justify-content: space-between; gap: 30px; min-height: 58px; margin-top: 26px; padding: 17px 24px; background: var(--spielraum-ink); color: #fff; box-shadow: 5px 5px 0 var(--spielraum-coral); text-decoration: none; font-size: 14px; font-weight: 600; transition: transform 180ms ease, box-shadow 180ms ease; }
.spielraum-cta:hover { transform: translate(3px, 3px); box-shadow: 2px 2px 0 var(--spielraum-coral); }
.spielraum-cta:active { transform: translate(5px, 5px); box-shadow: 0 0 0 var(--spielraum-coral); }
.spielraum-world > .pixel-cut { margin-top: -1px; background: var(--spielraum-blue); }
@media (min-width: 1800px) { .spielraum-content { padding-top: 13vh; } .spielraum-intro { max-width: 465px; font-size: 20px; } .spielraum-cta { font-size: 16px; } }
@media (min-width: 851px) and (max-width: 1150px) { .spielraum-content { width: 66%; padding-top: 115px; } .spielraum-content h1 { font-size: 8.8vw; } .spielraum-intro { max-width: 345px; font-size: 16px; } .spielraum-woman { width: 53%; left: -20%; bottom: -8%; } .spielraum-man { width: 44%; right: -15%; bottom: -6%; } }
@media (max-height: 800px) and (min-width: 1151px) { .spielraum-hero { min-height: 680px; } .spielraum-header { flex-basis: 82px; padding-block: 13px; } .spielraum-content { padding-top: 66px; } .spielraum-content h1 { font-size: 7.9vw; } .spielraum-eyebrow { margin-bottom: 19px; } .spielraum-intro { margin-top: 24px; } .spielraum-cta { margin-top: 21px; } }
@media (max-width: 850px) {
  .spielraum-hero { min-height: 940px; }
  .spielraum-header { flex-basis: 84px; padding: 15px 5%; gap: 22px; }
  .spielraum-wordmark { font-size: 23px; }
  .spielraum-nav { gap: 25px; }
  .spielraum-nav a { font-size: 13px; }
  .spielraum-content { width: 89%; padding-top: 56px; }
  .spielraum-content h1 { font-size: 12.5vw; }
  .spielraum-eyebrow { margin-bottom: 25px; }
  .spielraum-intro { max-width: 395px; margin-top: 26px; }
  .spielraum-woman { width: 59%; left: -9%; bottom: -24%; transform: rotate(5deg); }
  .spielraum-man { width: 49%; right: -5%; bottom: -14%; transform: rotate(-6deg); }
  .spielraum-paper { right: -16%; width: 50%; height: 55%; top: auto; bottom: -9%; border-radius: 120px 0 0 0; }
  .spielraum-weave { width: 20%; top: 51%; right: 9%; }
  .spielraum-pixels { width: 14%; top: 51%; left: 9%; }
  .spielraum-steps { left: 40%; bottom: 12%; width: 22%; }
}
@media (max-width: 600px) {
  .spielraum-hero { min-height: 820px; }
  .spielraum-header { flex-basis: 76px; padding: 12px 20px; gap: 16px; }
  .spielraum-wordmark { font-size: 19px; }
  .spielraum-nav { gap: 14px; }
  .spielraum-nav a { font-size: 11px; }
  .spielraum-content { width: calc(100% - 36px); padding-top: 45px; }
  .spielraum-content h1 { font-size: 13vw; line-height: 1; }
  .spielraum-eyebrow { font-size: 10px; margin-bottom: 24px; }
  .spielraum-first { padding-right: 5%; }
  .spielraum-second { margin-top: 9px; margin-left: 3%; padding: 0 8px 7px; }
  .spielraum-intro { max-width: 285px; font-size: 15px; margin-top: 25px; }
  .spielraum-cta { min-height: 53px; margin-top: 22px; padding: 14px 21px; font-size: 13px; }
  .spielraum-woman { width: 82%; left: -25%; bottom: -7%; }
  .spielraum-man { width: 65%; right: -13%; bottom: -3%; }
  .spielraum-paper { bottom: -13%; width: 58%; height: 52%; }
  .spielraum-weave { width: 26%; top: 57%; right: 31%; transform: rotate(9deg); }
  .spielraum-pixels { width: 16%; top: 51%; left: 5%; }
  .spielraum-steps { left: auto; right: 2%; bottom: auto; top: 51%; width: 25%; }
}
@media (max-width: 360px) { .spielraum-header { padding-inline: 15px; gap: 10px; } .spielraum-wordmark { font-size: 16px; } .spielraum-nav { gap: 12px; } .spielraum-nav a { font-size: 10px; } .spielraum-hero { min-height: 790px; } .spielraum-content { padding-top: 37px; } .spielraum-intro { max-width: 255px; } .spielraum-woman { bottom: 0; } .spielraum-man { bottom: 2%; } }
@media (prefers-reduced-motion: reduce) { .spielraum-cta { transition: none; } .spielraum-cta:hover, .spielraum-cta:active { transform: none; } }