/* Karneval: nur aktiv, wenn karneval.js an einem Karnevalstag die
 * Klasse `pk-karneval` an <html> haengt. Sonst wirkt hier nichts.
 * Farben wie die Karnevals-Presets: Lila, Smaragdgruen, Gold. */

/* Harlekin-Rauten und Konfettipunkte, ganz leise ueber dem Blau */
.pk-karneval body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    opacity: .09;
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Ccircle cx='20' cy='30' r='3' fill='%23f4c430'/%3E%3Ccircle cx='110' cy='18' r='2.5' fill='%23e63946'/%3E%3Crect x='70' y='90' width='7' height='3' rx='1' transform='rotate(35 73 91)' fill='%232ec4b6'/%3E%3Crect x='130' y='120' width='7' height='3' rx='1' transform='rotate(-20 133 121)' fill='%23f4c430'/%3E%3Ccircle cx='40' cy='130' r='2.5' fill='%23c77dff'/%3E%3C/svg%3E"),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='160'%3E%3Cpath d='M60 0L120 80L60 160L0 80Z' fill='%237b2cbf'/%3E%3Cpath d='M0 80L60 160L0 160ZM120 80L60 160L120 160ZM0 0L60 0L0 80ZM120 0L60 0L120 80Z' fill='%23168a6b'/%3E%3C/svg%3E");
    background-size: 160px 160px, 120px 160px;
}

/* Bunter Streifen oben auf jeder Karte */
.pk-karneval .card {
    position: relative;
}

.pk-karneval .card::after {
    content: "";
    position: absolute;
    top: 0;
    left: 14px;
    right: 14px;
    height: 3px;
    border-radius: 0 0 3px 3px;
    background: linear-gradient(90deg, #7b2cbf, #2ec4b6, #f4c430, #e63946, #7b2cbf);
    opacity: .85;
    pointer-events: none;
}

/* Wimpelkette unter dem Menue */
.pk-wimpel {
    height: 26px;
    margin: -6px auto 2px;
    background-repeat: repeat-x;
    background-size: 84px 26px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='84' height='26'%3E%3Cpath d='M0 3 Q21 9 42 3 T84 3' fill='none' stroke='%23d9b44a' stroke-width='1.5'/%3E%3Cpath d='M4 4.5L18 4.5L11 22Z' fill='%237b2cbf'/%3E%3Cpath d='M25 6.5L39 5L32 23Z' fill='%23f4c430'/%3E%3Cpath d='M46 5L60 6.5L53 23Z' fill='%23168a6b'/%3E%3Cpath d='M67 4.5L81 4.5L74 22Z' fill='%23e63946'/%3E%3C/svg%3E");
    filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .35));
    pointer-events: none;
}

/* Countdown-Balken ueber dem Ticker */
.pk-countdown {
    margin: 8px 0 -2px;
    padding: 9px 14px;
    border-radius: 6px;
    text-align: center;
    font-weight: 700;
    font-size: 16px;
    color: #fff;
    cursor: pointer;
    background: linear-gradient(90deg, #5a189a, #7b2cbf 30%, #168a6b 70%, #0f6e55);
    border: 1px solid #d9b44a;
    box-shadow: 0 0 0 2px rgba(244, 196, 48, .25), 0 4px 14px rgba(0, 0, 0, .35);
    text-shadow: 0 1px 2px rgba(0, 0, 0, .5);
    position: relative;
    z-index: 2;
}

.pk-countdown .pk-zeit {
    display: inline-block;
    min-width: 5.2em;
    padding: 0 6px;
    margin: 0 4px;
    border-radius: 4px;
    background: rgba(0, 0, 0, .3);
    color: #f4c430;
    font-variant-numeric: tabular-nums;
}

.pk-countdown.pk-los {
    background: linear-gradient(90deg, #e63946, #7b2cbf 35%, #168a6b 65%, #f4c430);
    animation: pk-blinken 1.6s ease-in-out infinite;
}

@keyframes pk-blinken {
    50% { box-shadow: 0 0 0 3px rgba(244, 196, 48, .6), 0 4px 18px rgba(244, 196, 48, .45); }
}

/* Konfetti liegt ueber allem, faengt aber keine Klicks */
#pk-konfetti {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 99999;
}

@media (max-width: 991px) {
    .pk-wimpel { display: none; }
    .pk-countdown { font-size: 14px; padding: 7px 10px; }
}

@media (max-width: 575px) {
    .pk-countdown .pk-lang { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .pk-countdown.pk-los { animation: none; }
}