/* ---------- Fonts (lokal) ---------- */
@font-face {
  font-family: "Aileron";
  src: url("../fonts/aileron-latin-400-normal.woff2") format("woff2"),
       url("../fonts/aileron-latin-400-normal.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Aileron";
  src: url("../fonts/aileron-latin-400-italic.woff2") format("woff2"),
       url("../fonts/aileron-latin-400-italic.woff") format("woff");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Boldonse";
  src: url("../fonts/boldonse-latin-400-normal.woff2") format("woff2"),
       url("../fonts/boldonse-latin-400-normal.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ---------- Tokens ----------
   --u = 1 Pixel der Vorlage (1920px breit, Rahmen 1753px breit),
   skaliert auf die aktuelle Inhaltsbreite. */
:root {
  --yellow: #f6ff00;
  --ink: #000;
  --blue-fill: rgba(67, 111, 255, .25);
  --white-fill: rgba(255, 255, 255, .24);
  --gutter: clamp(16px, 4.2vw, 80px);
  --content: min(100vw - 2 * var(--gutter), 992px);
  --u: calc(var(--content) / 1753);
  --line: max(1.5px, calc(var(--u) * 3.5));
  --radius: max(14px, calc(var(--u) * 56));
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: #e4dcc3;
  color: var(--ink);
  font-family: "Aileron", "Helvetica Neue", Arial, sans-serif;
  line-height: 1.35;
  overflow-x: hidden;
}

img, svg { display: block; max-width: 100%; height: auto; }

a { color: inherit; }

h2 { font: inherit; margin: 0; }

.page {
  min-height: 100vh;
  padding: 0 var(--gutter) max(32px, calc(var(--u) * 90));
  background: url("../img/hintergrund-1000.webp") center top / cover no-repeat;
}

main, .imprint {
  width: var(--content);
  margin-inline: auto;
}

/* ---------- PLAY GAME NOW ---------- */
.topbar {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: max(76px, calc(var(--u) * 231));
}

.play-now {
  font-family: "Boldonse", "Arial Black", sans-serif;
  font-size: max(18px, calc(var(--u) * 72));
  line-height: 1.6; /* Boldonse hat sehr hohe Ober-/Unterlängen */
  color: var(--yellow);
  text-decoration: none;
  white-space: nowrap;
  transition: transform .2s ease;
}
.play-now:hover,
.play-now:focus-visible { transform: scale(1.05); }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  z-index: 2;
}

.hero__box {
  position: relative;
  display: block;
  aspect-ratio: 1753 / 1842;
  border: var(--line) solid var(--yellow);
  border-radius: var(--radius);
  background: var(--blue-fill);
  color: var(--yellow);
}

.hero__title {
  position: absolute;
  left: 15.7%;
  top: 6.2%;
  width: 69.9%;
}

.hero__play {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transition: transform .25s ease;
  transform-origin: 48.8% 47%;
}
.hero__box:hover .hero__play,
.hero__box:focus-visible .hero__play { transform: scale(1.04); }

.deco {
  position: absolute;
  pointer-events: none;
  user-select: none;
}

.deco--vogel {
  left: calc(var(--u) * -21);
  top: calc(var(--u) * -227);
  width: calc(var(--u) * 413);
}
.deco--pflanze {
  left: calc(var(--u) * -21);
  top: calc(var(--u) * 1359);
  width: calc(var(--u) * 377);
}
.deco--flugsaurier {
  left: calc(var(--u) * 1361);
  top: calc(var(--u) * 1536);
  width: calc(var(--u) * 441);
}

/* ---------- Album ---------- */
.album {
  position: relative;
  z-index: 1;
  margin: max(20px, calc(var(--u) * 125)) 0 0;
  min-height: max(48px, calc(var(--u) * 139));
  display: flex;
  align-items: center;
  /* Platz rechts für den Flugsaurier, der über die Pille ragt */
  padding: 8px calc(var(--u) * 360) 8px 20px;
  border: var(--line) solid var(--yellow);
  border-radius: 999px;
  color: var(--yellow);
  font-style: italic;
  font-size: max(16px, calc(var(--u) * 48));
  line-height: 1.2;
}

/* ---------- Infotext ---------- */
.info {
  position: relative;
  z-index: 1;
  margin-top: max(28px, calc(var(--u) * 143));
  /* mobil: unten Platz für Kaktus & Figur reservieren */
  padding: 28px 18px calc(var(--u) * 780);
  border: var(--line) solid var(--yellow);
  border-radius: var(--radius);
  background: var(--white-fill);
  text-align: center;
  font-size: max(15px, calc(var(--u) * 32));
}

.info p { margin: 0; }

.info__text {
  font-size: max(16px, calc(var(--u) * 36));
  line-height: 1.3;
  max-width: 62em;
  margin-inline: auto;
}
.info__text + .info__text { margin-top: 1.3em; }

.links {
  list-style: none;
  margin: 2.6em 0 0;
  padding: 0;
  font-size: max(15px, calc(var(--u) * 30));
  line-height: 1.3;
  overflow-wrap: anywhere;
}
.links a,
.imprint a { text-decoration: none; }
.links a:hover,
.links a:focus-visible,
.imprint a:hover,
.imprint a:focus-visible { text-decoration: underline; }

.credits {
  margin-top: 2.4em;
  font-size: max(13px, calc(var(--u) * 24));
  line-height: 1.3;
  max-width: 52em;
  margin-inline: auto;
}

.logos {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: max(18px, calc(var(--u) * 62));
  margin-top: max(28px, calc(var(--u) * 96));
}
.logo--kalk { width: max(64px, calc(var(--u) * 143)); }
.logo--musikfonds { width: max(82px, calc(var(--u) * 181)); }

.deco--kaktus {
  left: calc(var(--u) * -24);
  bottom: calc(var(--u) * -28);
  width: calc(var(--u) * 673);
}
.deco--rot {
  left: calc(var(--u) * 1432);
  bottom: calc(var(--u) * -92);
  width: calc(var(--u) * 337);
}

/* ---------- Imprint ---------- */
.imprint {
  position: relative;
  z-index: 1;
  margin-top: max(56px, calc(var(--u) * 395));
  padding-inline: calc(var(--u) * 20);
  font-size: max(11px, calc(var(--u) * 24));
  line-height: 1.25;
}
.imprint p { margin: 0; }

/* ---------- ab Tablet/Desktop: Layout wie Vorlage ---------- */
@media (min-width: 900px) {
  .info {
    padding: calc(var(--u) * 90) calc(var(--u) * 40) calc(var(--u) * 130);
  }
  .album {
    justify-content: center;
    padding: 0 calc(var(--u) * 40);
  }
}

@media (min-width: 1000px) {
  .page { background-image: url("../img/hintergrund-1920.webp"); }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}