/* FurLux 27 – Landingpage
   Alle Maße innerhalb der Bühne sind in cqw (Prozent der Kartenbreite),
   damit das Layout bei jeder Breite proportional zum Mockup bleibt. */

:root {
  --lavender: #cbc3f8;
  --purple: #7f22cf;
  --yellow: #f7bd14;
  --ink: #111;
  --white: #fff;
  --font: "Gill Sans Nova", "Gill Sans", "Gill Sans MT", "Cabin", "Segoe UI", sans-serif;
}

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

html, body { margin: 0; }

body {
  background: var(--lavender);
  color: var(--ink);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }

.page {
  overflow-x: clip;
  min-height: 100vh;
  padding: 38px 16px 110px;
}

/* ---------- Bühne: Desktop (Mockup 1) ---------- */

/* Breite lässt links/rechts Platz für die Doodles (~17cqw je Seite) */
.stage {
  width: min(1040px, calc((100vw - 32px) / 1.34));
  margin: 0 auto;
  container-type: inline-size;
}

.top {
  position: relative;
  display: flex;
  align-items: flex-end;
  margin-bottom: 0.95cqw;
}

.logo { width: 28.4cqw; }
.logo img { width: 100%; }

.card {
  position: relative;
  display: grid;
  grid-template-columns: 50.67% 49.33%;
  height: 61.7cqw;
}

.yellow {
  position: absolute;
  z-index: 0;
  left: -2.3cqw;
  top: 9.3cqw;
  bottom: -2.9cqw;
  width: 33.5cqw;
  background: var(--yellow);
}

.panel {
  position: relative;
  z-index: 1;
  background: var(--white);
}

.photo {
  position: relative;
  z-index: 1;
  margin: 0;
  overflow: hidden;
}

/* Ausschnitt wie im Mockup: leicht herangezoomt auf Kopf und Pfoten */
.photo img {
  position: absolute;
  width: 125%;
  max-width: none;
  left: -5.7%;
  top: -20.2%;
}

/* Fotocredit gehört zum Titelbild und erscheint nur auf der Hauptseite */
.credit { transition: opacity 0.4s ease; }
.subpage .credit { opacity: 0; visibility: hidden; }

/* Boop: Comic-Schriftzug beim Klick auf die Nase */
.leaf-front .photo.on-nose { cursor: pointer; }

.boop {
  position: absolute;
  z-index: 2;
  margin: 0;
  font-family: "Bangers", "Impact", sans-serif;
  font-size: 9cqw;
  line-height: 1;
  letter-spacing: 0.04em;
  color: var(--yellow);
  -webkit-text-stroke: 0.7cqw var(--ink);
  paint-order: stroke fill;
  text-shadow: 0.5cqw 0.5cqw 0 var(--purple);
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
  translate: -50% -50%;
  animation: boop 0.9s cubic-bezier(0.2, 0.9, 0.3, 1.2) forwards;
}

@keyframes boop {
  0%   { opacity: 0; transform: translateY(0) rotate(var(--tilt)) scale(0.2); }
  25%  { opacity: 1; transform: translateY(-1cqw) rotate(var(--tilt)) scale(1.25); }
  45%  { opacity: 1; transform: translateY(-2cqw) rotate(var(--tilt)) scale(1); }
  100% { opacity: 0; transform: translateY(-7cqw) rotate(var(--tilt)) scale(1.05); }
}

@media (prefers-reduced-motion: reduce) {
  .boop { animation-name: boop-reduced; animation-duration: 0.9s; }
  @keyframes boop-reduced { 0%, 70% { opacity: 1; transform: rotate(var(--tilt)); } 100% { opacity: 0; transform: rotate(var(--tilt)); } }
}

.arrow path {
  fill: none;
  stroke: var(--ink);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2.8;
}

/* Navigation */
.nav {
  position: absolute;
  left: 3.5cqw;
  top: 2.85cqw;
  display: flex;
  gap: 1.25cqw;
  font-size: 1.5cqw;
  letter-spacing: 0.01em;
  line-height: 1;
}

.nav a {
  padding-bottom: 2px;
  border-bottom: 1.5px solid transparent;
  transition: border-color 0.15s;
}

.nav a:hover,
.nav a:focus-visible { border-bottom-color: var(--purple); }

/* Untermenü (FURLUX → Winter Valhalla) */
.nav { z-index: 5; }
.nav-item { position: relative; }

.subnav {
  position: absolute;
  left: -0.6em;
  top: 100%;
  margin: 0;
  padding: 0.7em 0 0;
  list-style: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.15s, visibility 0.15s;
}

.subnav li {
  padding: 0.55em 0.8em;
  background: var(--white);
  border-left: 0.2em solid var(--purple);
  box-shadow: 0.25em 0.35em 0 var(--yellow);
  white-space: nowrap;
}

/* Events zu Valhalla: eingerückt unter dem Valhalla-Eintrag */
.subnav li.sub {
  margin-left: 1.2em;
  padding-top: 0.35em;
  padding-bottom: 0.35em;
  border-left-color: var(--yellow);
  box-shadow: 0.25em 0.35em 0 var(--purple);
  font-size: 0.9em;
}

.nav-item:hover .subnav,
.nav-item:focus-within .subnav,
.nav-item.open .subnav { opacity: 1; visibility: visible; }

/* Vertikaler Titel */
.title {
  position: absolute;
  left: 3.2cqw;
  top: 13.8cqw;
  height: 34cqw;
  margin: 0;
}

.title img { height: 100%; width: auto; max-width: none; }

/* Merch-Foto */
.merch {
  position: absolute;
  left: 15.75cqw;
  top: 13.15cqw;
  width: 27.5cqw;
  height: 35.4cqw;
  object-fit: cover;
  filter: grayscale(1);
}

/* Fresh News */
.news {
  position: absolute;
  left: 10.5cqw;
  top: 53.3cqw;
  width: 25.2cqw;
}

.news-script { width: 100%; }

.news-sub {
  position: absolute;
  left: 22.6%;
  top: 56%;
  font-size: 1.2cqw;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

.news-arrow {
  position: absolute;
  left: 41.3cqw;
  top: 53.6cqw;
  width: 2.8cqw;
}

.arrow { display: block; width: 100%; }

.news:hover .news-sub,
.news-arrow:hover { opacity: 0.6; }

/* Doodles – ragen links und rechts über die Karte hinaus */
.doodle {
  position: absolute;
  z-index: 2;
  pointer-events: none;
}

.owo-1 { left: 100.5cqw; top: 3cqw; width: 17cqw; }
.owo-2 { left: 103cqw; top: 18cqw; width: 9cqw; transform: rotate(8deg); }
.xwx-1 { left: -13cqw; top: 36cqw; width: 13cqw; transform: rotate(10deg); opacity: 0.85; }
.xwx-2 { left: -18.5cqw; top: 47cqw; width: 16cqw; transform: rotate(-22deg); opacity: 0.85; }

/* Bildnachweis */
.foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 3.6cqw; /* Platz unter dem gelben Balken, der unten über die Karte hinausragt */
}

.impressum {
  position: relative;
  z-index: 4;
  padding: 0.8cqw 1.8cqw;
  background: var(--yellow);
  font-size: 1.4cqw;
  letter-spacing: 0.02em;
  line-height: 1;
  transition: background-color 0.15s, color 0.15s;
}

.impressum:hover,
.impressum:focus-visible { background: var(--purple); color: var(--white); }

.credit { width: 19.9cqw; }

/* ---------- Umblättern: Startseite -> News ---------- */

.card { perspective: 2400px; }

/* Blatt liegt auf der rechten Kartenhälfte und klappt an der Mittelnaht nach links */
.leaf {
  position: absolute;
  z-index: 3;
  left: 50.67%;
  top: 0;
  bottom: 0;
  width: 49.33%;
  transform-origin: left center;
  transform-style: preserve-3d;
  transition: transform 0.95s cubic-bezier(0.55, 0.05, 0.25, 1);
}

.is-news .leaf { transform: rotateY(-180deg); }

.leaf-face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  background: var(--white);
}

.leaf-back { transform: rotateY(180deg); }

.leaf .photo {
  position: absolute;
  inset: 0;
  z-index: auto;
}

/* Schatten, der beim Drehen über das Blatt wandert */
.leaf-face::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.95s ease;
}

.leaf-front::after {
  background: linear-gradient(to right, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0) 70%);
}

.leaf-back::after {
  background: linear-gradient(to left, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0) 70%);
  opacity: 0.5;
}

.is-news .leaf-front::after { opacity: 0.5; }
.is-news .leaf-back::after { opacity: 0; }

/* Rückseite = linke News-Seite */
.news-title {
  position: absolute;
  left: 10.5cqw;
  top: 14cqw;
  width: 25.2cqw;
  margin: 0;
  outline: none;
}

.news-title img { width: 100%; }

.news-back {
  position: absolute;
  left: 10.5cqw;
  top: 53.3cqw;
  font-size: 1.2cqw;
  letter-spacing: 0.01em;
  border-bottom: 1.5px solid transparent;
  transition: border-color 0.15s;
}

.news-back:hover,
.news-back:focus-visible { border-bottom-color: var(--purple); }

/* Rechte News-Seite (liegt unter dem Blatt) */
.news-page {
  position: relative;
  z-index: 1;
  grid-column: 2;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 3.2cqw;
  padding: 4cqw 5cqw;
  background: var(--white);
  box-shadow: inset 2.5cqw 0 3cqw -2cqw rgba(0, 0, 0, 0.25);
}

.entry {
  padding-left: 1.6cqw;
  border-left: 0.35cqw solid var(--purple);
}

.entry p {
  margin: 0;
  font-size: 1.35cqw;
  line-height: 1.45;
}

.entry-date {
  display: block;
  margin-bottom: 0.6cqw;
  font-size: 1.1cqw;
  letter-spacing: 0.04em;
  color: var(--purple);
}

.entry-title {
  margin: 0 0 0.7cqw;
  font-size: 2.1cqw;
  font-weight: 500;
  line-height: 1.15;
}

/* ---------- Team-Seite ---------- */

.team-page {
  position: relative;
  z-index: 1;
  grid-column: 2;
  grid-row: 1;
  display: none;
  flex-direction: column;
  justify-content: center;
  padding: 3cqw 5cqw;
  background: var(--white);
  box-shadow: inset 2.5cqw 0 3cqw -2cqw rgba(0, 0, 0, 0.25);
}

.is-team .team-page { display: flex; }
.is-team .news-page,
.is-team .news-title,
.is-valhalla .news-page,
.is-valhalla .news-title,
.is-dance .news-page,
.is-dance .news-title,
.is-catwalk .news-page,
.is-catwalk .news-title { display: none; }

.team-title {
  display: none;
  position: absolute;
  left: 10.5cqw;
  top: 14cqw;
  margin: 0;
  font-size: 7cqw;
  font-weight: 500;
  line-height: 1;
  outline: none;
}

.is-team .team-title { display: block; }

/* Linke Seite (Rückseite des Blatts): Bilder bzw. Team-Avatare */
.valhalla-side,
.dance-side,
.catwalk-side {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 9cqw 5cqw 5cqw;
}

.is-valhalla .valhalla-side,
.is-dance .dance-side,
.is-catwalk .catwalk-side { display: flex; }

/* Verspielt verteilt: zwei versetzte Spalten, leicht gedrehte Karten, wechselnde Formen/Farben */
.members {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.6cqw 2cqw;
  margin: 0;
  padding: 0;
  list-style: none;
}

.member {
  --rot: 0deg;
  --dx: 0cqw;
  --dy: 0cqw;
  --bg: var(--lavender);
  --shape: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5cqw;
  text-align: center;
  transform: translate(var(--dx), var(--dy)) rotate(var(--rot));
  transition: transform 0.25s ease;
}

.member:hover { transform: translate(var(--dx), var(--dy)) rotate(0deg) scale(1.06); }

.member:nth-child(1) { --rot: -4deg; --dx: -1cqw; }
.member:nth-child(2) { --rot: 3deg; --dy: 3cqw; --bg: var(--yellow); --shape: 38% 62% 55% 45% / 50% 40% 60% 50%; }
.member:nth-child(3) { --rot: 2deg; --dx: 2cqw; --dy: -0.5cqw; --shape: 30%; }
.member:nth-child(4) { --rot: -3deg; --dy: 2.5cqw; --dx: -1cqw; --bg: var(--purple); }
.member:nth-child(5) { --rot: -2deg; --dx: -0.5cqw; --bg: var(--yellow); --shape: 45% 55% 40% 60% / 55% 45% 55% 45%; }
.member:nth-child(6) { --rot: 4deg; --dy: 3cqw; --dx: 1cqw; --shape: 30%; }
.member:nth-child(7) { --rot: 3deg; --dx: 1.5cqw; --dy: 0.5cqw; --bg: var(--purple); --shape: 40% 60% 50% 50% / 60% 40% 60% 40%; }
.member:nth-child(8) { --rot: -3deg; --dy: 3cqw; --dx: -1.5cqw; }

.avatar {
  width: 6.6cqw;
  height: 6.6cqw;
  border-radius: var(--shape);
  background: var(--bg);
  overflow: hidden;
}

.avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.member-name {
  font-size: 1.8cqw;
  line-height: 1.1;
}

.member-role {
  margin-top: -0.2cqw;
  font-size: 1.05cqw;
  letter-spacing: 0.02em;
  padding: 0.3cqw 0.9cqw;
  border-radius: 1cqw;
  border: 1.5px solid var(--ink);
  background: var(--white);
  white-space: nowrap;
}

/* ---------- Winter-Valhalla-Seite ---------- */

.valhalla-page,
.dance-page,
.catwalk-page {
  position: relative;
  z-index: 1;
  grid-column: 2;
  grid-row: 1;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.6cqw;
  padding: 3cqw 5cqw;
  background: var(--white);
  box-shadow: inset 2.5cqw 0 3cqw -2cqw rgba(0, 0, 0, 0.25);
}

.is-valhalla .valhalla-page,
.is-dance .dance-page,
.is-catwalk .catwalk-page { display: flex; }

.valhalla-poster {
  width: 32cqw;
  height: auto;
  transform: rotate(2deg);
  box-shadow: 1cqw 1cqw 0 var(--yellow), 1.9cqw 1.9cqw 0 var(--purple);
}

.valhalla-page .entry,
.dance-page .entry,
.catwalk-page .entry { align-self: stretch; }

.valhalla-title,
.dance-title,
.catwalk-title {
  display: none;
  align-self: stretch;
  margin: 0 0 1.6cqw;
  font-size: 6cqw;
  font-weight: 500;
  line-height: 1;
  outline: none;
}

.valhalla-title span,
.dance-title span,
.catwalk-title span {
  display: block;
  margin-bottom: 0.4cqw;
  font-size: 0.5em;
  letter-spacing: 0.12em;
  color: var(--purple);
}

.is-valhalla .valhalla-title,
.is-dance .dance-title,
.is-catwalk .catwalk-title { display: block; }

.dance-title,
.catwalk-title { font-size: 5cqw; }

/* Teaser auf der Startseite */
.valhalla-promo {
  position: absolute;
  left: 15.75cqw;
  top: 5.3cqw;
  width: 27.5cqw;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 1.1cqw;
  padding: 0.8cqw 1.4cqw 0.8cqw 0.8cqw;
  background: var(--purple);
  color: var(--white);
  border: 0.3cqw solid var(--yellow);
  transform: rotate(-1.5deg);
  transition: transform 0.2s ease, opacity 0.4s ease, visibility 0.4s;
}

/* Auf Unterseiten ausblenden, sonst ragt der Teaser mobil oberhalb des umgeklappten Blatts heraus */
.subpage .valhalla-promo { opacity: 0; visibility: hidden; }

.valhalla-promo:hover,
.valhalla-promo:focus-visible { transform: rotate(0deg) scale(1.03); }

.valhalla-promo img {
  width: 4.6cqw;
  height: 6.1cqw;
  object-fit: cover;
  object-position: top;
}

.valhalla-promo-text {
  display: flex;
  flex-direction: column;
  gap: 0.25cqw;
  line-height: 1;
  white-space: nowrap;
}

.valhalla-promo-kicker {
  align-self: flex-start;
  padding: 0.2cqw 0.6cqw;
  background: var(--yellow);
  color: var(--ink);
  font-size: 0.95cqw;
  letter-spacing: 0.08em;
}

.valhalla-promo-name { font-size: 2.1cqw; letter-spacing: 0.03em; }
.valhalla-promo-date { font-size: 1.3cqw; color: var(--lavender); }

/* Wechsel zwischen den Unterseiten: eigenes Blatt (alte rechte Seite -> neue linke Seite) klappt um */
.leaf.swap-leaf { z-index: 4; transform: rotateY(0deg); }
.leaf.swap-leaf.go { transform: rotateY(-180deg); }

.swap-ghost { z-index: 3; transition: none; }

.swap-leaf .leaf-front > section {
  position: absolute;
  inset: 0;
  display: flex;
  box-shadow: none;
}

.swap-leaf .leaf-face::after { opacity: 0; }
.swap-leaf .leaf-back::after { opacity: 0.5; }
.swap-leaf.go .leaf-front::after { opacity: 0.5; }
.swap-leaf.go .leaf-back::after { opacity: 0; }

.swap .leaf:not(.swap-ghost):not(.swap-leaf) .news-title,
.swap .leaf:not(.swap-ghost):not(.swap-leaf) .team-title,
.swap .leaf:not(.swap-ghost):not(.swap-leaf) .valhalla-side,
.swap .leaf:not(.swap-ghost):not(.swap-leaf) .dance-side,
.swap .leaf:not(.swap-ghost):not(.swap-leaf) .catwalk-side { visibility: hidden; }

.no-anim .leaf,
.no-anim .leaf-face::after { transition: none; }

@media (prefers-reduced-motion: reduce) {
  .leaf,
  .leaf-face::after { transition: none; }
}

/* ---------- Hochformat / Tablet (Mockup 2) ---------- */

@media (max-width: 960px) {
  .page { padding: 72px 16px 40px; }

  .stage { width: min(470px, 100%); }

  .top { margin-bottom: 1.9cqw; }

  .logo { width: 58.3cqw; }

  .card {
    grid-template-columns: 1fr;
    grid-template-rows: 121.7cqw 101.6cqw;
    row-gap: 1.9cqw;
    height: auto;
  }

  .yellow {
    left: -4.1cqw;
    top: 28.7cqw;
    bottom: auto;
    width: 59cqw;
    height: 95cqw;
  }

  .nav {
    left: 10.3cqw;
    top: 5.5cqw;
    gap: 2.4cqw;
    font-size: 2.95cqw;
  }

  .title { left: 9.6cqw; top: 22cqw; height: 75.9cqw; }

  .merch {
    left: 37.7cqw;
    top: 30.6cqw;
    width: 48.8cqw;
    height: 63.1cqw;
  }

  .news { left: 27cqw; top: 106.5cqw; width: 44.8cqw; }
  .news-sub { font-size: 2.2cqw; }

  .news-arrow { left: 81.8cqw; top: 107.5cqw; width: 4.6cqw; }

  .photo img { width: 105%; left: -1.5%; top: -20.5%; }

  .owo-1 { left: 100.5cqw; top: 9.5cqw; width: 49cqw; }
  .owo-2 { left: 104.5cqw; top: 46cqw; width: 25cqw; transform: rotate(8deg); }
  .xwx-1 { left: -38.5cqw; top: 112cqw; width: 35.5cqw; transform: rotate(10deg); opacity: 0.85; }
  .xwx-2 { left: -61cqw; top: 143cqw; width: 46cqw; transform: rotate(-22deg); opacity: 0.85; }

  .foot { margin-top: 0.8cqw; }
  .impressum { font-size: 3cqw; padding: 2cqw 4cqw; }
  .credit { width: 31cqw; }

  /* Mobil: untere Hälfte klappt an der Oberkante nach oben (Kalender) */
  .leaf {
    left: 0;
    top: 123.6cqw;
    bottom: auto;
    width: 100%;
    height: 101.6cqw;
    transform-origin: center top;
  }

  .is-news .leaf { transform: rotateX(180deg); }
  .leaf.swap-leaf { transform: rotateX(0deg); }
  .leaf.swap-leaf.go { transform: rotateX(180deg); }

  .leaf-back { transform: rotateX(180deg); }

  .leaf-front::after {
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0) 70%);
  }

  .leaf-back::after {
    background: linear-gradient(to top, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0) 70%);
  }

  .swap-leaf .leaf-back::after { opacity: 0.5; }

  /* Navigation der Startseite bleibt oben sichtbar */
  .leaf-back .nav { display: none; }

  .news-title { left: 10cqw; top: 8cqw; width: 44.8cqw; }
  .news-back { left: 10cqw; top: 84cqw; font-size: 2.2cqw; }

  .news-page {
    grid-column: 1;
    grid-row: 2;
    gap: 5cqw;
    padding: 7cqw 10cqw;
    box-shadow: inset 0 2.5cqw 3cqw -2cqw rgba(0, 0, 0, 0.25);
  }

  .team-page {
    grid-column: 1;
    grid-row: 2;
    padding: 5cqw 8cqw;
    box-shadow: inset 0 2.5cqw 3cqw -2cqw rgba(0, 0, 0, 0.25);
  }

  .team-title { left: 10cqw; top: 8cqw; font-size: 12cqw; }

  .valhalla-side,
  .dance-side,
  .catwalk-side { padding: 5cqw 8cqw 4cqw; }

  .valhalla-page,
  .dance-page,
  .catwalk-page {
    grid-column: 1;
    grid-row: 2;
    gap: 4cqw;
    padding: 5cqw 8cqw;
    box-shadow: inset 0 2.5cqw 3cqw -2cqw rgba(0, 0, 0, 0.25);
  }

  .valhalla-title { font-size: 11cqw; }
  .dance-title,
  .catwalk-title { font-size: 9cqw; }

  .valhalla-poster { width: 58cqw; box-shadow: 1.6cqw 1.6cqw 0 var(--yellow), 3cqw 3cqw 0 var(--purple); }

  .valhalla-promo { left: 37.7cqw; top: 11.5cqw; width: 48.8cqw; gap: 2cqw; padding: 1.4cqw 2.6cqw 1.4cqw 1.4cqw; border-width: 0.6cqw; }
  .valhalla-promo img { width: 10cqw; height: 13.3cqw; }
  .valhalla-promo-kicker { font-size: 2cqw; padding: 0.4cqw 1.2cqw; }
  .valhalla-promo-name { font-size: 3.4cqw; }
  .valhalla-promo-date { font-size: 2.3cqw; }

  .members { gap: 1cqw 4cqw; }
  .member { gap: 1cqw; }
  .avatar { width: 12cqw; height: 12cqw; }
  .member-name { font-size: 3.8cqw; }
  .member-role { font-size: 2.2cqw; padding: 0.6cqw 1.8cqw; border-radius: 2cqw; }

  .entry { padding-left: 3cqw; border-left-width: 0.7cqw; }
  .entry p { font-size: 3cqw; }
  .entry-date { font-size: 2.4cqw; margin-bottom: 1cqw; }
  .entry-title { font-size: 4.4cqw; margin-bottom: 1.2cqw; }
}

/* Sehr schmale Screens: Doodles verkleinern, Navigation lesbar halten */
@media (max-width: 520px) {
  .page { padding-top: 48px; }

  .stage { width: calc(100% - 24px); }

  .owo-1 { left: 88cqw; width: 26cqw; }
  .owo-2 { left: 92cqw; top: 36cqw; width: 14cqw; }
  .xwx-1 { left: -14cqw; width: 20cqw; }
  .xwx-2 { left: -16cqw; width: 22cqw; }

  .credit { width: 40cqw; }
  .impressum { font-size: 3.4cqw; }
}

/* ---------- Sprachumschalter ---------- */
.lang {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 5;
  display: flex;
  gap: 0.8cqw;
}

.lang-btn {
  width: 3.6cqw;
  min-width: 34px;
  aspect-ratio: 5 / 3;
  padding: 0;
  border: 2px solid var(--ink);
  background: none;
  cursor: pointer;
  opacity: 0.55;
  transition: opacity 0.15s, transform 0.15s, box-shadow 0.15s;
}

.lang-btn svg { display: block; width: 100%; height: 100%; }
.lang-btn:hover,
.lang-btn:focus-visible { opacity: 1; transform: translateY(-2px) rotate(-3deg); }
.lang-btn[aria-pressed="true"] { opacity: 1; box-shadow: 0 0 0 2px var(--yellow), 0 0 0 4px var(--purple); }