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/06/19 16:37] – dfreystart [2026/07/29 08:10] (aktuell) – dfrey
Zeile 1: Zeile 1:
 {{img:huette:avh1.png?nolink|}} {{img:huette:avh1.png?nolink|}}
 +<html>
 +<!-- ------------------------------------------------------------------------------------------------------------------------ -->
 +<!-- Grillfest AV-Hütte 2026 – Anfang -->
 +<div id="av-grillfest-2026" class="av-grillfest-card">
 +  <div class="av-grillfest-card-fire">🔥</div>
 +  <div class="av-grillfest-card-content">
 +    <div class="av-grillfest-kicker">Schwäbischer Albverein Waldenburg</div>
 +    <h2>Grillfest auf dem Theresienberg</h2>
 +    <p class="av-grillfest-date">08.08. bis 09.08.2026</p>
 +    <p>
 +      Zwei Tage Grillfest bei uns auf dem Theresienberg in Waldenburg:
 +      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 class="av-grillfest-food">
 +      Spezialitäten vom Grill, Maultaschen, Kartoffelsalat, geräucherte Forellen,
 +      frisch gezapftes Fassbier, Hohenloher Weine und alkoholfreie Getränke.
 +    </p>
 +    <div class="av-grillfest-actions">
 +      <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">
 +        📄 Jetzt Flyer herunterladen
 +      </a>
 +      <button type="button" id="av-grillfest-replay">Hinweis erneut anzeigen</button>
 +    </div>
 +  </div>
 +</div>
 +
 +<style>
 +  #av-grillfest-2026,
 +  #av-grillfest-popup-2026 {
 +    box-sizing: border-box;
 +    font-family: Georgia, "Times New Roman", serif;
 +  }
 +
 +  #av-grillfest-2026 *,
 +  #av-grillfest-popup-2026 * {
 +    box-sizing: border-box;
 +  }
 +
 +  .av-grillfest-card {
 +    position: relative;
 +    overflow: hidden;
 +    margin: 1.5rem 0;
 +    padding: 1.2rem;
 +    border-radius: 18px;
 +    border: 2px solid #0b7d23;
 +    background:
 +      radial-gradient(circle at top left, rgba(255, 192, 93, 0.55), transparent 35%),
 +      linear-gradient(135deg, #fff8df, #f7ecd0 45%, #e8f4d9);
 +    box-shadow: 0 12px 30px rgba(0, 60, 15, 0.22);
 +    color: #2f210d;
 +  }
 +
 +  .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 {
 +    position: absolute;
 +    right: 1rem;
 +    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-content {
 +    position: relative;
 +    max-width: 900px;
 +  }
 +
 +  .av-grillfest-kicker {
 +    font-family: Arial, sans-serif;
 +    text-transform: uppercase;
 +    letter-spacing: 0.08em;
 +    color: #0b7d23;
 +    font-size: 0.78rem;
 +    font-weight: 700;
 +  }
 +
 +  .av-grillfest-card h2 {
 +    margin: 0.15rem 0 0.25rem;
 +    font-size: clamp(1.55rem, 3vw, 2.35rem);
 +    color: #7a2500;
 +  }
 +
 +  .av-grillfest-date {
 +    display: inline-block;
 +    margin: 0.25rem 0 0.8rem;
 +    padding: 0.35rem 0.75rem;
 +    border-radius: 999px;
 +    background: #0b7d23;
 +    color: #fff;
 +    font-family: Arial, sans-serif;
 +    font-weight: 700;
 +  }
 +
 +  .av-grillfest-food {
 +    font-weight: 700;
 +  }
 +
 +  .av-grillfest-actions {
 +    display: flex;
 +    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;
 +    transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
 +  }
 +
 +  .av-grillfest-download,
 +  .av-popup-button.av-download {
 +    background: linear-gradient(135deg, #ff7a00, #b42a00);
 +    color: #fff !important;
 +    box-shadow: 0 8px 18px rgba(148, 42, 0, 0.28);
 +  }
 +
 +  .av-download-prominent,
 +  .av-popup-button.av-download {
 +    font-size: 1.05rem;
 +    padding: 0.9rem 1.35rem;
 +    animation: av-download-pulse 1.8s infinite ease-in-out;
 +  }
 +
 +  #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-popup-overlay {
 +    position: fixed;
 +    z-index: 999999;
 +    inset: 0;
 +    display: grid;
 +    place-items: center;
 +    padding: 1rem;
 +    background: rgba(0, 0, 0, 0.78);
 +    backdrop-filter: blur(4px);
 +    animation: av-overlay-in 0.45s ease both;
 +  }
 +
 +  .av-popup-overlay.av-hide {
 +    animation: av-overlay-out 0.55s ease both;
 +  }
 +
 +  .av-popup-box {
 +    position: relative;
 +    width: min(920px, 96vw);
 +    max-height: 94vh;
 +    overflow: hidden;
 +    border-radius: 28px;
 +    border: 2px solid rgba(255, 205, 120, 0.95);
 +    background:
 +      radial-gradient(circle at 50% 102%, rgba(255, 95, 0, 0.38), transparent 36%),
 +      linear-gradient(145deg, #2a1004, #581b00 42%, #18310e);
 +    color: #fff8df;
 +    box-shadow:
 +      0 0 38px rgba(255, 98, 0, 0.55),
 +      0 28px 90px rgba(0, 0, 0, 0.75);
 +    animation: av-popup-in 0.75s cubic-bezier(.2, .9, .2, 1.15) both;
 +  }
 +
 +  .av-popup-close {
 +    position: absolute;
 +    z-index: 4;
 +    top: 0.85rem;
 +    right: 0.85rem;
 +    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-popup-close:hover {
 +    filter: brightness(1.12);
 +    transform: scale(1.04);
 +  }
 +
 +  .av-popup-inner {
 +    position: relative;
 +    z-index: 2;
 +    padding: clamp(1.4rem, 4vw, 2.6rem);
 +    padding-top: clamp(3.2rem, 6vw, 4rem);
 +    text-align: center;
 +  }
 +
 +  .av-popup-kicker {
 +    font-family: Arial, sans-serif;
 +    letter-spacing: 0.12em;
 +    text-transform: uppercase;
 +    color: #ffd38a;
 +    font-weight: 800;
 +    font-size: 0.82rem;
 +  }
 +
 +  .av-popup-title {
 +    margin: 0.2rem 0;
 +    font-size: clamp(2.6rem, 9vw, 6rem);
 +    line-height: 0.92;
 +    color: #fff1b8;
 +    text-shadow:
 +      0 0 10px rgba(255, 172, 64, 0.9),
 +      0 4px 0 rgba(116, 26, 0, 0.9);
 +  }
 +
 +  .av-popup-date {
 +    display: inline-block;
 +    margin: 0.9rem 0;
 +    padding: 0.45rem 1rem;
 +    border-radius: 999px;
 +    background: rgba(11, 125, 35, 0.96);
 +    color: #fff;
 +    font-family: Arial, sans-serif;
 +    font-weight: 900;
 +    font-size: 1.15rem;
 +  }
 +
 +  .av-popup-location {
 +    font-size: clamp(1.1rem, 3vw, 1.65rem);
 +    font-weight: 700;
 +  }
 +
 +  .av-popup-program {
 +    margin: 1rem auto;
 +    max-width: 720px;
 +    text-align: left;
 +    font-family: Arial, sans-serif;
 +    line-height: 1.45;
 +  }
 +
 +  .av-popup-program div {
 +    margin: 0.38rem 0;
 +    padding: 0.42rem 0.6rem;
 +    border-radius: 12px;
 +    background: rgba(255, 255, 255, 0.1);
 +  }
 +
 +  .av-popup-flyer-callout {
 +    margin: 1.1rem auto 0;
 +    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);
 +  }
 +
 +  .av-popup-actions {
 +    display: flex;
 +    justify-content: center;
 +    flex-wrap: wrap;
 +    gap: 0.75rem;
 +    margin-top: 1rem;
 +  }
 +
 +  .av-fire-stage {
 +    position: absolute;
 +    z-index: 1;
 +    left: 0;
 +    right: 0;
 +    bottom: -8px;
 +    height: 160px;
 +    pointer-events: none;
 +    filter: contrast(1.22) saturate(1.5);
 +  }
 +
 +  .av-fire-stage::before {
 +    content: "";
 +    position: absolute;
 +    left: 12%;
 +    right: 12%;
 +    bottom: 6px;
 +    height: 72px;
 +    border-radius: 50%;
 +    background:
 +      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%);
 +    filter: blur(15px);
 +    animation: av-fire-glow 1.2s infinite alternate ease-in-out;
 +  }
 +
 +  .av-flame {
 +    position: absolute;
 +    bottom: 0;
 +    left: 50%;
 +    width: 72px;
 +    height: 132px;
 +    transform-origin: 50% 100%;
 +    border-radius: 56% 44% 54% 46% / 68% 62% 38% 32%;
 +    clip-path: polygon(50% 0%, 66% 22%, 75% 43%, 100% 76%, 72% 100%, 50% 91%, 28% 100%, 0% 76%, 25% 42%, 34% 21%);
 +    background:
 +      radial-gradient(circle at 52% 68%, #fff7a6 0 9%, transparent 18%),
 +      radial-gradient(circle at 48% 76%, #ffd55c 0 22%, transparent 38%),
 +      radial-gradient(circle at 47% 56%, #ff7b00 0 34%, transparent 55%),
 +      radial-gradient(circle at 52% 76%, #b71900 0 54%, transparent 72%);
 +    mix-blend-mode: screen;
 +    opacity: 0.92;
 +    filter: blur(0.25px) drop-shadow(0 0 12px rgba(255, 98, 0, 0.9));
 +    animation: av-real-flame 0.9s infinite ease-in-out;
 +  }
 +
 +  .av-flame::before {
 +    content: "";
 +    position: absolute;
 +    left: 21%;
 +    top: 27%;
 +    width: 58%;
 +    height: 68%;
 +    border-radius: 58% 42% 55% 45% / 68% 58% 42% 32%;
 +    clip-path: polygon(50% 0%, 66% 26%, 78% 62%, 63% 100%, 50% 86%, 37% 100%, 22% 62%, 34% 26%);
 +    background:
 +      radial-gradient(circle at 50% 70%, #fff8bc 0 16%, #ffd04a 28%, #ff8a00 58%, transparent 72%);
 +    animation: av-inner-flame 0.72s infinite alternate ease-in-out;
 +  }
 +
 +  .av-ember {
 +    position: absolute;
 +    bottom: 22px;
 +    left: 50%;
 +    width: 5px;
 +    height: 5px;
 +    border-radius: 50%;
 +    background: #ffd277;
 +    box-shadow: 0 0 12px #ff7a00;
 +    opacity: 0;
 +    animation: av-ember-rise 2.5s infinite ease-out;
 +  }
 +
 +  @keyframes av-card-fire {
 +    from { transform: rotate(-4deg) scale(1); }
 +    to { transform: rotate(5deg) scale(1.13); }
 +  }
 +
 +  @keyframes av-download-pulse {
 +    0%, 100% {
 +      transform: scale(1);
 +      box-shadow: 0 8px 18px rgba(148, 42, 0, 0.28);
 +    }
 +    50% {
 +      transform: scale(1.035);
 +      box-shadow: 0 12px 30px rgba(255, 104, 0, 0.46);
 +    }
 +  }
 +
 +  @keyframes av-overlay-in {
 +    from { opacity: 0; }
 +    to { opacity: 1; }
 +  }
 +
 +  @keyframes av-overlay-out {
 +    to { opacity: 0; }
 +  }
 +
 +  @keyframes av-popup-in {
 +    from { transform: translateY(28px) scale(0.95); opacity: 0; }
 +    to { transform: translateY(0) scale(1); opacity: 1; }
 +  }
 +
 +  @keyframes av-real-flame {
 +    0% { transform: translateX(var(--x)) scaleX(0.92) scaleY(1) rotate(-3deg); opacity: 0.76; }
 +    35% { transform: translateX(calc(var(--x) + 7px)) scaleX(1.08) scaleY(1.13) rotate(4deg); opacity: 0.98; }
 +    70% { transform: translateX(calc(var(--x) - 5px)) scaleX(0.98) scaleY(0.96) rotate(-5deg); opacity: 0.86; }
 +    100% { transform: translateX(calc(var(--x) + 3px)) scaleX(1.04) scaleY(1.08) rotate(2deg); opacity: 0.94; }
 +  }
 +
 +  @keyframes av-inner-flame {
 +    from { transform: translateY(10px) scale(0.78, 0.9); opacity: 0.7; }
 +    to { transform: translateY(-7px) scale(1.03, 1.12); opacity: 1; }
 +  }
 +
 +  @keyframes av-fire-glow {
 +    from { opacity: 0.55; transform: scaleX(0.9); }
 +    to { opacity: 0.95; transform: scaleX(1.08); }
 +  }
 +
 +  @keyframes av-ember-rise {
 +    0% { transform: translate(0, 0) scale(0.7); opacity: 0; }
 +    12% { opacity: 1; }
 +    100% { transform: translate(var(--dx), -155px) scale(0.15); opacity: 0; }
 +  }
 +
 +  @media (prefers-reduced-motion: reduce) {
 +    .av-popup-overlay,
 +    .av-popup-box,
 +    .av-flame,
 +    .av-ember,
 +    .av-fire-stage::before,
 +    .av-grillfest-card-fire,
 +    .av-download-prominent {
 +      animation: none !important;
 +    }
 +  }
 +</style>
 +
 +<script>
 +(function () {
 +  var root = document.getElementById("av-grillfest-2026");
 +  if (!root || root.getAttribute("data-av-ready") === "1") return;
 +  root.setAttribute("data-av-ready", "1");
 +
 +  var flyerUrl = "https://xn--avhtte-5ya.de/lib/exe/fetch.php?media=img:public:av_grillfest_2026_flyer.pdf";
 +  var overlay = null;
 +
 +  function closePopup() {
 +    if (!overlay) return;
 +
 +    document.removeEventListener("keydown", onEscape);
 +    document.body.style.overflow = "";
 +    overlay.classList.add("av-hide");
 +
 +    var oldOverlay = overlay;
 +    overlay = null;
 +
 +    setTimeout(function () {
 +      if (oldOverlay && oldOverlay.parentNode) {
 +        oldOverlay.parentNode.removeChild(oldOverlay);
 +      }
 +    }, 560);
 +  }
 +
 +  function onEscape(event) {
 +    if (event.key === "Escape") closePopup();
 +  }
 +
 +  function addFlames(stage) {
 +    var positions = [-300, -245, -195, -145, -95, -45, 0, 45, 95, 145, 195, 245, 300];
 +
 +    positions.forEach(function (pos, i) {
 +      var flame = document.createElement("span");
 +      flame.className = "av-flame";
 +      flame.style.setProperty("--x", pos + "px");
 +      flame.style.width = (58 + (i % 5) * 9) + "px";
 +      flame.style.height = (92 + (i % 6) * 12) + "px";
 +      flame.style.animationDelay = (-i * 0.13) + "s";
 +      flame.style.zIndex = String(20 - Math.abs(pos));
 +      stage.appendChild(flame);
 +    });
 +
 +    for (var e = 0; e < 18; e++) {
 +      var ember = document.createElement("span");
 +      ember.className = "av-ember";
 +      ember.style.left = (28 + Math.random() * 44) + "%";
 +      ember.style.setProperty("--dx", (-60 + Math.random() * 120) + "px");
 +      ember.style.animationDelay = (-Math.random() * 2.4) + "s";
 +      ember.style.animationDuration = (1.8 + Math.random() * 1.4) + "s";
 +      stage.appendChild(ember);
 +    }
 +  }
 +
 +  function showPopup() {
 +    if (overlay) return;
 +
 +    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("aria-label", "Einladung zum Grillfest");
 +
 +    overlay.innerHTML =
 +      '<div class="av-popup-box">' +
 +        '<button type="button" class="av-popup-close" aria-label="Schließen">×</button>' +
 +        '<div class="av-popup-inner">' +
 +          '<div class="av-popup-kicker">Schwäbischer Albverein Waldenburg</div>' +
 +          '<div class="av-popup-title">Grillfest</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-popup-program">' +
 +            '<div><strong>Samstag ab 16:30 Uhr:</strong> gemütliche Hocketse an der Albvereins-Hütte und rund um den Grillplatz.</div>' +
 +            '<div><strong>Samstag ab 19:00 Uhr:</strong> Barbetrieb und Live-Musik mit der Waldenburger Newcomer Band „June“.</div>' +
 +            '<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><strong>Sonntag ab 13:00 Uhr:</strong> Kaffee und große Kuchen- & Tortenauswahl.</div>' +
 +            '<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>' +
 +      '</div>';
 +
 +    document.body.appendChild(overlay);
 +    document.body.style.overflow = "hidden";
 +
 +    var closeX = overlay.querySelector(".av-popup-close");
 +    var closeMain = overlay.querySelector(".av-close-main");
 +    var stage = overlay.querySelector(".av-fire-stage");
 +
 +    addFlames(stage);
 +
 +    closeX.addEventListener("click", closePopup);
 +    closeMain.addEventListener("click", closePopup);
 +
 +    overlay.addEventListener("click", function (event) {
 +      if (event.target === overlay) closePopup();
 +    });
 +
 +    document.addEventListener("keydown", onEscape);
 +    closeX.focus();
 +  }
 +
 +  var replay = document.getElementById("av-grillfest-replay");
 +  if (replay) replay.addEventListener("click", showPopup);
 +
 +  setTimeout(showPopup, 500);
 +})();
 +</script>
 +<!-- Grillfest AV-Hütte 2026 – Ende -->
 +<!-- ------------------------------------------------------------------------------------------------------------------------ -->
 +</html>
 +
 +
  
 <WRAP centeralign> <WRAP centeralign>
Zeile 44: Zeile 603:
  ++++  ++++
  
 +<html> 
 +<meta property="og:image" content="https://www.xn--avhtte-5ya.de/lib/exe/fetch.php?media=img:huette:avh1.png" /> 
 +</html>
start.1781887032.txt.gz · Zuletzt geändert: von dfrey
Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki