/* Korrektur 01.11.: festliches Gruen/Gold statt Baustellenstreifen;
   Bandhoehe und Freiraum beruecksichtigen die Schraeglage, Plakat leicht geneigt. */
/* Band und Heftklammern aus der historischen html/index.html.
   Nur ein Eventplakat; eigener Motivbereich, damit Spiele bedienbar bleiben. */


.p-event-aushang { --p-bau-luft: clamp(10px, 2vw, 27px);
           --p-bau-innen: clamp(5px, .9vw, 12px);
           --p-bau-schrift: clamp(12px, 2.1vw, 22px);
           --p-bau-hoehe: calc(2 * var(--p-bau-luft) + 2 * var(--p-bau-innen)
                               + 4px + 1.1 * var(--p-bau-schrift));

           --p-bau-oben: calc(40% - 50px);

           --p-plakat-breite: clamp(170px, calc(16.5vw + 62px), 300px);
            }
.p-event-aushang .p-baustelle { --p-bau-streifen: clamp(13px, 2.2vw, 26px);
               --p-bau-schwarz: #073c2b;
               --p-bau-gelb: #f3d779;
               position: absolute; left: -8%; right: -8%;
               top: var(--p-bau-oben);
               transform: translateY(-50%) rotate(-5.1deg);
               z-index: 1; pointer-events: none; overflow: hidden;
               padding-block: var(--p-bau-luft);
               background: #06240e url("../img/event-weihnachten.svg") center / auto 100% repeat-x;
               border-block: 2px solid #d6b95e;
               box-shadow: 0 8px 22px rgba(0,0,0,.35); }

.p-event-aushang .p-baustelle__lauf { display: flex; flex-wrap: nowrap; align-items: center;
                     justify-content: center; overflow: hidden;
                     gap: clamp(30px, 6vw, 110px); }
.p-event-aushang .p-baustelle__lauf span { flex: none;
                    background: transparent; color: #f6e6b1;
                    border: 0;
                    padding: var(--p-bau-innen) clamp(10px, 1.8vw, 24px);
                    font-family: var(--p-font-display); font-stretch: 82%;
                    font-weight: 800; text-transform: uppercase;
                    letter-spacing: var(--tr-label);
                    font-size: var(--p-bau-schrift);
                    line-height: 1.1; white-space: nowrap; }


.p-event-aushang .p-plakat { position: absolute; z-index: 2; pointer-events: none;
            left: var(--p-plakat-links); top: var(--p-plakat-oben);
            width: var(--p-plakat-breite);
            transform: rotate(var(--p-aushang-dreh, 0deg));
            transform-origin: 0 0;
            padding: clamp(3px, .55vw, 8px);
            background: #fff; border-radius: 2px;
            box-shadow: 0 18px 44px rgba(0,0,0,.55); }
.p-event-aushang .p-plakat img { display: block; width: 100%; height: auto; }


.p-event-aushang .p-plakat--a1, .p-event-aushang .p-klammer--a1 { --p-aushang-versatz: -0.85;
                                --p-aushang-dreh: -2deg;
                                --p-aushang-quer: 0.49970;
                                --p-aushang-hoch: 0.01745; }
.p-event-aushang .p-plakat--a2, .p-event-aushang .p-klammer--a2 { --p-aushang-versatz:  0.25;
                                --p-aushang-dreh: -2deg;
                                --p-aushang-quer: 0.49970;
                                --p-aushang-hoch: 0.01745; }
.p-event-aushang .p-plakat--a1, .p-event-aushang .p-plakat--a2,
.p-event-aushang .p-klammer--a1, .p-event-aushang .p-klammer--a2 {
  --p-plakat-links: calc(50%
                         + var(--p-aushang-versatz) * var(--p-plakat-breite));
  --p-bau-oberkante: calc(var(--p-bau-oben)
                          - 0.0889 * (var(--p-aushang-versatz)
                                      + var(--p-aushang-quer))
                            * var(--p-plakat-breite)
                          - 0.498 * var(--p-bau-hoehe));
  --p-plakat-oben: calc(var(--p-bau-oberkante)
                        + var(--p-aushang-hoch) * var(--p-plakat-breite)); }

.p-event-aushang .p-klammer { position: absolute; z-index: 2; pointer-events: none;
             left: calc(var(--p-plakat-links)
                        + var(--p-aushang-quer) * var(--p-plakat-breite));
             top: var(--p-bau-oberkante);
             width: clamp(13px, 2.6vw, 37px); height: auto;
             transform: translate(-50%, -12%) rotate(4deg);
             filter: drop-shadow(0 2px 3px rgba(0,0,0,.5)); }

@media (max-width: 480px) {
  .p-event-aushang { --p-plakat-breite: clamp(150px, 59vw, 190px); }

  .p-event-aushang .p-plakat--a1, .p-event-aushang .p-klammer--a1 { --p-aushang-versatz: -0.53; }
  .p-event-aushang .p-plakat--a2, .p-event-aushang .p-klammer--a2 { display: none; }
}

.p-event-aushang { --p-plakat-breite: clamp(170px, calc(16.5vw + 62px), 300px); --p-bau-oben: calc(clamp(44px, 6vw, 76px) + 5vw); position: relative; width: calc(100% + 2 * var(--p-gut)); margin-inline: calc(-1 * var(--p-gut)); height: calc(var(--p-bau-oben) + 1.56 * var(--p-plakat-breite) + 12px); overflow: hidden; isolation: isolate; }
.p-event-aushang a.p-plakat { display: block; pointer-events: auto; }
.p-event-aushang .p-plakat picture { display: contents; }
.p-event-aushang .p-plakat img { max-width: 100%; }
.p-event-aushang a.p-plakat:focus-visible { outline: 3px solid #fff; outline-offset: 5px; }
.p-stage--event .p-pairing:not(.p-pairing--weiter) { margin-top: var(--s5); }
.p-stage--event.p-stage--vollbild .p-fixture { grid-template-rows: auto auto 1fr auto auto; }
.p-stage--vollbild .p-event-aushang { --p-plakat-breite: calc(min(260px, 22vw, 30vh) * var(--p-vb-mass, 1)); --p-bau-oben: calc(54px * var(--p-vb-mass, 1) + 5vw); flex-shrink: 0; }

/* Dekoration in den Gruen-/Gold-/Lichtfarben des Nutzerplakats. */
.p-event-aushang .p-baustelle__lauf { position: relative; z-index: 1; text-shadow: 0 1px 4px #031d0b; }
@media (max-width: 480px) { .p-event-aushang { --p-plakat-breite: clamp(150px, 59vw, 190px); } }