/* Loaded only during the 7 × 11 anniversary. The ordinary layout stays in karneval.css. */
@font-face { font-family: Jubilee Poppins; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/poppins-400.woff2") format("woff2"); }
@font-face { font-family: Jubilee Poppins; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/poppins-700.woff2") format("woff2"); }
@font-face { font-family: Jubilee Poppins; font-style: normal; font-weight: 900; font-display: swap; src: url("fonts/poppins-900.woff2") format("woff2"); }

.jubilee-2027 {
    --pink: #ed1953;
    --pink-dark: #b91343;
    --pink-panel: #d41247;
    --turquoise: #47c1b2;
    --gold: #eeb022;
    --paper: #f1eeec;
    --soft: #e9e5e2;
    font-family: "Jubilee Poppins", ui-sans-serif, system-ui, sans-serif;
}
.jubilee-2027 .site-header { background: rgba(241, 238, 236, .96); }
.jubilee-2027 .brand b, .jubilee-2027 .kicker, .jubilee-2027 .schedule-row time { color: var(--pink-dark); }
.jubilee-2027 .tag { color: #196f65; }
.jubilee-2027 .schedule-row > div, .jubilee-2027 .schedule-row > p, .jubilee-2027 .photo-story > div { min-width: 0; }
.jubilee-2027 .schedule-row h3 { overflow-wrap: anywhere; }
.jubilee-2027 .hero { isolation: isolate; color: var(--ink); background: var(--paper); }
.jubilee-2027 .hero::before { content: ""; position: absolute; z-index: -1; inset: 0; pointer-events: none; background: url("images/plakat-konfetti.svg") center / cover no-repeat; }
.jubilee-2027 .hero h1 { color: var(--pink); }
.jubilee-2027 .hero h1 .hero-location { color: var(--pink-dark); }
.jubilee-2027 .hero .kicker { color: var(--pink-dark); }
.jubilee-2027 .hero-lead { color: #554a4e; }
.jubilee-2027 .hero .button-light { color: var(--pink-dark); border-color: var(--pink-dark); }
.jubilee-2027 .countdown { color: var(--ink); border-color: rgba(185, 19, 67, .2); background: rgba(255, 255, 255, .7); backdrop-filter: none; }
.jubilee-2027 .countdown > *, .jubilee-2027 .countdown p { border-color: rgba(185, 19, 67, .16); }
.jubilee-2027 .countdown p span, .jubilee-2027 .countdown div span { color: #66565e; }
.jubilee-2027 .countdown p strong, .jubilee-2027 .countdown div b { color: var(--pink-dark); }
.jubilee-2027 .session-strip { color: var(--ink); background: var(--gold); }
.jubilee-2027 .session-strip span { border-color: rgba(23, 19, 21, .15); }
.jubilee-2027 .session-strip span:nth-child(2) { background: var(--turquoise); }
.jubilee-2027 .session-strip span:last-child { color: #fff; background: var(--pink-panel); }
.jubilee-2027 .tickets, .jubilee-2027 .photo-call, .jubilee-2027 .costume-offer,
.jubilee-2027 .contact-dialog header, .jubilee-2027 .nav-cta { background: var(--pink-panel); }
.jubilee-2027 .tickets .kicker, .jubilee-2027 .photo-call .kicker, .jubilee-2027 .contact-dialog header p { color: #fff0c5; }
.jubilee-2027 .ticket-panel .button-dark { background: var(--pink-panel); }
.jubilee-2027 .sale-countdown span { color: #173b36; }
.jubilee-2027 .join { color: var(--ink); }
.jubilee-2027 .contacts { border-top-color: rgba(23, 19, 21, .5); }
.jubilee-2027 .contacts article { border-bottom-color: rgba(23, 19, 21, .3); }
.jubilee-2027 .mobile-nav { background: rgba(241, 238, 236, .98); }
.jubilee-2027 .site-footer { border-top: 5px solid var(--gold); }

/* Original, individually animated 7 × 11 outlines from the supplied poster. */
.jubilee-sign { position: relative; display: block; width: min(290px, calc(100% - 30px)); margin: 0 0 20px; padding: 0; border: 0; color: var(--pink-dark); background: transparent; text-align: left; pointer-events: none; }
.jubilee-mobile-break { display: none; }
.jubilee-stage { position: relative; width: 100%; aspect-ratio: 2 / 1; }
/* Permanent dots sit in the free margins, away from lettering and the animation. */
.jubilee-2027 .hero-content { position: relative; isolation: isolate; }
.jubilee-2027 .hero-content::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0 -10px;
    pointer-events: none;
    background:
        radial-gradient(circle at 1% 12%, var(--pink) 0 4px, transparent 4.5px),
        radial-gradient(circle at 99% 7%, var(--gold) 0 4px, transparent 4.5px),
        radial-gradient(circle at 1% 44%, var(--turquoise) 0 4px, transparent 4.5px),
        radial-gradient(circle at 99% 47%, #f35d57 0 4px, transparent 4.5px),
        radial-gradient(circle at 1% 68%, var(--gold) 0 4px, transparent 4.5px),
        radial-gradient(circle at 99% 86%, var(--pink) 0 4px, transparent 4.5px);
}
.jubilee-numbers { display: block; width: 100%; height: 100%; overflow: visible; }
.jubilee-word { display: block; width: 82%; height: auto; margin: -3px auto 0; }
.jubilee-digit { transform-box: fill-box; transform-origin: 50% 80%; }
.jubilee-sign.is-celebrating .jubilee-digit { animation: jubilee-arrive 1.4s cubic-bezier(.2, .8, .2, 1) 2 both; }
.jubilee-digit--seven { --turn: -15deg; animation-delay: .0s !important; }
.jubilee-digit--times { --turn: 18deg; animation-delay: .12s !important; }
.jubilee-digit--one-first { --turn: -12deg; animation-delay: .24s !important; }
.jubilee-digit--one-last { --turn: 16deg; animation-delay: .36s !important; }
.jubilee-sign.is-celebrating .jubilee-word { animation: jubilee-caption .85s 1s both; }
.jubilee-stage::after { content: ""; position: absolute; right: -32px; top: 28px; width: 36px; height: 65px; background: url("images/jubilee-balloon.svg") center / contain no-repeat; transform: rotate(9deg); pointer-events: none; }
.jubilee-sign.is-celebrating .jubilee-stage::after { animation: jubilee-balloon 3.6s ease-in-out both; }
.jubilee-dot { position: absolute; top: 48%; left: 50%; width: 8px; height: 8px; border-radius: 50%; background: var(--gold); opacity: 0; pointer-events: none; }
.jubilee-sign.is-celebrating .jubilee-dot { animation: jubilee-confetti 1.4s .25s ease-out 2 both; }
.jubilee-dot--one { --x: -140px; --y: -58px; background: var(--pink); }
.jubilee-dot--two { --x: -105px; --y: 55px; width: 6px; height: 12px; border-radius: 1px; background: var(--turquoise); }
.jubilee-dot--three { --x: -55px; --y: -85px; }
.jubilee-dot--four { --x: 60px; --y: -76px; width: 6px; height: 11px; border-radius: 1px; background: #f35d57; }
.jubilee-dot--five { --x: 135px; --y: -35px; background: var(--turquoise); }
.jubilee-dot--six { --x: 112px; --y: 62px; }
@keyframes jubilee-arrive {
    0% { opacity: 0; transform: translateY(38px) scale(.45) rotate(var(--turn)); }
    42% { opacity: 1; transform: translateY(-7px) scale(1.08) rotate(calc(var(--turn) * -.22)); }
    60% { transform: translateY(2px) scale(.98) rotate(1deg); }
    74%, 100% { opacity: 1; transform: none; }
}
@keyframes jubilee-caption { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes jubilee-confetti {
    0% { opacity: 0; transform: translate(0, 0) scale(.2) rotate(0); }
    18% { opacity: 1; }
    72% { opacity: 1; }
    100% { opacity: 0; transform: translate(var(--x), var(--y)) scale(.8) rotate(190deg); }
}
@keyframes jubilee-balloon { 0% { opacity: 0; transform: translateY(12px) rotate(-8deg); } 20% { opacity: 1; } 55% { transform: translateY(-5px) rotate(12deg); } 100% { opacity: 1; transform: rotate(9deg); } }
@media (max-width: 1000px) { .jubilee-sign { width: min(270px, calc(100% - 30px)); } }
@media (max-width: 600px) {
    .jubilee-sign { width: min(230px, calc(100% - 48px)); margin: 4px auto 18px; }
    .jubilee-2027 .hero-content::before {
        background:
            radial-gradient(circle at 8% 18%, var(--pink) 0 4px, transparent 4.5px),
            radial-gradient(circle at 93% 8%, var(--gold) 0 4px, transparent 4.5px),
            radial-gradient(circle at 6% 28%, var(--turquoise) 0 4px, transparent 4.5px),
            radial-gradient(circle at 94% 32%, #f35d57 0 4px, transparent 4.5px),
            radial-gradient(circle at 1% 56%, var(--gold) 0 4px, transparent 4.5px),
            radial-gradient(circle at 99% 78%, var(--pink) 0 4px, transparent 4.5px);
    }
    .jubilee-2027 .hero .kicker { margin-bottom: 10px; font-size: .68rem; line-height: 1.4; letter-spacing: .035em; text-align: center; }
    .jubilee-2027 .hero h1 { margin-bottom: 20px; font-family: "Jubilee Poppins", ui-sans-serif, system-ui, sans-serif; font-size: clamp(2.05rem, 9.5vw, 2.6rem); font-weight: 900; line-height: 1.05; letter-spacing: -.045em; text-align: center; }
    .jubilee-mobile-break { display: initial; }
    .jubilee-2027 .hero h1 .hero-location { margin-top: 12px; font-family: "Jubilee Poppins", ui-sans-serif, system-ui, sans-serif; font-size: .92rem; font-weight: 400; line-height: 1.45; letter-spacing: 0; }
    .jubilee-2027 .hero-lead { font-size: .95rem; line-height: 1.65; }
    .jubilee-2027 .hero::before { background-size: 100% auto; background-position: center top; }
    .jubilee-dot--one { --x: -115px; }
    .jubilee-dot--five { --x: 110px; }
}
@media (prefers-reduced-motion: reduce) {
    .jubilee-sign *, .jubilee-sign *::after { animation: none !important; transition: none !important; }
    .jubilee-dot { display: none; }
}