/**
 * Front page colours, taken from the other pages: dusk sky behind the page,
 * dark disc inside the round logo, lime links.
 */
body.path-frontpage {
  background: linear-gradient(var(--kj-night), #0088aa) fixed;
}

/* The disc lies under the logo's outer ring, whose inner edge is irregular. */
.path-frontpage .panda img {
  background: radial-gradient(circle closest-side, var(--kj-night) 94%, transparent 94%);
}

.path-frontpage .content a,
.path-frontpage .content a:visited { color: var(--kj-lime); }
.path-frontpage .content a:hover { color: var(--kj-moon); }

/* One layout for all widths: the logo lies in the middle like a record, the
   links circle around it, the subtitles and the claim follow below. Everything
   scales with the width of .front-content (cqw units). */
.path-frontpage .logo { display: block; float: none !important; }
.path-frontpage .logo img { display: block; margin-left: auto; margin-right: auto; max-width: 100%; }

.path-frontpage .front-content {
  aspect-ratio: 360 / 620;
  clear: both;
  container-type: inline-size;
  margin: 18px auto 0;
  max-width: 760px;
  position: relative;
  width: 100%;
}
.path-frontpage .front-content > div { position: static; }
.path-frontpage .panda {
  left: 50%;
  position: absolute;
  top: 34.7%;
  transform: translate(-50%, -50%);
  width: 42%;
}

/* The six links of the first column; the second set is not needed. */
.path-frontpage .front-content > :last-child { display: block !important; }
.path-frontpage .front-content > :last-child .kategorie_login_mobile,
.path-frontpage .front-content > :last-child .kategorie_fotos { display: none !important; }
.path-frontpage .front-content > :first-child .kategorie_wissen,
.path-frontpage .front-content > :first-child .kategorie_awareness,
.path-frontpage .front-content > :first-child .kategorie_fotos,
.path-frontpage .front-content > :first-child .kategorie_login_mobile {
  align-items: center;
  display: flex !important;
  flex-direction: column;
  margin: 0;
  padding: 0;
  position: absolute;
  transform: translate(-50%, -50%);
  width: 32%;
}
.path-frontpage .front-content > :first-child .kategorie_wissen { left: 84%; top: 21%; }
.path-frontpage .front-content > :first-child .kategorie_awareness { left: 84%; top: 49.5%; }
.path-frontpage .front-content > :first-child .kategorie_fotos { left: 50%; top: 61.2%; }
.path-frontpage .front-content > :first-child .kategorie_login_mobile:has(a[href='/user/register']) { left: 16%; top: 49.5%; }
.path-frontpage .front-content > :first-child .kategorie_login_mobile:has(a[href='/newsletter']) { left: 16%; top: 21%; }

/* This block also holds two subtitles, so its parts are placed one by one. */
.path-frontpage .front-content > :first-child .kategorie_bereich { display: block; margin: 0; padding: 0; position: static; }
.path-frontpage .kategorie_bereich .kategorie_image { left: 50%; position: absolute; top: 2.9%; transform: translateX(-50%); }
.path-frontpage .front-content .kategorie_bereich .kat_schrift_links { left: 50%; position: absolute; top: 12.7%; transform: translateX(-50%); }

.path-frontpage .front-content .kategorie_image { float: none; margin: 0; width: 17.5cqw; }
.path-frontpage .front-content .kategorie_image img { height: auto; width: 100%; }
.path-frontpage .front-content .kat_schrift_links { display: block; line-height: 1; margin: 3px 0 0; padding: 0; white-space: nowrap; width: auto; }
.path-frontpage .front-content .kat_titel { font-size: 4.9cqw; }

.path-frontpage .front-content .kat_subtitle,
.path-frontpage .front-content .kat_subtitle_kunst,
.path-frontpage .front-content .kat_subtitle_essen {
  color: var(--kj-moon);
  display: block !important;
  font-size: 4cqw;
  line-height: 1.25;
  padding: 0;
  position: absolute;
  text-align: center;
  transform: translate(-50%, -50%);
  white-space: nowrap;
}
.path-frontpage .front-content .kategorie_bereich .kat_subtitle { left: 27%; top: 73.9%; }
.path-frontpage .front-content .kategorie_bereich .kat_subtitle_kunst { left: 73%; top: 73.9%; }
.path-frontpage .front-content .tanzen { left: 27%; top: 81.9%; }
.path-frontpage .front-content .kat_subtitle_essen { left: 73%; top: 81.9%; }

.path-frontpage .content .front-content::before,
.path-frontpage .content .front-content::after {
  display: block;
  font-family: 'Klingtjut', ubuntu, sans-serif;
  left: 0;
  line-height: 1;
  position: absolute;
  right: 0;
  text-align: center;
}
.path-frontpage .content .front-content::before {
  color: var(--kj-moon);
  content: 'Du bist das Festival';
  font-size: 9cqw;
  top: 87.1%;
}
.path-frontpage .content .front-content::after {
  color: var(--kj-lime);
  content: '26.-29.08 2027';
  font-size: 7.4cqw;
  top: 93.9%;
}

/* Wide screens: same circle spread sideways, the texts sit in one row. */
@media (min-width: 1001px) {
  .path-frontpage .front-content { aspect-ratio: 1000 / 960; margin-top: 50px; max-width: 1000px; }
  .path-frontpage .panda { top: 34.38%; width: 27%; }
  .path-frontpage .front-content .kategorie_image { width: 11cqw; }
  .path-frontpage .front-content .kat_titel { font-size: 3.4cqw; }

  .path-frontpage .kategorie_bereich .kategorie_image { top: 0; }
  .path-frontpage .front-content .kategorie_bereich .kat_schrift_links { top: 10.73%; }
  .path-frontpage .front-content > :first-child .kategorie_wissen { left: 80%; top: 21.88%; }
  .path-frontpage .front-content > :first-child .kategorie_awareness { left: 80%; top: 46.88%; }
  .path-frontpage .front-content > :first-child .kategorie_fotos { top: 60.94%; }
  .path-frontpage .front-content > :first-child .kategorie_login_mobile:has(a[href='/user/register']) { left: 20%; top: 46.88%; }
  .path-frontpage .front-content > :first-child .kategorie_login_mobile:has(a[href='/newsletter']) { left: 20%; top: 21.88%; }

  .path-frontpage .front-content .kat_subtitle,
  .path-frontpage .front-content .kat_subtitle_kunst,
  .path-frontpage .front-content .kat_subtitle_essen { font-size: 2.2cqw; }
  .path-frontpage .front-content .kategorie_bereich .kat_subtitle { left: 12.5%; top: 76.04%; }
  .path-frontpage .front-content .kategorie_bereich .kat_subtitle_kunst { left: 37.5%; top: 76.04%; }
  .path-frontpage .front-content .tanzen { left: 62.5%; top: 76.04%; }
  .path-frontpage .front-content .kat_subtitle_essen { left: 87.5%; top: 76.04%; }

  .path-frontpage .content .front-content::before { font-size: 6cqw; top: 83.23%; }
  .path-frontpage .content .front-content::after { font-size: 4.6cqw; top: 93.02%; }
}