Benutzer-Werkzeuge

Webseiten-Werkzeuge

Sie befinden sich hier: start
start

Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

Link zu dieser Vergleichsansicht

Beide Seiten der vorigen RevisionVorhergehende Überarbeitung
Nächste Überarbeitung		Vorhergehende Überarbeitung
start [2026/03/30 11:41] – dfreystart [2026/06/19 19:23] (aktuell) – dfrey
Zeile 1: Zeile 1:
-{{img:huette:huette4.jpg?nolink|}}+{{img:huette:avh1.png?nolink|}} 
 + 
 +<html> 
 +<!-- ------------------------------------------------------------------------------------------------------------------------ --> 
 +<div id="av-grillfest-2026"> 
 +  <section class="av-grillfest-card" aria-labelledby="av-grillfest-title"> 
 +    <div class="av-grillfest-card-fire" aria-hidden="true">🔥</div> 
 + 
 +    <div> 
 +      <div class="av-grillfest-card-date">8. &amp; 9. August 2026</div> 
 + 
 +      <h2 id="av-grillfest-title"> 
 +        Grillfest auf dem Theresienberg 
 +      </h2> 
 + 
 +      <p> 
 +        Wir laden herzlich zum Grillfest an unserer AV-Hütte ein: 
 +        <strong>Samstagabend und Sonntag.</strong> 
 +      </p> 
 + 
 +      <p class="av-grillfest-card-promise"> 
 +        🎵 Für Musik und das leibliche Wohl ist bestens gesorgt! 
 +      </p> 
 + 
 +      <button type="button" class="av-grillfest-replay"> 
 +        🔥 Ankündigung noch einmal ansehen 
 +      </button> 
 +    </div> 
 +  </section> 
 +</div> 
 + 
 +<style> 
 +  #av-grillfest-2026 { 
 +    --av-green: #176b36; 
 +    --av-dark-green: #0d4724; 
 +    --av-cream: #fff8e6; 
 +    --av-gold: #ffc44d; 
 + 
 +    max-width: 900px; 
 +    margin: 28px auto; 
 +    font-family: Arial, Helvetica, sans-serif; 
 +  } 
 + 
 +  /* Statischer Hinweis */ 
 + 
 +  .av-grillfest-card { 
 +    display: flex; 
 +    align-items: center; 
 +    gap: 22px; 
 +    box-sizing: border-box; 
 +    padding: 25px 28px; 
 +    color: #183221; 
 +    background: 
 +      linear-gradient(120deg, rgba(255,255,255,.94), rgba(255,248,220,.96)), 
 +      var(--av-cream); 
 +    border: 3px solid var(--av-green); 
 +    border-radius: 15px; 
 +    box-shadow: 0 10px 28px rgba(16,66,34,.18); 
 +  } 
 + 
 +  .av-grillfest-card-fire { 
 +    flex: 0 0 auto; 
 +    font-size: clamp(55px, 9vw, 90px); 
 +    filter: drop-shadow(0 8px 8px rgba(160,50,10,.2)); 
 +  } 
 + 
 +  .av-grillfest-card-date { 
 +    display: inline-block; 
 +    padding: 5px 12px; 
 +    color: #fff; 
 +    background: var(--av-green); 
 +    border-radius: 999px; 
 +    font-size: 15px; 
 +    font-weight: bold; 
 +    letter-spacing: .04em; 
 +  } 
 + 
 +  .av-grillfest-card h2 { 
 +    margin: 9px 0 8px; 
 +    color: var(--av-dark-green); 
 +    font-family: Georgia, "Times New Roman", serif; 
 +    font-size: clamp(25px, 4vw, 38px); 
 +    line-height: 1.1; 
 +  } 
 + 
 +  .av-grillfest-card p { 
 +    margin: 7px 0; 
 +    font-size: 17px; 
 +    line-height: 1.55; 
 +  } 
 + 
 +  .av-grillfest-card-promise { 
 +    color: var(--av-dark-green); 
 +    font-weight: bold; 
 +  } 
 + 
 +  .av-grillfest-replay, 
 +  .av-grillfest-sound, 
 +  .av-grillfest-close { 
 +    border: 0; 
 +    cursor: pointer; 
 +    font: inherit; 
 +  } 
 + 
 +  .av-grillfest-replay { 
 +    margin-top: 12px; 
 +    padding: 9px 14px; 
 +    color: #fff; 
 +    background: var(--av-green); 
 +    border-radius: 7px; 
 +    font-weight: bold; 
 +  } 
 + 
 +  .av-grillfest-replay:hover, 
 +  .av-grillfest-replay:focus { 
 +    background: var(--av-dark-green); 
 +  } 
 + 
 +  /* Vollbild-Ankündigung */ 
 + 
 +  .av-grillfest-overlay { 
 +    position: fixed; 
 +    z-index: 2147483000; 
 +    inset: 0; 
 +    display: grid; 
 +    place-items: center; 
 +    overflow: hidden; 
 +    box-sizing: border-box; 
 +    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; 
 +  } 
 + 
 +  .av-grillfest-overlay.av-grillfest-leaving { 
 +    animation: av-overlay-out .7s ease both; 
 +  } 
 + 
 +  .av-grillfest-stage { 
 +    position: relative; 
 +    z-index: 5; 
 +    width: min(760px, 94vw); 
 +    box-sizing: border-box; 
 +    padding: clamp(30px, 5vw, 48px); 
 +    text-align: center; 
 +    background: rgba(14,37,21,.86); 
 +    border: 2px solid rgba(255,196,77,.82); 
 +    border-radius: 22px; 
 +    box-shadow: 
 +      0 0 80px rgba(243,107,33,.3), 
 +      inset 0 0 35px rgba(255,196,77,.08); 
 +    animation: 
 +      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 { 
 +    color: var(--av-gold); 
 +    font-size: clamp(15px, 3vw, 21px); 
 +    font-weight: bold; 
 +    letter-spacing: .18em; 
 +    text-transform: uppercase; 
 +  } 
 + 
 +  .av-grillfest-stage h2 { 
 +    margin: 12px 0; 
 +    color: #fff6d6; 
 +    font-family: Georgia, "Times New Roman", serif; 
 +    font-size: clamp(36px, 8vw, 76px); 
 +    line-height: .98; 
 +    text-shadow: 
 +      0 2px 0 #8e2b13, 
 +      0 0 24px rgba(255,137,32,.55); 
 +  } 
 + 
 +  .av-grillfest-overlay-date { 
 +    margin: 10px 0 17px; 
 +    color: var(--av-gold); 
 +    font-family: Georgia, "Times New Roman", serif; 
 +    font-size: clamp(25px, 5vw, 43px); 
 +    font-weight: bold; 
 +  } 
 + 
 +  .av-grillfest-stage p { 
 +    max-width: 650px; 
 +    margin: 8px auto; 
 +    font-size: clamp(17px, 3vw, 23px); 
 +    line-height: 1.45; 
 +  } 
 + 
 +  .av-grillfest-music-line { 
 +    color: #ffe7a3; 
 +    font-weight: bold; 
 +  } 
 + 
 +  .av-grillfest-sound { 
 +    margin-top: 20px; 
 +    padding: 10px 18px; 
 +    color: #322008; 
 +    background: var(--av-gold); 
 +    border-radius: 999px; 
 +    font-weight: bold; 
 +    box-shadow: 0 5px 18px rgba(0,0,0,.28); 
 +  } 
 + 
 +  .av-grillfest-sound:hover, 
 +  .av-grillfest-sound:focus { 
 +    background: #ffe18a; 
 +  } 
 + 
 +  .av-grillfest-sound:disabled { 
 +    cursor: default; 
 +    opacity: .82; 
 +  } 
 + 
 +  .av-grillfest-close { 
 +    position: absolute; 
 +    top: 13px; 
 +    right: 13px; 
 +    width: 42px; 
 +    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-grillfest-close:focus { 
 +    background: rgba(180,40,15,.72); 
 +  } 
 + 
 +  /* Realistischere Flammen */ 
 + 
 +  .av-grillfest-flames { 
 +    position: absolute; 
 +    z-index: 2; 
 +    right: -4%; 
 +    bottom: -35px; 
 +    left: -4%; 
 +    display: flex; 
 +    align-items: flex-end; 
 +    justify-content: center; 
 +    height: 38vh; 
 +    overflow: visible; 
 +    pointer-events: none; 
 +    filter: contrast(1.12) saturate(1.25); 
 +  } 
 + 
 +  .av-grillfest-flames::before { 
 +    content: ""; 
 +    position: absolute; 
 +    right: 5%; 
 +    bottom: 0; 
 +    left: 5%; 
 +    height: 55%; 
 +    background: radial-gradient( 
 +      ellipse at center bottom, 
 +      rgba(255,210,65,.75) 0%, 
 +      rgba(255,91,20,.45) 32%, 
 +      rgba(190,24,10,.18) 58%, 
 +      transparent 75% 
 +    ); 
 +    filter: blur(28px); 
 +    animation: av-fire-glow 1.4s ease-in-out infinite alternate; 
 +  } 
 + 
 +  .av-grillfest-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( 
 +      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: 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%; 
 +    height: 70%; 
 +    background: linear-gradient( 
 +      to top, 
 +      #fffde3 0%, 
 +      #ffe96f 28%, 
 +      #ffad24 63%, 
 +      rgba(255,96,20,.2) 100% 
 +    ); 
 +    clip-path: polygon( 
 +      50% 0%, 
 +      75% 35%, 
 +      91% 68%, 
 +      72% 94%, 
 +      50% 100%, 
 +      23% 92%, 
 +      10% 65%, 
 +      35% 33% 
 +    ); 
 +    filter: blur(1px); 
 +    animation: av-inner-flame .72s ease-in-out infinite alternate; 
 +  } 
 + 
 +  .av-grillfest-flame::after { 
 +    content: ""; 
 +    position: absolute; 
 +    right: 38%; 
 +    bottom: 1%; 
 +    left: 38%; 
 +    height: 35%; 
 +    background: linear-gradient( 
 +      to top, 
 +      #fff, 
 +      #fff8b0 48%, 
 +      rgba(255,210,50,0) 
 +    ); 
 +    border-radius: 50% 50% 30% 30%; 
 +    filter: blur(2px); 
 +    opacity: .9; 
 +  } 
 + 
 +  .av-grillfest-flame:nth-child(2n) { 
 +    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; 
 +    inset: 0; 
 +    overflow: hidden; 
 +    pointer-events: none; 
 +  } 
 + 
 +  .av-grillfest-ember { 
 +    position: absolute; 
 +    bottom: 2%; 
 +    width: 4px; 
 +    height: 4px; 
 +    background: #ffd45c; 
 +    border-radius: 50%; 
 +    box-shadow: 
 +      0 0 5px #fff4a5, 
 +      0 0 12px #ff6a16; 
 +    opacity: 0; 
 +    animation: av-ember-rise 3.4s linear infinite; 
 +  } 
 + 
 +  .av-grillfest-ember:nth-child(1)  { left: 8%;  animation-delay: -.3s; } 
 +  .av-grillfest-ember:nth-child(2)  { left: 15%; animation-delay: -1.8s; } 
 +  .av-grillfest-ember:nth-child(3)  { left: 22%; animation-delay: -.9s; } 
 +  .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 */ 
 + 
 +  .av-grillfest-notes { 
 +    position: absolute; 
 +    z-index: 4; 
 +    inset: 0; 
 +    overflow: hidden; 
 +    pointer-events: none; 
 +  } 
 + 
 +  .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; } 
 +  } 
 + 
 +  @keyframes av-overlay-out { 
 +    from { opacity: 1; } 
 +    to   { opacity: 0; } 
 +  } 
 + 
 +  @keyframes av-stage-in { 
 +    from { 
 +      opacity: 0; 
 +      transform: scale(.72) translateY(35px); 
 +    } 
 +    to { 
 +      opacity: 1; 
 +      transform: scale(1) translateY(0); 
 +    } 
 +  } 
 + 
 +  @keyframes av-stage-glow { 
 +    from { 
 +      box-shadow: 
 +        0 0 55px rgba(243,107,33,.22), 
 +        inset 0 0 35px rgba(255,196,77,.08); 
 +    } 
 +    to { 
 +      box-shadow: 
 +        0 0 95px rgba(243,107,33,.42), 
 +        inset 0 0 50px rgba(255,196,77,.13); 
 +    } 
 +  } 
 + 
 +  @keyframes av-real-flame { 
 +    0% { 
 +      transform: scaleX(.78) scaleY(1.03) rotate(-4deg); 
 +    } 
 +    35% { 
 +      transform: scaleX(1.04) scaleY(.91) rotate(3deg); 
 +    } 
 +    70% { 
 +      transform: scaleX(.89) scaleY(1.08) rotate(-2deg); 
 +    } 
 +    100% { 
 +      transform: scaleX(1.12) scaleY(.87) rotate(5deg); 
 +    } 
 +  } 
 + 
 +  @keyframes av-inner-flame { 
 +    from { 
 +      transform: translateX(-5%) scaleX(.78) scaleY(1.08); 
 +    } 
 +    to { 
 +      transform: translateX(6%) scaleX(1.15) scaleY(.84); 
 +    } 
 +  } 
 + 
 +  @keyframes av-fire-glow { 
 +    from { 
 +      opacity: .62; 
 +      transform: scaleX(.92); 
 +    } 
 +    to { 
 +      opacity: 1; 
 +      transform: scaleX(1.08); 
 +    } 
 +  } 
 + 
 +  @keyframes av-ember-rise { 
 +    0% { 
 +      opacity: 0; 
 +      transform: translate(0,0) scale(.5); 
 +    } 
 +    12% { 
 +      opacity: 1; 
 +    } 
 +    65% { 
 +      opacity: .75; 
 +    } 
 +    100% { 
 +      opacity: 0; 
 +      transform: translate(35px,-70vh) scale(.15); 
 +    } 
 +  } 
 + 
 +  @keyframes av-note-rise { 
 +    0% { 
 +      opacity: 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: 5px; 
 +    } 
 + 
 +    .av-grillfest-stage { 
 +      padding: 45px 18px 28px; 
 +    } 
 + 
 +    .av-grillfest-flames { 
 +      bottom: -45px; 
 +      height: 30vh; 
 +    } 
 +  } 
 + 
 +  @media (prefers-reduced-motion: reduce) { 
 +    .av-grillfest-overlay, 
 +    .av-grillfest-stage, 
 +    .av-grillfest-flame, 
 +    .av-grillfest-flame::before, 
 +    .av-grillfest-ember, 
 +    .av-grillfest-note, 
 +    .av-grillfest-flames::before { 
 +      animation: none !important; 
 +    } 
 + 
 +    .av-grillfest-ember, 
 +    .av-grillfest-note { 
 +      display: none; 
 +    } 
 +  } 
 +</style> 
 + 
 +<script> 
 +(function () { 
 +  "use strict"; 
 + 
 +  var root = document.getElementById("av-grillfest-2026"); 
 + 
 +  if (!root || root.getAttribute("data-initialized") === "true") { 
 +    return; 
 +  } 
 + 
 +  root.setAttribute("data-initialized", "true"); 
 + 
 +  var closeTimer = null; 
 +  var previousOverflow = ""; 
 +  var audioContext = null; 
 +  var escapeHandler = null; 
 + 
 +  function playMusic(button) { 
 +    var AudioContextClass = 
 +      window.AudioContext || window.webkitAudioContext; 
 + 
 +    if (!AudioContextClass) { 
 +      button.textContent = "Musik wird nicht unterstützt"; 
 +      return; 
 +    } 
 + 
 +    audioContext = audioContext || new AudioContextClass(); 
 +    audioContext.resume(); 
 + 
 +    var notes = [ 
 +      [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] 
 +    ]; 
 + 
 +    notes.forEach(function (note) { 
 +      var oscillator = audioContext.createOscillator(); 
 +      var gain = audioContext.createGain(); 
 +      var start = audioContext.currentTime + note[1]; 
 + 
 +      oscillator.type = "triangle"; 
 +      oscillator.frequency.value = note[0]; 
 + 
 +      gain.gain.setValueAtTime(0.0001, start); 
 +      gain.gain.exponentialRampToValueAtTime( 
 +        0.12, 
 +        start + 0.04 
 +      ); 
 +      gain.gain.exponentialRampToValueAtTime( 
 +        0.0001, 
 +        start + 0.25 
 +      ); 
 + 
 +      oscillator.connect(gain); 
 +      gain.connect(audioContext.destination); 
 + 
 +      oscillator.start(start); 
 +      oscillator.stop(start + 0.27); 
 +    }); 
 + 
 +    button.textContent = "♫ Musik läuft"; 
 +    button.disabled = true; 
 +  } 
 + 
 +  function hideOverlay() { 
 +    var overlay = 
 +      document.querySelector(".av-grillfest-overlay"); 
 + 
 +    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) { 
 +    var result = ""; 
 + 
 +    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.setAttribute("role", "dialog"); 
 +    overlay.setAttribute("aria-modal", "true"); 
 +    overlay.setAttribute( 
 +      "aria-labelledby", 
 +      "av-grillfest-overlay-title" 
 +    ); 
 + 
 +    overlay.innerHTML = 
 +      '<div class="av-grillfest-notes" aria-hidden="true">' + 
 +        '<span class="av-grillfest-note">♪</span>' + 
 +        '<span class="av-grillfest-note">♫</span>' + 
 +        '<span class="av-grillfest-note">♪</span>' + 
 +        '<span class="av-grillfest-note">♬</span>' + 
 +      '</div>' + 
 + 
 +      '<div class="av-grillfest-stage">' + 
 +        '<button class="av-grillfest-close" ' + 
 +          'type="button" ' + 
 +          'aria-label="Ankündigung schließen">×</button>' + 
 + 
 +        '<div class="av-grillfest-kicker">' + 
 +          'Herzliche Einladung' + 
 +        '</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); 
 + 
 +    overlay 
 +      .querySelector(".av-grillfest-close") 
 +      .addEventListener("click", hideOverlay); 
 + 
 +    overlay 
 +      .querySelector(".av-grillfest-sound") 
 +      .addEventListener("click", function () { 
 +        playMusic(this); 
 +      }); 
 + 
 +    overlay.addEventListener("click", function (event) { 
 +      if (event.target === overlay) { 
 +        hideOverlay(); 
 +      } 
 +    }); 
 + 
 +    escapeHandler = function (event) { 
 +      if (event.key === "Escape") { 
 +        hideOverlay(); 
 +      } 
 +    }; 
 + 
 +    document.addEventListener("keydown", escapeHandler); 
 + 
 +    overlay 
 +      .querySelector(".av-grillfest-close") 
 +      .focus(); 
 + 
 +    /* Automatisch nach 8,5 Sekunden ausblenden */ 
 +    closeTimer = window.setTimeout(hideOverlay, 8500); 
 +  } 
 + 
 +  root 
 +    .querySelector(".av-grillfest-replay") 
 +    .addEventListener("click", showOverlay); 
 + 
 +  /* Animation kurz nach dem Laden starten */ 
 +  window.setTimeout(showOverlay, 500); 
 +})(); 
 +</script> 
 +<!-- ------------------------------------------------------------------------------------------------------------------------ --> 
 +</html>
  
 <WRAP centeralign> <WRAP centeralign>
Zeile 44: Zeile 870:
  ++++  ++++
  
 +<html> 
 +<meta property="og:image" content="https://www.xn--avhtte-5ya.de/lib/exe/fetch.php?media=img:huette:avh1.png" /> 
 +</html>
start.1774870894.txt.gz · Zuletzt geändert: von dfrey
Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki