Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

--- start [2026/06/19 18:47] – dfrey
+++ start [2026/07/29 08:10] (aktuell) – dfrey
@@ Zeile 1: / Zeile 1: @@
 {{img:huette:avh1.png?nolink|}}
 <html>
 <!-- ------------------------------------------------------------------------------------------------------------------------ -->
-<div id="av-grillfest-2026">
+<!-- Grillfest AV-Hütte 2026 – Anfang -->
-  <section class="av-grillfest-card" aria-labelledby="av-grillfest-title">
+<div id="av-grillfest-2026" class="av-grillfest-card">
-    <div class="av-grillfest-card-fire" aria-hidden="true">🔥</div>
+  <div class="av-grillfest-card-fire">🔥</div>
+  <div class="av-grillfest-card-content">
-    <div>
+    <div class="av-grillfest-kicker">Schwäbischer Albverein Waldenburg</div>
-      <div class="av-grillfest-card-date">8. &amp; 9. August 2026</div>
+    <h2>Grillfest auf dem Theresienberg</h2>
+    <p class="av-grillfest-date">08.08. bis 09.08.2026</p>
-      <h2 id="av-grillfest-title">
+    <p>
-        Grillfest auf dem Theresienberg
+      Zwei Tage Grillfest bei uns auf dem Theresienberg in Waldenburg:
-      </h2>
+      Samstag gemütliche Hocketse mit Live-Musik und Barbetrieb, Sonntag musikalischer
+      Weißwurst-Frühschoppen, Kaffee & Kuchen und Zaubershow für Groß und Klein.
-      <p>
+    </p>
-        Wir laden herzlich zum Grillfest an unserer AV-Hütte ein:
+    <p class="av-grillfest-food">
-        <strong>Samstagabend und Sonntag.</strong>
+      Spezialitäten vom Grill, Maultaschen, Kartoffelsalat, geräucherte Forellen,
-      </p>
+      frisch gezapftes Fassbier, Hohenloher Weine und alkoholfreie Getränke.
+    </p>
-      <p class="av-grillfest-card-promise">
+    <div class="av-grillfest-actions">
-        🎵 Für Musik und das leibliche Wohl ist bestens gesorgt!
+      <a class="av-grillfest-download av-download-prominent" href="https://xn--avhtte-5ya.de/lib/exe/fetch.php?media=img:public:av_grillfest_2026_flyer.pdf" target="_blank" rel="noopener">
-      </p>
+        📄 Jetzt Flyer herunterladen
+      </a>
-      <button type="button" class="av-grillfest-replay">
+      <button type="button" id="av-grillfest-replay">Hinweis erneut anzeigen</button>
-        🔥 Ankündigung noch einmal ansehen
-      </button>
     </div>
-  </section>
+  </div>
 </div>
 <style>
-  #av-grillfest-2026 {
+  #av-grillfest-2026,
-    --av-green: #176b36;
+  #av-grillfest-popup-2026 {
-    --av-dark-green: #0d4724;
+    box-sizing: border-box;
-    --av-cream: #fff8e6;
+    font-family: Georgia, "Times New Roman", serif;
-    --av-gold: #ffc44d;
+  }
-    max-width: 900px;
+  #av-grillfest-2026 *,
-    margin: 28px auto;
+  #av-grillfest-popup-2026 * {
-    font-family: Arial, Helvetica, sans-serif;
+    box-sizing: border-box;
   }
-  /* Statischer Hinweis */
   .av-grillfest-card {
-    display: flex;
+    position: relative;
-    align-items: center;
+    overflow: hidden;
-    gap: 22px;
+    margin: 1.5rem 0;
-    box-sizing: border-box;
+    padding: 1.2rem;
-    padding: 25px 28px;
+    border-radius: 18px;
-    color: #183221;
+    border: 2px solid #0b7d23;
     background:
-      linear-gradient(120deg, rgba(255,255,255,.94), rgba(255,248,220,.96)),
+      radial-gradient(circle at top left, rgba(255, 192, 93, 0.55), transparent 35%),
-      var(--av-cream);
+      linear-gradient(135deg, #fff8df, #f7ecd0 45%, #e8f4d9);
-    border: 3px solid var(--av-green);
+    box-shadow: 0 12px 30px rgba(0, 60, 15, 0.22);
-    border-radius: 15px;
+    color: #2f210d;
-    box-shadow: 0 10px 28px rgba(16,66,34,.18);
+  }
+  .av-grillfest-card::before {
+    content: "";
+    position: absolute;
+    inset: 0;
+    background:
+      radial-gradient(circle at 88% 16%, rgba(255, 96, 0, 0.22), transparent 18%),
+      radial-gradient(circle at 8% 90%, rgba(0, 136, 0, 0.18), transparent 22%);
+    pointer-events: none;
   }
   .av-grillfest-card-fire {
-    flex: 0 0 auto;
+    position: absolute;
-    font-size: clamp(55px, 9vw, 90px);
+    right: 1rem;
-    filter: drop-shadow(0 8px 8px rgba(160,50,10,.2));
+    top: 0.7rem;
+    font-size: 2.5rem;
+    filter: drop-shadow(0 0 12px rgba(255, 86, 0, 0.65));
+    animation: av-card-fire 1.1s infinite alternate ease-in-out;
   }
-  .av-grillfest-card-date {
+  .av-grillfest-card-content {
-    display: inline-block;
+    position: relative;
-    padding: 5px 12px;
+    max-width: 900px;
-    color: #fff;
+  }
-    background: var(--av-green);
-    border-radius: 999px;
+  .av-grillfest-kicker {
-    font-size: 15px;
+    font-family: Arial, sans-serif;
-    font-weight: bold;
+    text-transform: uppercase;
-    letter-spacing: .04em;
+    letter-spacing: 0.08em;
+    color: #0b7d23;
+    font-size: 0.78rem;
+    font-weight: 700;
   }
   .av-grillfest-card h2 {
-    margin: 9px 0 8px;
+    margin: 0.15rem 0 0.25rem;
-    color: var(--av-dark-green);
+    font-size: clamp(1.55rem, 3vw, 2.35rem);
-    font-family: Georgia, "Times New Roman", serif;
+    color: #7a2500;
-    font-size: clamp(25px, 4vw, 38px);
-    line-height: 1.1;
   }
-  .av-grillfest-card p {
+  .av-grillfest-date {
-    margin: 7px 0;
+    display: inline-block;
-    font-size: 17px;
+    margin: 0.25rem 0 0.8rem;
-    line-height: 1.55;
+    padding: 0.35rem 0.75rem;
+    border-radius: 999px;
+    background: #0b7d23;
+    color: #fff;
+    font-family: Arial, sans-serif;
+    font-weight: 700;
   }
-  .av-grillfest-card-promise {
+  .av-grillfest-food {
-    color: var(--av-dark-green);
+    font-weight: 700;
-    font-weight: bold;
   }
-  .av-grillfest-replay,
+  .av-grillfest-actions {
-  .av-grillfest-sound,
+    display: flex;
-  .av-grillfest-close {
+    flex-wrap: wrap;
+    gap: 0.7rem;
+    margin-top: 1rem;
+  }
+  .av-grillfest-download,
+  #av-grillfest-replay,
+  .av-popup-button {
+    appearance: none;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0.35rem;
     border: 0;
+    border-radius: 999px;
+    padding: 0.72rem 1.05rem;
+    font-family: Arial, sans-serif;
+    font-weight: 800;
+    text-decoration: none;
     cursor: pointer;
-    font: inherit;
+    transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
   }
-  .av-grillfest-replay {
+  .av-grillfest-download,
-    margin-top: 12px;
+  .av-popup-button.av-download {
-    padding: 9px 14px;
+    background: linear-gradient(135deg, #ff7a00, #b42a00);
-    color: #fff;
+    color: #fff !important;
-    background: var(--av-green);
+    box-shadow: 0 8px 18px rgba(148, 42, 0, 0.28);
-    border-radius: 7px;
-    font-weight: bold;
   }
-  .av-grillfest-replay:hover,
+  .av-download-prominent,
-  .av-grillfest-replay:focus {
+  .av-popup-button.av-download {
-    background: var(--av-dark-green);
+    font-size: 1.05rem;
+    padding: 0.9rem 1.35rem;
+    animation: av-download-pulse 1.8s infinite ease-in-out;
   }
-  /* Vollbild-Ankündigung */
+  #av-grillfest-replay,
+  .av-popup-button.av-close-main {
+    background: #0b7d23;
+    color: #fff;
+    box-shadow: 0 8px 18px rgba(0, 80, 25, 0.22);
+  }
+  .av-grillfest-download:hover,
+  #av-grillfest-replay:hover,
+  .av-popup-button:hover {
+    transform: translateY(-1px);
+    filter: brightness(1.06);
+  }
-  .av-grillfest-overlay {
+  .av-popup-overlay {
     position: fixed;
-    z-index: 2147483000;
+    z-index: 999999;
     inset: 0;
     display: grid;
     place-items: center;
-    overflow: hidden;
+    padding: 1rem;
-    box-sizing: border-box;
+    background: rgba(0, 0, 0, 0.78);
-    padding: 22px;
-    color: #fff;
-    background:
-      radial-gradient(
-        circle at 50% 85%,
-        rgba(197,45,20,.55),
-        transparent 42%
-      ),
-      rgba(4,10,6,.94);
     backdrop-filter: blur(4px);
-    animation: av-overlay-in .6s ease both;
+    animation: av-overlay-in 0.45s ease both;
   }
-  .av-grillfest-overlay.av-grillfest-leaving {
+  .av-popup-overlay.av-hide {
-    animation: av-overlay-out .7s ease both;
+    animation: av-overlay-out 0.55s ease both;
   }
-  .av-grillfest-stage {
+  .av-popup-box {
     position: relative;
-    z-index: 5;
+    width: min(920px, 96vw);
-    width: min(760px, 94vw);
+    max-height: 94vh;
-    box-sizing: border-box;
+    overflow: hidden;
-    padding: clamp(30px, 5vw, 48px);
+    border-radius: 28px;
-    text-align: center;
+    border: 2px solid rgba(255, 205, 120, 0.95);
-    background: rgba(14,37,21,.86);
+    background:
-    border: 2px solid rgba(255,196,77,.82);
+      radial-gradient(circle at 50% 102%, rgba(255, 95, 0, 0.38), transparent 36%),
-    border-radius: 22px;
+      linear-gradient(145deg, #2a1004, #581b00 42%, #18310e);
+    color: #fff8df;
     box-shadow:
-0 80px rgba(243,107,33,.3),
+0 38px rgba(255, 98, 0, 0.55),
-      inset 0 0 35px rgba(255,196,77,.08);
+ 28px 90px rgba(0, 0, 0, 0.75);
-    animation:
+    animation: av-popup-in 0.75s cubic-bezier(.2, .9, .2, 1.15) both;
-      av-stage-in .8s .15s cubic-bezier(.2,.8,.2,1) both,
-      av-stage-glow 2s 1s ease-in-out infinite alternate;
   }
-  .av-grillfest-kicker {
+  .av-popup-close {
-    color: var(--av-gold);
+    position: absolute;
-    font-size: clamp(15px, 3vw, 21px);
+    z-index: 4;
-    font-weight: bold;
+    top: 0.85rem;
-    letter-spacing: .18em;
+    right: 0.85rem;
-    text-transform: uppercase;
+    width: 44px;
+    height: 44px;
+    border: 2px solid rgba(255, 255, 255, 0.8);
+    border-radius: 50%;
+    background: linear-gradient(135deg, #e31616, #8e0000);
+    color: #fff;
+    font-size: 1.7rem;
+    font-weight: 900;
+    line-height: 1;
+    cursor: pointer;
+    box-shadow: 0 0 18px rgba(255, 40, 0, 0.75);
   }
-  .av-grillfest-stage h2 {
+  .av-popup-close:hover {
-    margin: 12px 0;
+    filter: brightness(1.12);
-    color: #fff6d6;
+    transform: scale(1.04);
-    font-family: Georgia, "Times New Roman", serif;
-    font-size: clamp(36px, 8vw, 76px);
-    line-height: .98;
-    text-shadow:
-2px 0 #8e2b13,
-0 24px rgba(255,137,32,.55);
   }
-  .av-grillfest-overlay-date {
+  .av-popup-inner {
-    margin: 10px 0 17px;
+    position: relative;
-    color: var(--av-gold);
+    z-index: 2;
-    font-family: Georgia, "Times New Roman", serif;
+    padding: clamp(1.4rem, 4vw, 2.6rem);
-    font-size: clamp(25px, 5vw, 43px);
+    padding-top: clamp(3.2rem, 6vw, 4rem);
-    font-weight: bold;
+    text-align: center;
   }
-  .av-grillfest-stage p {
+  .av-popup-kicker {
-    max-width: 650px;
+    font-family: Arial, sans-serif;
-    margin: 8px auto;
+    letter-spacing: 0.12em;
-    font-size: clamp(17px, 3vw, 23px);
+    text-transform: uppercase;
-    line-height: 1.45;
+    color: #ffd38a;
+    font-weight: 800;
+    font-size: 0.82rem;
   }
-  .av-grillfest-music-line {
+  .av-popup-title {
-    color: #ffe7a3;
+    margin: 0.2rem 0;
-    font-weight: bold;
+    font-size: clamp(2.6rem, 9vw, 6rem);
+    line-height: 0.92;
+    color: #fff1b8;
+    text-shadow:
+0 10px rgba(255, 172, 64, 0.9),
+4px 0 rgba(116, 26, 0, 0.9);
   }
-  .av-grillfest-sound {
+  .av-popup-date {
-    margin-top: 20px;
+    display: inline-block;
-    padding: 10px 18px;
+    margin: 0.9rem 0;
-    color: #322008;
+    padding: 0.45rem 1rem;
-    background: var(--av-gold);
     border-radius: 999px;
-    font-weight: bold;
+    background: rgba(11, 125, 35, 0.96);
-    box-shadow: 0 5px 18px rgba(0,0,0,.28);
+    color: #fff;
+    font-family: Arial, sans-serif;
+    font-weight: 900;
+    font-size: 1.15rem;
   }
-  .av-grillfest-sound:hover,
+  .av-popup-location {
-  .av-grillfest-sound:focus {
+    font-size: clamp(1.1rem, 3vw, 1.65rem);
-    background: #ffe18a;
+    font-weight: 700;
   }
-  .av-grillfest-sound:disabled {
+  .av-popup-program {
-    cursor: default;
+    margin: 1rem auto;
-    opacity: .82;
+    max-width: 720px;
+    text-align: left;
+    font-family: Arial, sans-serif;
+    line-height: 1.45;
   }
-  .av-grillfest-close {
+  .av-popup-program div {
-    position: absolute;
+    margin: 0.38rem 0;
-    top: 13px;
+    padding: 0.42rem 0.6rem;
-    right: 13px;
+    border-radius: 12px;
-    width: 42px;
+    background: rgba(255, 255, 255, 0.1);
-    height: 42px;
-    padding: 0;
-    color: #fff;
-    background: rgba(0,0,0,.38);
-    border: 1px solid rgba(255,255,255,.45);
-    border-radius: 50%;
-    font-size: 25px;
-    line-height: 38px;
   }
-  .av-grillfest-close:hover,
+  .av-popup-flyer-callout {
-  .av-grillfest-close:focus {
+    margin: 1.1rem auto 0;
-    background: rgba(180,40,15,.72);
+    max-width: 680px;
+    padding: 1rem;
+    border-radius: 18px;
+    background:
+      linear-gradient(135deg, rgba(255, 210, 119, 0.22), rgba(255, 113, 0, 0.2));
+    border: 1px solid rgba(255, 225, 160, 0.55);
+    font-family: Arial, sans-serif;
+    font-weight: 800;
+    color: #fff8df;
+    box-shadow: inset 0 0 18px rgba(255, 170, 40, 0.16);
   }
-  /* Realistischere Flammen */
+  .av-popup-actions {
+    display: flex;
+    justify-content: center;
+    flex-wrap: wrap;
+    gap: 0.75rem;
+    margin-top: 1rem;
+  }
-  .av-grillfest-flames {
+  .av-fire-stage {
     position: absolute;
-    z-index: 2;
+    z-index: 1;
-    right: -4%;
+    left: 0;
-    bottom: -35px;
+    right: 0;
-    left: -4%;
+    bottom: -8px;
-    display: flex;
+    height: 160px;
-    align-items: flex-end;
-    justify-content: center;
-    height: 38vh;
-    overflow: visible;
     pointer-events: none;
-    filter: contrast(1.12) saturate(1.25);
+    filter: contrast(1.22) saturate(1.5);
   }
-  .av-grillfest-flames::before {
+  .av-fire-stage::before {
     content: "";
     position: absolute;
-    right: 5%;
+    left: 12%;
-    bottom: 0;
+    right: 12%;
-    left: 5%;
+    bottom: 6px;
-    height: 55%;
+    height: 72px;
-    background: radial-gradient(
+    border-radius: 50%;
-      ellipse at center bottom,
+    background:
-      rgba(255,210,65,.75) 0%,
+      radial-gradient(ellipse at center, rgba(255, 239, 147, 0.8) 0%, rgba(255, 104, 0, 0.55) 35%, rgba(117, 18, 0, 0.18) 68%, transparent 72%);
-      rgba(255,91,20,.45) 32%,
+    filter: blur(15px);
-      rgba(190,24,10,.18) 58%,
+    animation: av-fire-glow 1.2s infinite alternate ease-in-out;
-      transparent 75%
-    );
-    filter: blur(28px);
-    animation: av-fire-glow 1.4s ease-in-out infinite alternate;
   }
-  .av-grillfest-flame {
+  .av-flame {
-    position: relative;
-    width: clamp(48px, 8vw, 105px);
-    height: clamp(145px, 31vh, 330px);
-    margin: 0 clamp(-18px, -1.5vw, -7px);
-    background: radial-gradient(
-      ellipse at 50% 88%,
-      #fffbd0 0%,
-      #ffe26a 10%,
-      #ff9b20 30%,
-      #f04416 57%,
-      #a90f0b 76%,
-      transparent 78%
-    );
-    clip-path: polygon(
-% 0%,
-% 18%,
-% 34%,
-% 58%,
-% 81%,
-% 96%,
-% 100%,
-% 96%,
-% 78%,
-% 54%,
-% 31%
-    );
-    opacity: .92;
-    transform-origin: 50% 100%;
-    filter:
-      blur(.4px)
-      drop-shadow(0 0 8px rgba(255,91,20,.9))
-      drop-shadow(0 0 20px rgba(255,45,10,.55));
-    animation: av-real-flame 1.05s ease-in-out infinite alternate;
-  }
-  .av-grillfest-flame::before {
-    content: "";
     position: absolute;
-    right: 25%;
     bottom: 0;
-    left: 25%;
+    left: 50%;
-    height: 70%;
+    width: 72px;
-    background: linear-gradient(
+    height: 132px;
-      to top,
+    transform-origin: 50% 100%;
-      #fffde3 0%,
+    border-radius: 56% 44% 54% 46% / 68% 62% 38% 32%;
-      #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%,
+    background:
-      rgba(255,96,20,.2) 100%
+      radial-gradient(circle at 52% 68%, #fff7a6 0 9%, transparent 18%),
-    );
+      radial-gradient(circle at 48% 76%, #ffd55c 0 22%, transparent 38%),
-    clip-path: polygon(
+      radial-gradient(circle at 47% 56%, #ff7b00 0 34%, transparent 55%),
-% 0%,
+      radial-gradient(circle at 52% 76%, #b71900 0 54%, transparent 72%);
-% 35%,
+    mix-blend-mode: screen;
-% 68%,
+    opacity: 0.92;
-% 94%,
+    filter: blur(0.25px) drop-shadow(0 0 12px rgba(255, 98, 0, 0.9));
-% 100%,
+    animation: av-real-flame 0.9s infinite ease-in-out;
-% 92%,
-% 65%,
-% 33%
-    );
-    filter: blur(1px);
-    animation: av-inner-flame .72s ease-in-out infinite alternate;
   }
-  .av-grillfest-flame::after {
+  .av-flame::before {
     content: "";
     position: absolute;
-    right: 38%;
+    left: 21%;
-    bottom: 1%;
+    top: 27%;
-    left: 38%;
+    width: 58%;
-    height: 35%;
+    height: 68%;
-    background: linear-gradient(
+    border-radius: 58% 42% 55% 45% / 68% 58% 42% 32%;
-      to top,
+    clip-path: polygon(50% 0%, 66% 26%, 78% 62%, 63% 100%, 50% 86%, 37% 100%, 22% 62%, 34% 26%);
-      #fff,
+    background:
-      #fff8b0 48%,
+      radial-gradient(circle at 50% 70%, #fff8bc 0 16%, #ffd04a 28%, #ff8a00 58%, transparent 72%);
-      rgba(255,210,50,0)
+    animation: av-inner-flame 0.72s infinite alternate ease-in-out;
-    );
-    border-radius: 50% 50% 30% 30%;
-    filter: blur(2px);
-    opacity: .9;
   }
-  .av-grillfest-flame:nth-child(2n) {
+  .av-ember {
-    height: clamp(105px, 22vh, 235px);
-    animation-duration: .78s;
-    animation-delay: -.45s;
-  }
-  .av-grillfest-flame:nth-child(3n) {
-    height: clamp(170px, 35vh, 365px);
-    animation-duration: 1.28s;
-    animation-delay: -.85s;
-  }
-  .av-grillfest-flame:nth-child(4n) {
-    width: clamp(35px, 6vw, 78px);
-    height: clamp(85px, 19vh, 205px);
-    animation-duration: .66s;
-    animation-delay: -.25s;
-  }
-  .av-grillfest-flame:nth-child(5n) {
-    opacity: .75;
-    filter:
-      blur(1.4px)
-      drop-shadow(0 0 16px rgba(255,65,10,.8));
-  }
-  /* Aufsteigende Glut */
-  .av-grillfest-embers {
     position: absolute;
-    z-index: 3;
+    bottom: 22px;
-    inset: 0;
+    left: 50%;
-    overflow: hidden;
+    width: 5px;
-    pointer-events: none;
+    height: 5px;
-  }
-  .av-grillfest-ember {
-    position: absolute;
-    bottom: 2%;
-    width: 4px;
-    height: 4px;
-    background: #ffd45c;
     border-radius: 50%;
-    box-shadow:
+    background: #ffd277;
-0 5px #fff4a5,
+    box-shadow: 0 0 12px #ff7a00;
-0 12px #ff6a16;
     opacity: 0;
-    animation: av-ember-rise 3.4s linear infinite;
+    animation: av-ember-rise 2.5s infinite ease-out;
   }
-  .av-grillfest-ember:nth-child(1)  { left: 8%;  animation-delay: -.3s; }
+  @keyframes av-card-fire {
-  .av-grillfest-ember:nth-child(2)  { left: 15%; animation-delay: -1.8s; }
+    from { transform: rotate(-4deg) scale(1); }
-  .av-grillfest-ember:nth-child(3)  { left: 22%; animation-delay: -.9s; }
+    to { transform: rotate(5deg) scale(1.13); }
-  .av-grillfest-ember:nth-child(4)  { left: 29%; animation-delay: -2.5s; }
-  .av-grillfest-ember:nth-child(5)  { left: 36%; animation-delay: -1.2s; }
-  .av-grillfest-ember:nth-child(6)  { left: 43%; animation-delay: -2.9s; }
-  .av-grillfest-ember:nth-child(7)  { left: 50%; animation-delay: -.5s; }
-  .av-grillfest-ember:nth-child(8)  { left: 57%; animation-delay: -2.1s; }
-  .av-grillfest-ember:nth-child(9)  { left: 64%; animation-delay: -1.4s; }
-  .av-grillfest-ember:nth-child(10) { left: 71%; animation-delay: -3.1s; }
-  .av-grillfest-ember:nth-child(11) { left: 78%; animation-delay: -.8s; }
-  .av-grillfest-ember:nth-child(12) { left: 85%; animation-delay: -2.3s; }
-  .av-grillfest-ember:nth-child(3n) {
-    width: 7px;
-    height: 7px;
   }
-  /* Musiknoten */
+  @keyframes av-download-pulse {
+%, 100% {
-  .av-grillfest-notes {
+      transform: scale(1);
-    position: absolute;
+      box-shadow: 0 8px 18px rgba(148, 42, 0, 0.28);
-    z-index: 4;
+    }
-    inset: 0;
+% {
-    overflow: hidden;
+      transform: scale(1.035);
-    pointer-events: none;
+      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:nth-child(1) {
-    left: 8%;
-    animation-delay: 0s;
-  }
-  .av-grillfest-note:nth-child(2) {
-    left: 23%;
-    animation-delay: 1.4s;
-  }
-  .av-grillfest-note:nth-child(3) {
-    right: 22%;
-    animation-delay: .7s;
-  }
-  .av-grillfest-note:nth-child(4) {
-    right: 7%;
-    animation-delay: 2.1s;
-  }
-  /* Animationen */
   @keyframes av-overlay-in {
     from { opacity: 0; }
-    to   { opacity: 1; }
+    to { opacity: 1; }
   }
   @keyframes av-overlay-out {
-    from { opacity: 1; }
+    to { opacity: 0; }
-    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; }
-      transform: scale(.72) translateY(35px);
-    }
-    to {
-      opacity: 1;
-      transform: scale(1) translateY(0);
-    }
-  }
-  @keyframes av-stage-glow {
-    from {
-      box-shadow:
- 0 55px rgba(243,107,33,.22),
-        inset 0 0 35px rgba(255,196,77,.08);
-    }
-    to {
-      box-shadow:
- 0 95px rgba(243,107,33,.42),
-        inset 0 0 50px rgba(255,196,77,.13);
-    }
   }
   @keyframes av-real-flame {
-% {
+% { transform: translateX(var(--x)) scaleX(0.92) scaleY(1) rotate(-3deg); opacity: 0.76; }
-      transform: scaleX(.78) scaleY(1.03) rotate(-4deg);
+% { transform: translateX(calc(var(--x) + 7px)) scaleX(1.08) scaleY(1.13) rotate(4deg); opacity: 0.98; }
-    }
+% { transform: translateX(calc(var(--x) - 5px)) scaleX(0.98) scaleY(0.96) rotate(-5deg); opacity: 0.86; }
-% {
+% { transform: translateX(calc(var(--x) + 3px)) scaleX(1.04) scaleY(1.08) rotate(2deg); opacity: 0.94; }
-      transform: scaleX(1.04) scaleY(.91) rotate(3deg);
-    }
-% {
-      transform: scaleX(.89) scaleY(1.08) rotate(-2deg);
-    }
-% {
-      transform: scaleX(1.12) scaleY(.87) rotate(5deg);
-    }
   }
   @keyframes av-inner-flame {
-    from {
+    from { transform: translateY(10px) scale(0.78, 0.9); opacity: 0.7; }
-      transform: translateX(-5%) scaleX(.78) scaleY(1.08);
+    to { transform: translateY(-7px) scale(1.03, 1.12); opacity: 1; }
-    }
-    to {
-      transform: translateX(6%) scaleX(1.15) scaleY(.84);
-    }
   }
   @keyframes av-fire-glow {
-    from {
+    from { opacity: 0.55; transform: scaleX(0.9); }
-      opacity: .62;
+    to { opacity: 0.95; transform: scaleX(1.08); }
-      transform: scaleX(.92);
-    }
-    to {
-      opacity: 1;
-      transform: scaleX(1.08);
-    }
   }
   @keyframes av-ember-rise {
-% {
+% { transform: translate(0, 0) scale(0.7); opacity: 0; }
-      opacity: 0;
+% { opacity: 1; }
-      transform: translate(0,0) scale(.5);
+% { transform: translate(var(--dx), -155px) scale(0.15); opacity: 0; }
-    }
-% {
-      opacity: 1;
-    }
-% {
-      opacity: .75;
-    }
-% {
-      opacity: 0;
-      transform: translate(35px,-70vh) scale(.15);
-    }
-  }
-  @keyframes av-note-rise {
-% {
-      opacity: 0;
-      transform: translateY(0) rotate(-12deg);
-    }
-% {
-      opacity: .9;
-    }
-% {
-      opacity: .6;
-    }
-% {
-      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: 5px;
-    }
-    .av-grillfest-stage {
-      padding: 45px 18px 28px;
-    }
-    .av-grillfest-flames {
-      bottom: -45px;
-      height: 30vh;
-    }
   }
   @media (prefers-reduced-motion: reduce) {
-    .av-grillfest-overlay,
+    .av-popup-overlay,
-    .av-grillfest-stage,
+    .av-popup-box,
-    .av-grillfest-flame,
+    .av-flame,
-    .av-grillfest-flame::before,
+    .av-ember,
-    .av-grillfest-ember,
+    .av-fire-stage::before,
-    .av-grillfest-note,
+    .av-grillfest-card-fire,
-    .av-grillfest-flames::before {
+    .av-download-prominent {
       animation: none !important;
-    }
-    .av-grillfest-ember,
-    .av-grillfest-note {
-      display: none;
     }
   }
@@ Zeile 611: / Zeile 437: @@
 <script>
 (function () {
-  "use strict";
   var root = document.getElementById("av-grillfest-2026");
+  if (!root || root.getAttribute("data-av-ready") === "1") return;
+  root.setAttribute("data-av-ready", "1");
-  if (!root || root.getAttribute("data-initialized") === "true") {
+  var flyerUrl = "https://xn--avhtte-5ya.de/lib/exe/fetch.php?media=img:public:av_grillfest_2026_flyer.pdf";
-    return;
+  var overlay = null;
-  }
-  root.setAttribute("data-initialized", "true");
+  function closePopup() {
+    if (!overlay) return;
-  var closeTimer = null;
+    document.removeEventListener("keydown", onEscape);
-  var previousOverflow = "";
+    document.body.style.overflow = "";
-  var audioContext = null;
+    overlay.classList.add("av-hide");
-  var escapeHandler = null;
-  function playMusic(button) {
+    var oldOverlay = overlay;
-    var AudioContextClass =
+    overlay = null;
-      window.AudioContext || window.webkitAudioContext;
-    if (!AudioContextClass) {
+    setTimeout(function () {
-      button.textContent = "Musik wird nicht unterstützt";
+      if (oldOverlay && oldOverlay.parentNode) {
-      return;
+        oldOverlay.parentNode.removeChild(oldOverlay);
-    }
+      }
+    }, 560);
+  }
-    audioContext = audioContext || new AudioContextClass();
+  function onEscape(event) {
-    audioContext.resume();
+    if (event.key === "Escape") closePopup();
+  }
-    var notes = [
+  function addFlames(stage) {
-      [392.00, 0.00],
+    var positions = [-300, -245, -195, -145, -95, -45, 0, 45, 95, 145, 195, 245, 300];
-      [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]
-    ];
-    notes.forEach(function (note) {
+    positions.forEach(function (pos, i) {
-      var oscillator = audioContext.createOscillator();
+      var flame = document.createElement("span");
-      var gain = audioContext.createGain();
+      flame.className = "av-flame";
-      var start = audioContext.currentTime + note[1];
+      flame.style.setProperty("--x", pos + "px");
+      flame.style.width = (58 + (i % 5) * 9) + "px";
-      oscillator.type = "triangle";
+      flame.style.height = (92 + (i % 6) * 12) + "px";
-      oscillator.frequency.value = note[0];
+      flame.style.animationDelay = (-i * 0.13) + "s";
+      flame.style.zIndex = String(20 - Math.abs(pos));
-      gain.gain.setValueAtTime(0.0001, start);
+      stage.appendChild(flame);
-      gain.gain.exponentialRampToValueAtTime(
-.12,
-        start + 0.04
-      );
-      gain.gain.exponentialRampToValueAtTime(
-.0001,
-        start + 0.25
-      );
-      oscillator.connect(gain);
-      gain.connect(audioContext.destination);
-      oscillator.start(start);
-      oscillator.stop(start + 0.27);
     });
-    button.textContent = "♫ Musik läuft";
+    for (var e = 0; e < 18; e++) {
-    button.disabled = true;
+      var ember = document.createElement("span");
-  }
+      ember.className = "av-ember";
+      ember.style.left = (28 + Math.random() * 44) + "%";
-  function hideOverlay() {
+      ember.style.setProperty("--dx", (-60 + Math.random() * 120) + "px");
-    var overlay =
+      ember.style.animationDelay = (-Math.random() * 2.4) + "s";
-      document.querySelector(".av-grillfest-overlay");
+      ember.style.animationDuration = (1.8 + Math.random() * 1.4) + "s";
+      stage.appendChild(ember);
-    if (
-      !overlay ||
-      overlay.classList.contains("av-grillfest-leaving")
-    ) {
-      return;
     }
-    window.clearTimeout(closeTimer);
-    overlay.classList.add("av-grillfest-leaving");
-    if (escapeHandler) {
-      document.removeEventListener("keydown", escapeHandler);
-      escapeHandler = null;
-    }
-    window.setTimeout(function () {
-      overlay.remove();
-      document.body.style.overflow = previousOverflow;
-    }, 700);
   }
-  function createRepeatedElement(className, amount) {
+  function showPopup() {
-    var result = "";
+    if (overlay) return;
-    for (var i = 0; i < amount; i++) {
-      result += '<span class="' + className + '"></span>';
-    }
-    return result;
-  }
-  function showOverlay() {
-    if (document.querySelector(".av-grillfest-overlay")) {
-      return;
-    }
-    previousOverflow = document.body.style.overflow;
-    document.body.style.overflow = "hidden";
-    var overlay = document.createElement("div");
-    overlay.className = "av-grillfest-overlay";
+    overlay = document.createElement("div");
+    overlay.id = "av-grillfest-popup-2026";
+    overlay.className = "av-popup-overlay";
     overlay.setAttribute("role", "dialog");
     overlay.setAttribute("aria-modal", "true");
-    overlay.setAttribute(
+    overlay.setAttribute("aria-label", "Einladung zum Grillfest");
-      "aria-labelledby",
-      "av-grillfest-overlay-title"
-    );
     overlay.innerHTML =
-      '<div class="av-grillfest-notes" aria-hidden="true">' +
+      '<div class="av-popup-box">' +
-        '<span class="av-grillfest-note">♪</span>' +
+        '<button type="button" class="av-popup-close" aria-label="Schließen">×</button>' +
-        '<span class="av-grillfest-note">♫</span>' +
+        '<div class="av-popup-inner">' +
-        '<span class="av-grillfest-note">♪</span>' +
+          '<div class="av-popup-kicker">Schwäbischer Albverein Waldenburg</div>' +
-        '<span class="av-grillfest-note">♬</span>' +
+          '<div class="av-popup-title">Grillfest</div>' +
-      '</div>' +
+          '<div class="av-popup-date">08.08. bis 09.08.2026</div>' +
+          '<div class="av-popup-location">Bei uns auf dem Theresienberg in Waldenburg</div>' +
-      '<div class="av-grillfest-stage">' +
+          '<div class="av-popup-program">' +
-        '<button class="av-grillfest-close" ' +
+            '<div><strong>Samstag ab 16:30 Uhr:</strong> gemütliche Hocketse an der Albvereins-Hütte und rund um den Grillplatz.</div>' +
-          'type="button" ' +
+            '<div><strong>Samstag ab 19:00 Uhr:</strong> Barbetrieb und Live-Musik mit der Waldenburger Newcomer Band „June“.</div>' +
-          'aria-label="Ankündigung schließen">×</button>' +
+            '<div><strong>Samstag ab 20:30 Uhr:</strong> Live-Musik mit den „Hohenloher Lieblingen“.</div>' +
+            '<div><strong>Sonntag ab 11:00 Uhr:</strong> musikalischer Weißwurst-Frühschoppen mit dem Musikverein Waldenburg.</div>' +
-        '<div class="av-grillfest-kicker">' +
+            '<div><strong>Sonntag ab 13:00 Uhr:</strong> Kaffee und große Kuchen- & Tortenauswahl.</div>' +
-          'Herzliche Einladung' +
+            '<div><strong>Sonntag ab 14:00 Uhr:</strong> Zaubershow für Groß und Klein mit „Hokus-Pokus mit Bernardo“.</div>' +
+            '<div><strong>An beiden Tagen:</strong> Spezialitäten vom Grill, Maultaschen, Forellen, Fassbier, Hohenloher Weine und Erfrischungsgetränke.</div>' +
+          '</div>' +
+          '<div class="av-popup-flyer-callout">' +
+            'Alle Programmpunkte, Zeiten und Details gibt es übersichtlich im offiziellen Flyer.' +
+          '</div>' +
+          '<div class="av-popup-actions">' +
+            '<a class="av-popup-button av-download" href="' + flyerUrl + '" target="_blank" rel="noopener">📄 Offiziellen Flyer herunterladen</a>' +
+            '<button type="button" class="av-popup-button av-close-main">Schließen</button>' +
+          '</div>' +
         '</div>' +
+        '<div class="av-fire-stage" aria-hidden="true"></div>' +
-        '<h2 id="av-grillfest-overlay-title">' +
-          'Grillfest' +
-        '</h2>' +
-        '<div class="av-grillfest-overlay-date">' +
-          '8. &amp; 9. August 2026' +
-        '</div>' +
-        '<p>' +
-          'an der AV-Hütte auf dem ' +
-          '<strong>Theresienberg</strong>' +
-        '</p>' +
-        '<p><strong>Samstagabend und Sonntag</strong></p>' +
-        '<p class="av-grillfest-music-line">' +
-          'Für Musik und das leibliche Wohl ist gesorgt!' +
-        '</p>' +
-        '<button class="av-grillfest-sound" type="button">' +
-          '♫ Musik starten' +
-        '</button>' +
-      '</div>' +
-      '<div class="av-grillfest-flames" aria-hidden="true">' +
-        createRepeatedElement("av-grillfest-flame", 15) +
-      '</div>' +
-      '<div class="av-grillfest-embers" aria-hidden="true">' +
-        createRepeatedElement("av-grillfest-ember", 12) +
       '</div>';
     document.body.appendChild(overlay);
+    document.body.style.overflow = "hidden";
-    overlay
+    var closeX = overlay.querySelector(".av-popup-close");
-      .querySelector(".av-grillfest-close")
+    var closeMain = overlay.querySelector(".av-close-main");
-      .addEventListener("click", hideOverlay);
+    var stage = overlay.querySelector(".av-fire-stage");
-    overlay
+    addFlames(stage);
-      .querySelector(".av-grillfest-sound")
-      .addEventListener("click", function () {
+    closeX.addEventListener("click", closePopup);
-        playMusic(this);
+    closeMain.addEventListener("click", closePopup);
-      });
     overlay.addEventListener("click", function (event) {
-      if (event.target === overlay) {
+      if (event.target === overlay) closePopup();
-        hideOverlay();
-      }
     });
-    escapeHandler = function (event) {
+    document.addEventListener("keydown", onEscape);
-      if (event.key === "Escape") {
+    closeX.focus();
-        hideOverlay();
-      }
-    };
-    document.addEventListener("keydown", escapeHandler);
-    overlay
-      .querySelector(".av-grillfest-close")
-      .focus();
-    /* Automatisch nach 8,5 Sekunden ausblenden */
-    closeTimer = window.setTimeout(hideOverlay, 8500);
   }
-  root
+  var replay = document.getElementById("av-grillfest-replay");
-    .querySelector(".av-grillfest-replay")
+  if (replay) replay.addEventListener("click", showPopup);
-    .addEventListener("click", showOverlay);
-  /* Animation kurz nach dem Laden starten */
+  setTimeout(showPopup, 500);
-  window.setTimeout(showOverlay, 500);
 })();
 </script>
+<!-- Grillfest AV-Hütte 2026 – Ende -->
 <!-- ------------------------------------------------------------------------------------------------------------------------ -->
 </html>
 <WRAP centeralign>
@@ Zeile 870: / Zeile 603: @@
  ++++
+<html>
+<meta property="og:image" content="https://www.xn--avhtte-5ya.de/lib/exe/fetch.php?media=img:huette:avh1.png" />
+</html>