/* Shared polish for the German evening and English day marketing pages. */
.course {
  box-sizing: border-box;
  isolation: isolate;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background-clip: padding-box;
}
.course::after { z-index: 0; pointer-events: none; }

/* Keep every component of the breathing pacer perfectly square and circular. */
.pacer { min-height: 0; max-width: 360px; border-radius: 50%; }
.pacer-track { display: block; aspect-ratio: 1 / 1; }
.pacer-orb { display: block; border-radius: 50%; overflow: hidden; }
.pacer-orb canvas { display: block; aspect-ratio: 1 / 1; border-radius: inherit; }

/* The official artwork remains the link, but the surrounding action is unmistakable. */
.badge-official {
  position: relative;
  min-height: 72px;
  min-width: 180px;
  padding: 0.34rem 0.72rem 0.45rem;
  border: 1px solid rgba(255, 255, 255, 0.46);
  border-radius: 14px;
  background: rgba(10, 10, 24, 0.38);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
  cursor: pointer;
}
.badge-official::before {
  display: block;
  margin: 0 0 0.16rem;
  font-size: 0.57rem;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-align: center;
  color: #fff;
  content: 'ANDROID APP HERUNTERLADEN';
}
html[lang="en"] .badge-official::before { content: 'DOWNLOAD THE ANDROID APP'; }
.badge-official:hover, .badge-official:focus-visible {
  transform: translateY(-3px);
  background: rgba(255, 255, 255, 0.15);
  border-color: #fff;
}
.badge-official:focus-visible { outline: 3px solid rgba(255, 255, 255, 0.8); outline-offset: 3px; }
.badge-official img { height: 48px; margin: 0 auto; }

@media (max-width: 520px) {
  .course { min-height: 152px; }
  .pacer { width: min(100%, 320px); }
  .badge-official { width: min(100%, 260px); }
}