@font-face {
  font-family: "Cinzel";
  src: url("/assets/cinzel-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Cinzel";
  src: url("/assets/cinzel-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
:root { color-scheme: dark; }
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; background: #000; }
body {
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: max(4vh, env(safe-area-inset-top)) 16px max(4vh, env(safe-area-inset-bottom));
  color: #c9ad80;
  font-family: "Cinzel", "Trajan Pro", "Times New Roman", serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
.staub { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; }
main {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 760px;
  text-align: center;
  animation: auftritt 2.4s cubic-bezier(.2, .6, .2, 1) both;
}
h1 { margin: 0; font-weight: 500; }
.logo-buehne { display: block; width: min(86vw, 600px); margin: 0 auto; perspective: 1100px; }
.logo-kasten { display: block; position: relative; aspect-ratio: 676 / 520; transform-origin: 50% 55%; }
.logo-kasten picture { position: absolute; inset: 0; display: block; }
.logo { display: block; width: 100%; height: 100%; transition: opacity .9s ease; }
.logo-gl, .logo-funken { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; }
.logo-gl { opacity: 0; transition: opacity .9s ease; }
.logo-funken { mix-blend-mode: screen; }
.gl-bereit .logo-gl { opacity: 1; }
.gl-bereit .logo { opacity: 0; }
.untertitel {
  display: block;
  margin-top: clamp(6px, 1.4vw, 14px);
  font-size: clamp(15px, 3.2vw, 24px);
  font-weight: 500;
  letter-spacing: .34em;
  padding-left: .34em;
  text-transform: uppercase;
  color: #c9ad80;
}
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .untertitel {
    background:
      linear-gradient(110deg, transparent 0 42%, rgba(255, 249, 232, .95) 50%, transparent 58% 100%) no-repeat,
      linear-gradient(180deg, #efe0c2 0%, #c9ad80 55%, #8e7350 100%);
    background-size: 260% 100%, 100% 100%;
    background-position: 100% 0, 0 0;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    animation: takt-glanz 7s linear infinite;
  }
  .untertitel + .untertitel { animation-delay: .22s; }
  .untertitel + .untertitel + .untertitel { animation-delay: .44s; }
}
.mehrsprachig .untertitel { font-size: clamp(14px, 2.7vw, 21px); }
.mehrsprachig .untertitel + .untertitel { margin-top: .55em; }
.linie {
  width: 64px;
  height: 1px;
  margin: clamp(22px, 4.5vh, 40px) auto clamp(16px, 3vh, 28px);
  border: 0;
  background: linear-gradient(90deg, transparent, #8e7350, transparent);
}
.bald {
  margin: 0;
  font-size: clamp(13px, 2.5vw, 17px);
  font-weight: 400;
  letter-spacing: .42em;
  padding-left: .42em;
  text-transform: uppercase;
  color: #aa9e8a;
}
.mehrsprachig .bald { letter-spacing: .3em; padding-left: .3em; }
.wort { display: inline-block; }
.wort + .wort { margin-left: 1.4em; --w: .6s; }
.wort + .wort + .wort { --w: 1.2s; }
@media (max-width: 640px) {
  .wort { display: block; }
  .wort + .wort { margin-left: 0; margin-top: .75em; }
}
.z {
  display: inline-block;
  animation: takt-welle 7s linear infinite;
  animation-delay: calc(2.4s + var(--w, 0s) + var(--i, 0) * 55ms);
}
.z:nth-child(2) { --i: 1; } .z:nth-child(3) { --i: 2; } .z:nth-child(4) { --i: 3; }
.z:nth-child(5) { --i: 4; } .z:nth-child(6) { --i: 5; } .z:nth-child(7) { --i: 6; }
.z:nth-child(8) { --i: 7; } .z:nth-child(9) { --i: 8; } .z:nth-child(10) { --i: 9; }
.z:nth-child(11) { --i: 10; } .z:nth-child(12) { --i: 11; } .z:nth-child(13) { --i: 12; }
.z:nth-child(14) { --i: 13; } .z:nth-child(15) { --i: 14; } .z:nth-child(16) { --i: 15; }
.punkte span { animation: atmen 2.4s ease-in-out infinite; }
.punkte span:nth-child(2) { animation-delay: .4s; }
.punkte span:nth-child(3) { animation-delay: .8s; }
.sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.ton {
  position: fixed;
  right: max(16px, env(safe-area-inset-right));
  bottom: max(16px, env(safe-area-inset-bottom));
  z-index: 2;
  width: 46px;
  height: 46px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid rgba(201, 173, 128, .45);
  background: rgba(0, 0, 0, .45);
  color: #c9ad80;
  display: grid;
  place-items: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: color .3s, border-color .3s, opacity .3s;
}
.ton[hidden] { display: none; }
.ton::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: 50%;
  pointer-events: none;
  animation: takt-ton 7s linear infinite;
}
.ton:hover, .ton:focus-visible { color: #efe0c2; border-color: rgba(239, 224, 194, .85); outline: none; }
.ton:focus-visible { box-shadow: 0 0 0 3px rgba(239, 224, 194, .35); }
.ton svg { width: 22px; height: 22px; display: block; }
.ton .wellen { opacity: 0; transition: opacity .3s; }
.ton .aus { opacity: 1; transition: opacity .3s; }
.ton[aria-pressed="true"] .wellen { opacity: 1; }
.ton[aria-pressed="true"] .aus { opacity: 0; }
.ton.laedt { opacity: .55; }
@keyframes auftritt {
  from { opacity: 0; transform: scale(.985); filter: blur(6px); }
  to { opacity: 1; transform: none; filter: none; }
}
@keyframes atmen {
  0%, 100% { opacity: .35; }
  50% { opacity: 1; }
}
@keyframes takt-glanz {
  0%, 39.5% { background-position: 100% 0, 0 0; }
  57% { background-position: 0% 0, 0 0; }
  100% { background-position: 0% 0, 0 0; }
}
@keyframes takt-welle {
  0% { color: #aa9e8a; transform: none; text-shadow: 0 0 0 rgba(255, 214, 150, 0); }
  2.6% { color: #fff4d8; transform: translateY(-.14em); text-shadow: 0 0 .55em rgba(255, 214, 150, .8); }
  8.5% { color: #aa9e8a; transform: none; text-shadow: 0 0 0 rgba(255, 214, 150, 0); }
  100% { color: #aa9e8a; transform: none; text-shadow: 0 0 0 rgba(255, 214, 150, 0); }
}
@keyframes takt-ton {
  0%, 19.2% { box-shadow: 0 0 0 0 rgba(201, 173, 128, 0); }
  19.8% { box-shadow: 0 0 12px 2px rgba(201, 173, 128, .35); }
  24% { box-shadow: 0 0 0 0 rgba(201, 173, 128, 0); }
  25.9% { box-shadow: 0 0 12px 2px rgba(201, 173, 128, .42); }
  30.5% { box-shadow: 0 0 0 0 rgba(201, 173, 128, 0); }
  32.3% { box-shadow: 0 0 18px 4px rgba(201, 173, 128, .55); }
  42%, 100% { box-shadow: 0 0 0 0 rgba(201, 173, 128, 0); }
}
@media (prefers-reduced-motion: reduce) {
  main, .punkte span, .z, .untertitel, .ton::after { animation: none; }
}