@font-face { font-family: 'Dela'; src: url(fonts/dela-gothic.woff2) format('woff2'); font-weight: 400; font-display: swap; }

:root[data-style='plakat'] {
  --bg: var(--poster, #4D8BFF);
  --bg-2: color-mix(in srgb, var(--poster, #4D8BFF) 82%, #000);
  --ink: #0b0b0b;
  --ink-2: #0b0b0b;
  --ink-3: rgb(0 0 0 / 0.85);
  --dot: #0b0b0b;
  --accent: #0b0b0b;
  --accent-press: #000;
  --on-accent: var(--poster, #4D8BFF);
  color-scheme: light;
}
[data-style='plakat'] body, :root[data-style='plakat'] { transition-duration: 2.4s; }
[data-style='plakat'] .top { justify-content: space-between; align-items: center; }
[data-style='plakat'] .brand { font-family: 'Dela', sans-serif; font-weight: 400; font-size: 26px; letter-spacing: -0.01em; text-transform: uppercase; }
[data-style='plakat'] .top { flex-wrap: nowrap; }
[data-style='plakat'] .top__brand { display: flex; flex-direction: column; gap: 4px; }
[data-style='plakat'] .tagline { color: var(--ink); font-size: 14px; }

[data-style='plakat'] .switch {
  display: inline-flex; align-items: center; gap: 10px; flex: none; padding: 8px 0 8px 8px; border: 0; background: none;
  color: var(--ink); font-size: 15px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.04em; cursor: pointer;
  touch-action: manipulation;
}
[data-style='plakat'] .switch__track {
  position: relative; width: 44px; height: 26px; border-radius: 13px; background: rgb(0 0 0 / 0.16); transition: background-color 0.25s;
}
[data-style='plakat'] .switch__knob {
  position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--ink);
  transition: transform 0.25s var(--ease), background-color 0.25s;
}
[data-style='plakat'] .switch[aria-checked='true'] .switch__track { background: var(--ink); }
[data-style='plakat'] .switch[aria-checked='true'] .switch__knob { transform: translateX(18px); background: var(--poster); }

.backdrop {
  position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; isolation: isolate; background: var(--poster);
  opacity: 0; visibility: hidden; transition: opacity 0.9s var(--ease), visibility 0s 0.9s;
}
.photo-on .backdrop { opacity: 1; visibility: visible; transition: opacity 0.9s var(--ease); }
.photo-on body { background-color: transparent; }

:root[data-style='plakat'].photo-on {
  --ink: #fff; --ink-2: #fff; --ink-3: rgb(255 255 255 / 0.88); --dot: #fff;
  --accent: #fff; --accent-press: #ececec; --on-accent: #0b0b0b;
}

.photo-on .sheet { --ink: #0b0b0b; --ink-2: #0b0b0b; --ink-3: rgb(0 0 0 / 0.85); --accent: #0b0b0b; --on-accent: var(--poster); }
.backdrop img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0;

  filter: grayscale(1) contrast(0.7) brightness(calc(var(--lift, 1.5) * 0.62)); transition: opacity 2.4s var(--ease);
}

.photo-on .tagline, .photo-on .stage__num, .photo-on .stage__line, .photo-on .stage__note,
.photo-on .more, .photo-on .switch__label, .photo-on .place__num, .photo-on .brand {
  text-shadow: 0 1px 2px rgb(0 0 0 / 0.35), 0 0 14px rgb(0 0 0 / 0.4);
}
.photo-on [data-style='plakat'] .place__name, [data-style='plakat'].photo-on .place__name {
  opacity: 0.85; text-shadow: 0 1px 2px rgb(0 0 0 / 0.3), 0 0 18px rgb(0 0 0 / 0.35);
}
:root.photo-on .pager__btn, :root.photo-on .pager__btn:hover { background: var(--ink); color: #0b0b0b; }
:root.photo-on .switch[aria-checked='true'] .switch__knob { background: #0b0b0b; }
.backdrop img.is-on { opacity: 1; }
.backdrop::after {
  content: ''; position: absolute; inset: 0; mix-blend-mode: multiply; transition: background-color 2.4s var(--ease);
  background: color-mix(in srgb, var(--poster) 66%, #000);
}

[data-style='plakat'] .pager { position: relative; z-index: 2; display: flex; align-items: center; justify-content: center; gap: 8px; margin-bottom: 20px; }
[data-style='plakat'] .pager .stage__num { margin: 0; min-width: 76px; }
[data-style='plakat'] .pager__btn {
  display: grid; place-items: center; width: 44px; height: 44px; flex: none; border: 0; border-radius: 50%;
  background: rgb(0 0 0 / 0.1); color: var(--ink); cursor: pointer; touch-action: manipulation; transition: background-color 0.2s;
}
[data-style='plakat'] .pager__btn:hover { background: rgb(0 0 0 / 0.2); }
[data-style='plakat'] .pager__btn svg, [data-style='plakat'] .more svg {
  width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round;
}

[data-style='plakat'] .stage { position: relative; padding-bottom: calc(100lvh - 100svh + 76px); }
[data-style='plakat'] .more {
  position: absolute; left: 50%; bottom: calc(100lvh - 100svh + 12px); transform: translateX(-50%); display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 16px; color: var(--ink); text-decoration: none; white-space: nowrap;
  font-size: 15px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.04em;
}
[data-style='plakat'] .more svg { width: 18px; height: 18px; animation: nudge 2.4s ease-in-out infinite; }
@keyframes nudge { 0%, 100% { transform: none; } 50% { transform: translateY(4px); } }
[data-style='plakat'] .stage { align-items: center; text-align: center; padding-top: 16px; min-height: calc(100lvh - var(--top-h, 120px)); justify-content: center; }
[data-style='plakat'] .stage__head { min-height: 0; align-items: center; align-self: stretch; width: 100%; }
[data-style='plakat'] .stage__num { color: var(--ink); font-size: 14px; letter-spacing: 0.08em; }
[data-style='plakat'] .stage__of { color: var(--ink); opacity: 0.85; }
[data-style='plakat'] .stage__name {
  padding-block: 0.16em 0.15em; margin-top: calc(var(--name-slack, 0px) / 2);
  word-spacing: 0.06em;
  display: block; width: 100%; font-family: 'Dela', sans-serif; font-weight: 400; font-stretch: normal; text-transform: uppercase;
  font-size: var(--fit, 64px); line-height: 0.92; letter-spacing: -0.01em; text-wrap: balance; color: var(--ink);


  pointer-events: none;
}

[data-style='plakat'] .stage__name .o {
  display: inline-block; position: relative; color: transparent; vertical-align: baseline;
}

[data-style='plakat'] .stage__name .o::before {

  content: ''; position: absolute; left: 0.02em; right: 0.02em; top: 50%; aspect-ratio: 1; border-radius: 50%; background: var(--ink);
  transform: translateY(-50%) scaleY(0.868) rotate(38deg);
  --hole: radial-gradient(calc(0.17em * (0.35 + var(--lvl, 0) * 1.1)) calc(0.31em * (0.6 + var(--lvl, 0) * 0.6)) at 50% 50%,
          transparent 96%, #000 100%);
  -webkit-mask-image: var(--hole); mask-image: var(--hole);
}

[data-style='plakat'] .stage__name .o.a::before {
  left: 0; right: 0; top: 0.04em; bottom: 0.02em; aspect-ratio: auto; border-radius: 0; transform: none; -webkit-mask-image: none; mask-image: none;
  --s: calc(0.4 + var(--lvl, 0) * 1.1);
  clip-path: polygon(evenodd, 50% 0, 100% 100%, 0 100%, 50% 0,
    50% calc(64% - 17% * var(--s)), calc(50% + 15% * var(--s)) calc(64% + 13% * var(--s)),
    calc(50% - 15% * var(--s)) calc(64% + 13% * var(--s)), 50% calc(64% - 17% * var(--s)));
}
[data-style='plakat'] .stage.has-o .grille { display: none; }

[data-style='plakat'] .stage__line { margin: 26px auto 0; color: var(--ink); font-size: 17px; max-width: min(36ch, 100%); text-wrap: balance; min-height: var(--line-box, 0px); }
[data-style='plakat'] .controls { margin-top: 44px; margin-bottom: calc(var(--name-slack, 0px) / 2); justify-content: center; }
[data-style='plakat'] .play { color: var(--on-accent); }
[data-style='plakat'] .places { margin-top: 48px; }
[data-style='plakat'] .place { grid-template-columns: 34px 1fr auto; padding: 6px 0; }
[data-style='plakat'] .place__num { color: var(--ink); }
[data-style='plakat'] .place__name { word-spacing: 0.14em; font-family: 'Dela', sans-serif; text-transform: uppercase; font-size: 27px; font-stretch: normal; color: var(--ink); opacity: 0.62; letter-spacing: -0.01em; }
[data-style='plakat'] .place:hover .place__name, [data-style='plakat'] .place[aria-current='true'] .place__name { opacity: 1; color: var(--ink); font-weight: 400; }
[data-style='plakat'] .place__mark { background: var(--ink); }

[data-style='plakat'] .place {
  padding-inline: 12px; margin-inline: -12px; width: calc(100% + 24px); border-radius: 8px;
  break-inside: avoid; transition: background-color 0.25s, color 0.25s;
  --sel-ink: var(--poster);
}
[data-style='plakat'] .place[aria-current='true'] { background: var(--ink); }
[data-style='plakat'] .place[aria-current='true'] .place__name,
[data-style='plakat'] .place[aria-current='true'] .place__num { color: var(--sel-ink); opacity: 1; text-shadow: none; }
[data-style='plakat'] .place[aria-current='true'] .place__mark { background: var(--sel-ink); }
:root.photo-on [data-style='plakat'] .place, [data-style='plakat'].photo-on .place { --sel-ink: #0b0b0b; }
[data-style='plakat'] .link { color: var(--ink); }
[data-style='plakat'] .dock { background: #0b0b0b; color: var(--poster); }
[data-style='plakat'] .dock__play { background: var(--poster); color: #0b0b0b; }
[data-style='plakat'] .dock__name {
  font-family: 'Dela', sans-serif; text-transform: uppercase; font-weight: 400; font-size: 15px; line-height: 1.05;

  white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; word-spacing: 0.12em;
}

@media (max-width: 899px) {
  [data-style='plakat'] .pager { margin-bottom: 22px; }
  [data-style='plakat'] .controls { flex-direction: column; gap: 22px; margin-top: 34px; }
  [data-style='plakat'] .volume { order: -1; flex: none; width: 220px; }
  [data-style='plakat'] .play { min-width: 196px; justify-content: center; }
}

@media (min-width: 900px) {
  [data-style='plakat'] .app { display: block; max-width: none; padding: 32px 56px 40px; }
  [data-style='plakat'] .stage { min-height: calc(100lvh - var(--top-h, 150px)); padding-top: 24px; }
  [data-style='plakat'] .stage__line { font-size: 19px; }
  [data-style='plakat'] .places ol { columns: 2; column-gap: 56px; }
  [data-style='plakat'] .place__name { font-size: 34px; }
}

@media (max-width: 360px) {
  [data-style='plakat'] .place { grid-template-columns: 26px 1fr auto; }
  [data-style='plakat'] .place__name { font-size: 19px; }
}

[data-style='plakat'] .foot {
  margin: 106px 0 0; padding: 0 0 calc(92px + env(safe-area-inset-bottom)); background: #0b0b0b; color: var(--poster);
  border-radius: 28px 28px 0 0; overflow: hidden; transition: color 2.4s var(--ease);
}
.foot__main {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 24px 40px;
  padding: 36px var(--pad) 34px;
}
.foot__brand { display: grid; gap: 10px; min-width: 0; }
.foot__logo { margin: 0; font-family: 'Dela', sans-serif; text-transform: uppercase; font-size: 30px; line-height: 0.9; }
[data-style='plakat'] .brand { --logo: var(--ink); }
.foot__logo { --logo: var(--poster); }
[data-style='plakat'] .brand .o, .foot__logo .o { display: inline-block; position: relative; color: transparent; }
[data-style='plakat'] .brand .o::before, .foot__logo .o::before {
  content: ''; position: absolute; left: 0.02em; right: 0.02em; top: 50%; aspect-ratio: 1; border-radius: 50%; background: var(--logo);
  transform: translateY(-50%) scaleY(0.868) rotate(38deg); transition: background-color 2.4s var(--ease);
  -webkit-mask-image: radial-gradient(0.12em 0.22em at 50% 50%, transparent 96%, #000 100%);
          mask-image: radial-gradient(0.12em 0.22em at 50% 50%, transparent 96%, #000 100%);
}
.foot__love { margin: 0; max-width: 34ch; font-size: 15px; line-height: 1.4; color: #f2f2f2; }
.foot__tg {
  flex: none; display: inline-flex; align-items: center; height: 48px; padding: 0 24px; border-radius: 999px;
  border: 1.5px solid var(--poster); color: var(--poster); text-decoration: none; font-size: 16px; font-weight: 500;
  transition: background-color 0.2s, color 0.2s, border-color 2.4s var(--ease);
}
.foot__tg:hover { background: var(--poster); color: #0b0b0b; }
.foot__tg:active { transform: scale(0.97); }
.places__src {
  margin-top: 28px; padding: 6px 0; border: 0; background: none; color: var(--ink); font: inherit; font-size: 15px; cursor: pointer;
  text-decoration: underline; text-decoration-color: color-mix(in srgb, currentColor 45%, transparent); text-underline-offset: 4px;
}
.places__src:hover { text-decoration-color: currentColor; }
.photo-on .places__src { text-shadow: 0 1px 2px rgb(0 0 0 / 0.35), 0 0 14px rgb(0 0 0 / 0.4); }
@media (min-width: 900px) {
  [data-style='plakat'] .foot { padding-bottom: 22px; margin-top: 122px; }
  .foot__main { padding-left: 56px; padding-right: 56px; }
  .foot__logo { font-size: 38px; }
}

.no-anim .app, .no-anim .foot { visibility: hidden; }