start
Unterschiede
Hier werden die Unterschiede zwischen zwei Versionen angezeigt.
| Beide Seiten der vorigen RevisionVorhergehende ÜberarbeitungNächste Überarbeitung | Vorhergehende Überarbeitung | ||
| start [2026/06/19 19:18] – dfrey | start [2026/11/06 19:48] (aktuell) – dfrey | ||
|---|---|---|---|
| Zeile 1: | Zeile 1: | ||
| {{img: | {{img: | ||
| - | |||
| < | < | ||
| <!-- ------------------------------------------------------------------------------------------------------------------------ --> | <!-- ------------------------------------------------------------------------------------------------------------------------ --> | ||
| - | <div id=" | + | <!-- Grillfest AV-Hütte 2026 – Anfang hier endet der Kommentar - -> |
| - | <section | + | <div id=" |
| - | <div class=" | + | <div class=" |
| - | + | <div class=" | |
| - | <div> | + | <div class=" |
| - | <div class=" | + | <h2> |
| - | + | <p class=" | |
| - | | + | <p> |
| - | Grillfest auf dem Theresienberg | + | Zwei Tage Grillfest |
| - | </h2> | + | |
| - | + | Weißwurst-Frühschoppen, | |
| - | | + | |
| - | Wir laden herzlich zum Grillfest an unserer AV-Hütte ein: | + | <p class=" |
| - | < | + | |
| - | </ | + | |
| - | + | </ | |
| - | <p class=" | + | < |
| - | | + | <a class=" |
| - | </p> | + | |
| - | + | </a> | |
| - | <button type=" | + | <button type=" |
| - | 🔥 Ankündigung noch einmal ansehen | + | |
| - | | + | |
| </ | </ | ||
| - | </section> | + | </div> |
| </ | </ | ||
| < | < | ||
| - | # | + | # |
| - | --av-green: #176b36; | + | #av-grillfest-popup-2026 { |
| - | --av-dark-green: | + | |
| - | --av-cream: #fff8e6; | + | |
| - | | + | } |
| - | max-width: 900px; | + | #av-grillfest-2026 *, |
| - | | + | # |
| - | | + | |
| } | } | ||
| - | |||
| - | /* Statischer Hinweis */ | ||
| .av-grillfest-card { | .av-grillfest-card { | ||
| - | | + | |
| - | | + | |
| - | | + | |
| - | | + | |
| - | | + | |
| - | | + | |
| background: | background: | ||
| - | | + | |
| - | | + | linear-gradient(135deg, #fff8df, #f7ecd0 45%, #e8f4d9); |
| - | | + | box-shadow: 0 12px 30px rgba(0, 60, 15, 0.22); |
| - | | + | |
| - | | + | } |
| + | |||
| + | .av-grillfest-card:: | ||
| + | content: "" | ||
| + | | ||
| + | | ||
| + | background: | ||
| + | radial-gradient(circle at 88% 16%, rgba(255, 96, 0, 0.22), transparent | ||
| + | radial-gradient(circle at 8% 90%, rgba(0, 136, 0, 0.18), transparent 22%); | ||
| + | pointer-events: | ||
| } | } | ||
| .av-grillfest-card-fire { | .av-grillfest-card-fire { | ||
| - | | + | |
| - | font-size: | + | right: 1rem; |
| - | filter: drop-shadow(0 | + | top: 0.7rem; |
| + | font-size: | ||
| + | filter: drop-shadow(0 | ||
| + | animation: av-card-fire 1.1s infinite alternate ease-in-out; | ||
| } | } | ||
| - | .av-grillfest-card-date { | + | .av-grillfest-card-content |
| - | | + | |
| - | | + | |
| - | | + | } |
| - | | + | |
| - | | + | .av-grillfest-kicker { |
| - | | + | |
| - | font-weight: bold; | + | |
| - | | + | |
| + | | ||
| + | font-size: 0.78rem; | ||
| + | | ||
| } | } | ||
| .av-grillfest-card h2 { | .av-grillfest-card h2 { | ||
| - | margin: | + | margin: 0.15rem 0 0.25rem; |
| - | color: var(--av-dark-green); | + | font-size: clamp(1.55rem, 3vw, 2.35rem); |
| - | font-family: | + | |
| - | font-size: clamp(25px, 4vw, 38px); | + | |
| - | | + | |
| } | } | ||
| - | .av-grillfest-card p { | + | .av-grillfest-date { |
| - | margin: | + | display: inline-block; |
| - | font-size: 17px; | + | margin: 0.25rem 0 0.8rem; |
| - | | + | padding: 0.35rem 0.75rem; |
| + | border-radius: | ||
| + | background: #0b7d23; | ||
| + | color: #fff; | ||
| + | font-family: Arial, sans-serif; | ||
| + | | ||
| } | } | ||
| - | .av-grillfest-card-promise | + | .av-grillfest-food { |
| - | color: var(--av-dark-green); | + | font-weight: |
| - | font-weight: | + | |
| } | } | ||
| - | .av-grillfest-replay, | + | .av-grillfest-actions { |
| - | .av-grillfest-sound, | + | display: flex; |
| - | | + | flex-wrap: wrap; |
| + | gap: 0.7rem; | ||
| + | margin-top: 1rem; | ||
| + | } | ||
| + | |||
| + | .av-grillfest-download, | ||
| + | | ||
| + | .av-popup-button | ||
| + | appearance: none; | ||
| + | display: inline-flex; | ||
| + | align-items: | ||
| + | justify-content: | ||
| + | gap: 0.35rem; | ||
| border: 0; | border: 0; | ||
| + | border-radius: | ||
| + | padding: 0.72rem 1.05rem; | ||
| + | font-family: | ||
| + | font-weight: | ||
| + | text-decoration: | ||
| cursor: pointer; | cursor: pointer; | ||
| - | | + | |
| } | } | ||
| - | .av-grillfest-replay { | + | .av-grillfest-download, |
| - | | + | |
| - | | + | |
| - | color: #fff; | + | color: #fff !important; |
| - | | + | |
| - | border-radius: | + | |
| - | font-weight: | + | |
| } | } | ||
| - | .av-grillfest-replay: | + | .av-download-prominent, |
| - | .av-grillfest-replay: | + | .av-popup-button.av-download |
| - | | + | |
| + | padding: 0.9rem 1.35rem; | ||
| + | animation: av-download-pulse 1.8s infinite ease-in-out; | ||
| } | } | ||
| - | | + | |
| + | .av-popup-button.av-close-main { | ||
| + | background: #0b7d23; | ||
| + | color: #fff; | ||
| + | box-shadow: 0 8px 18px rgba(0, 80, 25, 0.22); | ||
| + | } | ||
| + | |||
| + | .av-grillfest-download: | ||
| + | # | ||
| + | .av-popup-button: | ||
| + | transform: translateY(-1px); | ||
| + | filter: brightness(1.06); | ||
| + | } | ||
| - | .av-grillfest-overlay { | + | .av-popup-overlay { |
| position: fixed; | position: fixed; | ||
| - | z-index: | + | z-index: |
| inset: 0; | inset: 0; | ||
| display: grid; | display: grid; | ||
| place-items: | place-items: | ||
| - | | + | padding: |
| - | box-sizing: border-box; | + | background: rgba(0, 0, 0, 0.78); |
| - | | + | |
| - | color: #fff; | + | |
| - | background: | + | |
| - | radial-gradient( | + | |
| - | circle at 50% 85%, | + | |
| - | rgba(197, | + | |
| - | transparent 42% | + | |
| - | ), | + | |
| - | | + | |
| backdrop-filter: | backdrop-filter: | ||
| - | animation: av-overlay-in .6s ease both; | + | animation: av-overlay-in |
| } | } | ||
| - | .av-grillfest-overlay.av-grillfest-leaving | + | .av-popup-overlay.av-hide { |
| - | animation: av-overlay-out .7s ease both; | + | animation: av-overlay-out |
| } | } | ||
| - | .av-grillfest-stage { | + | .av-popup-box { |
| position: relative; | position: relative; | ||
| - | | + | width: min(920px, 96vw); |
| - | | + | |
| - | | + | |
| - | | + | |
| - | | + | |
| - | | + | |
| - | | + | radial-gradient(circle at 50% 102%, rgba(255, |
| - | | + | linear-gradient(145deg, |
| + | | ||
| box-shadow: | box-shadow: | ||
| - | 0 0 80px rgba(243,107,33,.3), | + | 0 0 38px rgba(255, 98, 0, 0.55), |
| - | | + | 0 28px 90px rgba(0, 0, 0, 0.75); |
| - | animation: | + | animation: av-popup-in 0.75s cubic-bezier(.2, |
| - | | + | |
| - | av-stage-glow 2s 1s ease-in-out infinite alternate; | + | |
| } | } | ||
| - | .av-grillfest-kicker | + | .av-popup-close { |
| - | | + | |
| - | | + | z-index: 4; |
| - | font-weight: | + | top: 0.85rem; |
| - | | + | right: 0.85rem; |
| - | | + | width: 44px; |
| + | height: 44px; | ||
| + | border: 2px solid rgba(255, 255, 255, 0.8); | ||
| + | | ||
| + | background: linear-gradient(135deg, #e31616, #8e0000); | ||
| + | color: #fff; | ||
| + | font-size: 1.7rem; | ||
| + | font-weight: | ||
| + | | ||
| + | | ||
| + | box-shadow: 0 0 18px rgba(255, 40, 0, 0.75); | ||
| } | } | ||
| - | .av-grillfest-stage h2 { | + | .av-popup-close: |
| - | | + | |
| - | color: #fff6d6; | + | |
| - | font-family: | + | |
| - | font-size: clamp(36px, 8vw, 76px); | + | |
| - | | + | |
| - | text-shadow: | + | |
| - | 0 2px 0 #8e2b13, | + | |
| - | 0 0 24px rgba(255,137,32,.55); | + | |
| } | } | ||
| - | .av-grillfest-overlay-date | + | .av-popup-inner { |
| - | | + | |
| - | | + | |
| - | | + | |
| - | | + | |
| - | | + | |
| } | } | ||
| - | .av-grillfest-stage p { | + | .av-popup-kicker |
| - | | + | |
| - | | + | |
| - | font-size: clamp(17px, 3vw, 23px); | + | text-transform: |
| - | | + | color: #ffd38a; |
| + | font-weight: 800; | ||
| + | | ||
| } | } | ||
| - | .av-grillfest-music-line { | + | .av-popup-title { |
| - | color: #ffe7a3; | + | margin: 0.2rem 0; |
| - | | + | font-size: clamp(2.6rem, |
| + | | ||
| + | color: #fff1b8; | ||
| + | | ||
| + | 0 0 10px rgba(255, 172, 64, 0.9), | ||
| + | 0 4px 0 rgba(116, 26, 0, 0.9); | ||
| } | } | ||
| - | .av-grillfest-sound { | + | .av-popup-date { |
| - | | + | |
| - | | + | |
| - | | + | |
| - | background: var(--av-gold); | + | |
| border-radius: | border-radius: | ||
| - | font-weight: | + | |
| - | | + | color: #fff; |
| + | font-family: | ||
| + | | ||
| + | | ||
| } | } | ||
| - | .av-grillfest-sound: | + | .av-popup-location { |
| - | .av-grillfest-sound:focus { | + | font-size: clamp(1.1rem, |
| - | | + | |
| } | } | ||
| - | .av-grillfest-sound: | + | .av-popup-program |
| - | | + | |
| - | | + | |
| + | text-align: left; | ||
| + | font-family: | ||
| + | line-height: 1.45; | ||
| } | } | ||
| - | .av-grillfest-close { | + | .av-popup-program div { |
| - | | + | |
| - | top: 13px; | + | padding: 0.42rem 0.6rem; |
| - | right: 13px; | + | |
| - | width: 42px; | + | background: rgba(255, 255, 255, 0.1); |
| - | height: 42px; | + | |
| - | padding: 0; | + | |
| - | | + | |
| - | background: | + | |
| - | border: 1px solid rgba(255, | + | |
| - | border-radius: | + | |
| - | font-size: 25px; | + | |
| - | line-height: | + | |
| } | } | ||
| - | .av-grillfest-close:hover, | + | .av-popup-flyer-callout { |
| - | .av-grillfest-close:focus { | + | margin: 1.1rem auto 0; |
| - | | + | max-width: 680px; |
| + | padding: 1rem; | ||
| + | border-radius: | ||
| + | background: | ||
| + | linear-gradient(135deg, rgba(255, 210, 119, 0.22), rgba(255, 113, 0, 0.2)); | ||
| + | | ||
| + | font-family: Arial, sans-serif; | ||
| + | font-weight: 800; | ||
| + | | ||
| + | box-shadow: inset 0 0 18px rgba(255, 170, 40, 0.16); | ||
| } | } | ||
| - | | + | |
| + | display: flex; | ||
| + | justify-content: | ||
| + | flex-wrap: wrap; | ||
| + | gap: 0.75rem; | ||
| + | margin-top: 1rem; | ||
| + | } | ||
| - | .av-grillfest-flames | + | .av-fire-stage { |
| position: absolute; | position: absolute; | ||
| - | z-index: | + | z-index: |
| - | right: -4%; | + | left: 0; |
| - | bottom: -35px; | + | |
| - | left: -4%; | + | |
| - | | + | height: |
| - | | + | |
| - | justify-content: | + | |
| - | height: | + | |
| - | overflow: visible; | + | |
| pointer-events: | pointer-events: | ||
| - | filter: contrast(1.12) saturate(1.25); | + | filter: contrast(1.22) saturate(1.5); |
| } | } | ||
| - | .av-grillfest-flames::before { | + | .av-fire-stage::before { |
| content: ""; | content: ""; | ||
| position: absolute; | position: absolute; | ||
| - | right: | + | |
| - | bottom: | + | |
| - | | + | bottom: |
| - | | + | |
| - | background: radial-gradient( | + | |
| - | | + | background: |
| - | | + | |
| - | | + | filter: blur(15px); |
| - | | + | animation: av-fire-glow 1.2s infinite alternate |
| - | | + | |
| - | | + | |
| - | filter: blur(28px); | + | |
| - | animation: av-fire-glow 1.4s ease-in-out | + | |
| } | } | ||
| - | .av-grillfest-flame { | + | .av-flame { |
| - | position: relative; | + | |
| - | width: clamp(48px, 8vw, 105px); | + | |
| - | height: clamp(145px, | + | |
| - | margin: 0 clamp(-18px, | + | |
| - | background: radial-gradient( | + | |
| - | ellipse at 50% 88%, | + | |
| - | #fffbd0 0%, | + | |
| - | #ffe26a 10%, | + | |
| - | #ff9b20 30%, | + | |
| - | #f04416 57%, | + | |
| - | #a90f0b 76%, | + | |
| - | transparent 78% | + | |
| - | ); | + | |
| - | clip-path: polygon( | + | |
| - | 50% 0%, | + | |
| - | 64% 18%, | + | |
| - | 72% 34%, | + | |
| - | 91% 58%, | + | |
| - | 85% 81%, | + | |
| - | 69% 96%, | + | |
| - | 50% 100%, | + | |
| - | 27% 96%, | + | |
| - | 10% 78%, | + | |
| - | 16% 54%, | + | |
| - | 36% 31% | + | |
| - | ); | + | |
| - | opacity: .92; | + | |
| - | transform-origin: | + | |
| - | filter: | + | |
| - | blur(.4px) | + | |
| - | drop-shadow(0 0 8px rgba(255, | + | |
| - | drop-shadow(0 0 20px rgba(255, | + | |
| - | animation: av-real-flame 1.05s ease-in-out infinite alternate; | + | |
| - | } | + | |
| - | + | ||
| - | .av-grillfest-flame:: | + | |
| - | content: ""; | + | |
| position: absolute; | position: absolute; | ||
| - | right: 25%; | ||
| bottom: 0; | bottom: 0; | ||
| - | left: 25%; | + | left: 50%; |
| - | height: | + | width: 72px; |
| - | | + | height: |
| - | to top, | + | transform-origin: |
| - | # | + | |
| - | #ffe96f 28%, | + | clip-path: polygon(50% 0%, 66% 22%, 75% 43%, 100% 76%, 72% 100%, 50% 91%, 28% 100%, 0% 76%, 25% 42%, 34% 21%); |
| - | #ffad24 63%, | + | |
| - | rgba(255,96,20,.2) 100% | + | |
| - | | + | |
| - | | + | |
| - | | + | |
| - | 75% 35%, | + | |
| - | | + | opacity: 0.92; |
| - | 72% 94%, | + | filter: blur(0.25px) drop-shadow(0 0 12px rgba(255, 98, 0, 0.9)); |
| - | | + | animation: av-real-flame |
| - | 23% 92%, | + | |
| - | | + | |
| - | 35% 33% | + | |
| - | | + | |
| - | filter: blur(1px); | + | |
| - | animation: av-inner-flame .72s ease-in-out | + | |
| } | } | ||
| - | .av-grillfest-flame::after { | + | .av-flame::before |
| content: ""; | content: ""; | ||
| position: absolute; | position: absolute; | ||
| - | | + | |
| - | | + | |
| - | | + | |
| - | height: | + | height: |
| - | | + | |
| - | to top, | + | clip-path: polygon(50% 0%, 66% 26%, 78% 62%, 63% 100%, 50% 86%, 37% 100%, 22% 62%, 34% 26%); |
| - | #fff, | + | |
| - | #fff8b0 48%, | + | radial-gradient(circle at 50% 70%, #fff8bc 0 16%, #ffd04a 28%, #ff8a00 58%, transparent 72%); |
| - | rgba(255, | + | |
| - | | + | |
| - | | + | |
| - | filter: blur(2px); | + | |
| - | | + | |
| } | } | ||
| - | .av-grillfest-flame: | + | .av-ember { |
| - | height: clamp(105px, | + | |
| - | animation-duration: | + | |
| - | animation-delay: | + | |
| - | } | + | |
| - | + | ||
| - | .av-grillfest-flame: | + | |
| - | height: clamp(170px, | + | |
| - | animation-duration: | + | |
| - | animation-delay: | + | |
| - | } | + | |
| - | + | ||
| - | .av-grillfest-flame: | + | |
| - | width: clamp(35px, 6vw, 78px); | + | |
| - | height: clamp(85px, 19vh, 205px); | + | |
| - | animation-duration: | + | |
| - | animation-delay: | + | |
| - | } | + | |
| - | + | ||
| - | .av-grillfest-flame: | + | |
| - | opacity: .75; | + | |
| - | filter: | + | |
| - | blur(1.4px) | + | |
| - | drop-shadow(0 0 16px rgba(255, | + | |
| - | } | + | |
| - | + | ||
| - | /* Aufsteigende Glut */ | + | |
| - | + | ||
| - | .av-grillfest-embers | + | |
| position: absolute; | position: absolute; | ||
| - | | + | |
| - | | + | |
| - | overflow: hidden; | + | width: |
| - | pointer-events: | + | height: |
| - | } | + | |
| - | + | ||
| - | .av-grillfest-ember { | + | |
| - | position: absolute; | + | |
| - | bottom: 2%; | + | |
| - | width: | + | |
| - | height: | + | |
| - | background: #ffd45c; | + | |
| border-radius: | border-radius: | ||
| - | box-shadow: | + | |
| - | 0 0 5px #fff4a5, | + | |
| - | | + | |
| opacity: 0; | opacity: 0; | ||
| - | animation: av-ember-rise | + | animation: av-ember-rise |
| } | } | ||
| - | | + | |
| - | | + | |
| - | .av-grillfest-ember: | + | |
| - | .av-grillfest-ember: | + | |
| - | .av-grillfest-ember: | + | |
| - | .av-grillfest-ember: | + | |
| - | | + | |
| - | .av-grillfest-ember: | + | |
| - | .av-grillfest-ember: | + | |
| - | .av-grillfest-ember: | + | |
| - | .av-grillfest-ember: | + | |
| - | .av-grillfest-ember: | + | |
| - | + | ||
| - | .av-grillfest-ember: | + | |
| - | width: 7px; | + | |
| - | height: 7px; | + | |
| } | } | ||
| - | | + | |
| - | + | | |
| - | .av-grillfest-notes { | + | transform: scale(1); |
| - | | + | box-shadow: 0 8px 18px rgba(148, 42, 0, 0.28); |
| - | z-index: 4; | + | |
| - | | + | |
| - | | + | transform: scale(1.035); |
| - | | + | box-shadow: 0 12px 30px rgba(255, 104, 0, 0.46); |
| + | } | ||
| } | } | ||
| - | |||
| - | .av-grillfest-note { | ||
| - | position: absolute; | ||
| - | bottom: 10%; | ||
| - | color: #ffe27a; | ||
| - | font-size: clamp(25px, 5vw, 52px); | ||
| - | opacity: 0; | ||
| - | animation: av-note-rise 4s linear infinite; | ||
| - | } | ||
| - | |||
| - | .av-grillfest-note: | ||
| - | left: 8%; | ||
| - | animation-delay: | ||
| - | } | ||
| - | |||
| - | .av-grillfest-note: | ||
| - | left: 23%; | ||
| - | animation-delay: | ||
| - | } | ||
| - | |||
| - | .av-grillfest-note: | ||
| - | right: 22%; | ||
| - | animation-delay: | ||
| - | } | ||
| - | |||
| - | .av-grillfest-note: | ||
| - | right: 7%; | ||
| - | animation-delay: | ||
| - | } | ||
| - | |||
| - | /* Animationen */ | ||
| @keyframes av-overlay-in { | @keyframes av-overlay-in { | ||
| from { opacity: 0; } | from { opacity: 0; } | ||
| - | to | + | to { opacity: 1; } |
| } | } | ||
| @keyframes av-overlay-out { | @keyframes av-overlay-out { | ||
| - | | + | to { opacity: 0; } |
| - | | + | |
| } | } | ||
| - | @keyframes av-stage-in { | + | @keyframes av-popup-in { |
| - | from { | + | from { transform: translateY(28px) scale(0.95); opacity: 0; } |
| - | opacity: 0; | + | to { transform: translateY(0) scale(1); opacity: 1; } |
| - | | + | |
| - | } | + | |
| - | to { | + | |
| - | opacity: 1; | + | |
| - | transform: | + | |
| - | } | + | |
| - | } | + | |
| - | + | ||
| - | @keyframes av-stage-glow { | + | |
| - | from { | + | |
| - | box-shadow: | + | |
| - | | + | |
| - | inset 0 0 35px rgba(255, | + | |
| - | | + | |
| - | to { | + | |
| - | box-shadow: | + | |
| - | | + | |
| - | inset 0 0 50px rgba(255, | + | |
| - | | + | |
| } | } | ||
| @keyframes av-real-flame { | @keyframes av-real-flame { | ||
| - | 0% { | + | 0% { transform: |
| - | | + | 35% { transform: |
| - | | + | 70% { transform: |
| - | 35% { | + | 100% { transform: |
| - | | + | |
| - | | + | |
| - | 70% { | + | |
| - | | + | |
| - | | + | |
| - | 100% { | + | |
| - | | + | |
| - | | + | |
| } | } | ||
| @keyframes av-inner-flame { | @keyframes av-inner-flame { | ||
| - | from { | + | from { transform: |
| - | | + | to { transform: |
| - | | + | |
| - | to { | + | |
| - | | + | |
| - | | + | |
| } | } | ||
| @keyframes av-fire-glow { | @keyframes av-fire-glow { | ||
| - | from { | + | from { opacity: |
| - | | + | to { opacity: |
| - | | + | |
| - | | + | |
| - | to { | + | |
| - | | + | |
| - | | + | |
| - | | + | |
| } | } | ||
| @keyframes av-ember-rise { | @keyframes av-ember-rise { | ||
| - | 0% { | + | 0% { transform: translate(0, |
| - | opacity: 0; | + | |
| - | | + | 100% { transform: translate(var(--dx), -155px) scale(0.15); opacity: 0; } |
| - | } | + | |
| - | 12% { | + | |
| - | | + | |
| - | | + | |
| - | | + | |
| - | | + | |
| - | | + | |
| - | 100% { | + | |
| - | opacity: 0; | + | |
| - | | + | |
| - | } | + | |
| - | } | + | |
| - | + | ||
| - | @keyframes av-note-rise { | + | |
| - | 0% { | + | |
| - | | + | |
| - | transform: translateY(0) rotate(-12deg); | + | |
| - | } | + | |
| - | 20% { | + | |
| - | opacity: .9; | + | |
| - | } | + | |
| - | 80% { | + | |
| - | opacity: .6; | + | |
| - | } | + | |
| - | 100% { | + | |
| - | opacity: 0; | + | |
| - | transform: translateY(-75vh) rotate(18deg); | + | |
| - | } | + | |
| - | } | + | |
| - | + | ||
| - | @media (max-width: 620px) { | + | |
| - | .av-grillfest-card { | + | |
| - | display: block; | + | |
| - | padding: 20px; | + | |
| - | text-align: center; | + | |
| - | } | + | |
| - | + | ||
| - | .av-grillfest-card-fire { | + | |
| - | margin-bottom: | + | |
| - | } | + | |
| - | + | ||
| - | .av-grillfest-stage { | + | |
| - | padding: 45px 18px 28px; | + | |
| - | } | + | |
| - | + | ||
| - | .av-grillfest-flames { | + | |
| - | bottom: -45px; | + | |
| - | height: 30vh; | + | |
| - | | + | |
| } | } | ||
| @media (prefers-reduced-motion: | @media (prefers-reduced-motion: | ||
| - | .av-grillfest-overlay, | + | .av-popup-overlay, |
| - | .av-grillfest-stage, | + | .av-popup-box, |
| - | .av-grillfest-flame, | + | .av-flame, |
| - | .av-grillfest-flame:: | + | .av-ember, |
| - | .av-grillfest-ember, | + | .av-fire-stage:: |
| - | .av-grillfest-note, | + | .av-grillfest-card-fire, |
| - | .av-grillfest-flames:: | + | .av-download-prominent |
| animation: none !important; | animation: none !important; | ||
| - | } | ||
| - | |||
| - | .av-grillfest-ember, | ||
| - | .av-grillfest-note { | ||
| - | display: none; | ||
| } | } | ||
| } | } | ||
| Zeile 611: | Zeile 437: | ||
| < | < | ||
| (function () { | (function () { | ||
| - | "use strict"; | ||
| - | |||
| var root = document.getElementById(" | var root = document.getElementById(" | ||
| + | if (!root || root.getAttribute(" | ||
| + | root.setAttribute(" | ||
| - | | + | |
| - | return; | + | |
| - | | + | |
| - | | + | |
| + | if (!overlay) return; | ||
| - | var closeTimer = null; | + | document.removeEventListener(" |
| - | var previousOverflow | + | |
| - | var audioContext = null; | + | |
| - | var escapeHandler = null; | + | |
| - | function playMusic(button) { | + | |
| - | | + | |
| - | | + | |
| - | | + | |
| - | | + | |
| - | | + | oldOverlay.parentNode.removeChild(oldOverlay); |
| - | } | + | |
| + | | ||
| + | | ||
| - | audioContext = audioContext || new AudioContextClass(); | + | function onEscape(event) { |
| - | | + | |
| + | } | ||
| - | | + | function addFlames(stage) { |
| - | [392.00, 0.00], | + | |
| - | [440.00, 0.28], | + | |
| - | [493.88, 0.56], | + | |
| - | [523.25, 0.84], | + | |
| - | [493.88, 1.20], | + | |
| - | [440.00, 1.48], | + | |
| - | [392.00, 1.76], | + | |
| - | [523.25, 2.12], | + | |
| - | [587.33, 2.48], | + | |
| - | [523.25, 2.84] | + | |
| - | | + | |
| - | | + | |
| - | var oscillator | + | var flame = document.createElement(" |
| - | | + | |
| - | var start = audioContext.currentTime + note[1]; | + | |
| - | + | | |
| - | oscillator.type = "triangle"; | + | |
| - | | + | |
| - | + | | |
| - | gain.gain.setValueAtTime(0.0001, start); | + | |
| - | | + | |
| - | 0.12, | + | |
| - | start + 0.04 | + | |
| - | | + | |
| - | | + | |
| - | 0.0001, | + | |
| - | start + 0.25 | + | |
| - | ); | + | |
| - | + | ||
| - | oscillator.connect(gain); | + | |
| - | | + | |
| - | + | ||
| - | | + | |
| - | | + | |
| }); | }); | ||
| - | | + | |
| - | button.disabled = true; | + | var ember = document.createElement("span" |
| - | } | + | ember.className = "av-ember"; |
| - | + | | |
| - | function hideOverlay() { | + | |
| - | var overlay | + | |
| - | | + | |
| - | + | stage.appendChild(ember); | |
| - | if ( | + | |
| - | | + | |
| - | | + | |
| - | ) { | + | |
| - | | + | |
| } | } | ||
| - | |||
| - | window.clearTimeout(closeTimer); | ||
| - | overlay.classList.add(" | ||
| - | |||
| - | if (escapeHandler) { | ||
| - | document.removeEventListener(" | ||
| - | escapeHandler = null; | ||
| - | } | ||
| - | |||
| - | window.setTimeout(function () { | ||
| - | overlay.remove(); | ||
| - | document.body.style.overflow = previousOverflow; | ||
| - | }, 700); | ||
| } | } | ||
| - | function | + | function |
| - | var result = ""; | + | if (overlay) return; |
| - | + | ||
| - | for (var i = 0; i < amount; i++) { | + | |
| - | result += '< | + | |
| - | } | + | |
| - | + | ||
| - | return result; | + | |
| - | } | + | |
| - | + | ||
| - | function showOverlay() { | + | |
| - | if (document.querySelector(" | + | |
| - | | + | |
| - | } | + | |
| - | + | ||
| - | previousOverflow = document.body.style.overflow; | + | |
| - | document.body.style.overflow = " | + | |
| - | + | ||
| - | var overlay = document.createElement(" | + | |
| - | overlay.className | + | overlay |
| + | overlay.id | ||
| + | overlay.className = " | ||
| overlay.setAttribute(" | overlay.setAttribute(" | ||
| overlay.setAttribute(" | overlay.setAttribute(" | ||
| - | overlay.setAttribute( | + | overlay.setAttribute(" |
| - | | + | |
| - | | + | |
| - | | + | |
| overlay.innerHTML = | overlay.innerHTML = | ||
| - | '< | + | '< |
| - | '<span class=" | + | '< |
| - | '<span class=" | + | '<div class=" |
| - | '<span class=" | + | '< |
| - | '<span class=" | + | '<div class=" |
| - | '</ | + | '<div class=" |
| - | + | '<div class=" | |
| - | '< | + | '<div class=" |
| - | '<button | + | '< |
| - | 'type=" | + | '< |
| - | | + | '< |
| - | + | '< | |
| - | | + | '< |
| - | 'Herzliche Einladung' + | + | '< |
| + | '< | ||
| + | '</ | ||
| + | | ||
| + | ' | ||
| + | | ||
| + | '< | ||
| + | '<a class="av-popup-button | ||
| + | '<button type=" | ||
| + | '</ | ||
| '</ | '</ | ||
| - | + | | |
| - | '< | + | |
| - | ' | + | |
| - | '</ | + | |
| - | + | ||
| - | | + | |
| - | '8. & 9. August 2026' + | + | |
| - | '</ | + | |
| - | + | ||
| - | '< | + | |
| - | 'an der AV-Hütte auf dem ' + | + | |
| - | '< | + | |
| - | '</ | + | |
| - | + | ||
| - | '< | + | |
| - | + | ||
| - | '<p class=" | + | |
| - | 'Für Musik und das leibliche Wohl ist gesorgt!' | + | |
| - | '</ | + | |
| - | + | ||
| - | '< | + | |
| - | '♫ Musik starten' | + | |
| - | '</ | + | |
| - | '</ | + | |
| - | + | ||
| - | '< | + | |
| - | createRepeatedElement(" | + | |
| - | '</ | + | |
| - | + | ||
| - | '< | + | |
| - | createRepeatedElement(" | + | |
| '</ | '</ | ||
| document.body.appendChild(overlay); | document.body.appendChild(overlay); | ||
| + | document.body.style.overflow = " | ||
| - | overlay | + | |
| - | | + | var closeMain = overlay.querySelector(".av-close-main" |
| - | .addEventListener("click", hideOverlay); | + | var stage = overlay.querySelector(" |
| - | | + | |
| - | .querySelector(".av-grillfest-sound") | + | |
| - | .addEventListener(" | + | closeX.addEventListener("click", closePopup); |
| - | playMusic(this); | + | |
| - | }); | + | |
| overlay.addEventListener(" | overlay.addEventListener(" | ||
| - | if (event.target === overlay) | + | if (event.target === overlay) |
| - | hideOverlay(); | + | |
| - | } | + | |
| }); | }); | ||
| - | | + | document.addEventListener(" |
| - | if (event.key === " | + | |
| - | hideOverlay(); | + | |
| - | } | + | |
| - | }; | + | |
| - | + | ||
| - | | + | |
| - | + | ||
| - | | + | |
| - | .querySelector(" | + | |
| - | | + | |
| - | + | ||
| - | /* Automatisch nach 8,5 Sekunden ausblenden */ | + | |
| - | closeTimer = window.setTimeout(hideOverlay, | + | |
| } | } | ||
| - | | + | |
| - | | + | if (replay) replay.addEventListener(" |
| - | .addEventListener(" | + | |
| - | | + | setTimeout(showPopup, 500); |
| - | window.setTimeout(showOverlay, 500); | + | |
| })(); | })(); | ||
| </ | </ | ||
| + | <!-- Grillfest AV-Hütte 2026 – Ende --> | ||
| <!-- ------------------------------------------------------------------------------------------------------------------------ --> | <!-- ------------------------------------------------------------------------------------------------------------------------ --> | ||
| </ | </ | ||
| + | |||
| + | |||
| <WRAP centeralign> | <WRAP centeralign> | ||
| Zeile 870: | Zeile 603: | ||
| ++++ | ++++ | ||
| - | {{htmlmetatags>metatag-robots=() | + | <html> |
| - | metatag-keywords=(albverein, | + | <meta property="og:image" content="https:// |
| - | metatag-description=(Albverein Waldenburg) | + | </ |
| - | metatag-media-og:image=(: | + | |
| - | metatag-og: | + | |
| - | }} | + | |
start.1781896704.txt.gz · Zuletzt geändert: von dfrey