start
Unterschiede
Hier werden die Unterschiede zwischen zwei Versionen angezeigt.
| Beide Seiten der vorigen RevisionVorhergehende ÜberarbeitungNächste Überarbeitung | Vorhergehende Überarbeitung | ||
| start [2026/03/30 11:41] – dfrey | start [2026/07/29 08:10] (aktuell) – dfrey | ||
|---|---|---|---|
| Zeile 1: | Zeile 1: | ||
| - | {{img: | + | {{img: |
| + | < | ||
| + | <!-- ------------------------------------------------------------------------------------------------------------------------ --> | ||
| + | <!-- Grillfest AV-Hütte 2026 – Anfang --> | ||
| + | <div id=" | ||
| + | <div class=" | ||
| + | <div class=" | ||
| + | <div class=" | ||
| + | < | ||
| + | <p class=" | ||
| + | <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, | ||
| + | </ | ||
| + | <p class=" | ||
| + | Spezialitäten vom Grill, Maultaschen, | ||
| + | frisch gezapftes Fassbier, Hohenloher Weine und alkoholfreie Getränke. | ||
| + | </ | ||
| + | <div class=" | ||
| + | <a class=" | ||
| + | 📄 Jetzt Flyer herunterladen | ||
| + | </ | ||
| + | <button type=" | ||
| + | </ | ||
| + | </ | ||
| + | </ | ||
| + | |||
| + | < | ||
| + | # | ||
| + | # | ||
| + | box-sizing: border-box; | ||
| + | font-family: | ||
| + | } | ||
| + | |||
| + | # | ||
| + | # | ||
| + | box-sizing: border-box; | ||
| + | } | ||
| + | |||
| + | .av-grillfest-card { | ||
| + | position: relative; | ||
| + | overflow: hidden; | ||
| + | margin: 1.5rem 0; | ||
| + | padding: 1.2rem; | ||
| + | border-radius: | ||
| + | border: 2px solid #0b7d23; | ||
| + | background: | ||
| + | radial-gradient(circle at top left, rgba(255, 192, 93, 0.55), transparent 35%), | ||
| + | linear-gradient(135deg, | ||
| + | box-shadow: 0 12px 30px rgba(0, 60, 15, 0.22); | ||
| + | color: #2f210d; | ||
| + | } | ||
| + | |||
| + | .av-grillfest-card:: | ||
| + | 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: | ||
| + | } | ||
| + | |||
| + | .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: | ||
| + | text-transform: | ||
| + | letter-spacing: | ||
| + | color: #0b7d23; | ||
| + | font-size: 0.78rem; | ||
| + | font-weight: | ||
| + | } | ||
| + | |||
| + | .av-grillfest-card h2 { | ||
| + | margin: 0.15rem 0 0.25rem; | ||
| + | font-size: clamp(1.55rem, | ||
| + | color: #7a2500; | ||
| + | } | ||
| + | |||
| + | .av-grillfest-date { | ||
| + | display: inline-block; | ||
| + | margin: 0.25rem 0 0.8rem; | ||
| + | padding: 0.35rem 0.75rem; | ||
| + | border-radius: | ||
| + | background: #0b7d23; | ||
| + | color: #fff; | ||
| + | font-family: | ||
| + | font-weight: | ||
| + | } | ||
| + | |||
| + | .av-grillfest-food { | ||
| + | font-weight: | ||
| + | } | ||
| + | |||
| + | .av-grillfest-actions { | ||
| + | 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-radius: | ||
| + | padding: 0.72rem 1.05rem; | ||
| + | font-family: | ||
| + | font-weight: | ||
| + | text-decoration: | ||
| + | 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, | ||
| + | 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-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-popup-overlay { | ||
| + | position: fixed; | ||
| + | z-index: 999999; | ||
| + | inset: 0; | ||
| + | display: grid; | ||
| + | place-items: | ||
| + | padding: 1rem; | ||
| + | background: rgba(0, 0, 0, 0.78); | ||
| + | backdrop-filter: | ||
| + | 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: | ||
| + | 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, | ||
| + | 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, | ||
| + | } | ||
| + | |||
| + | .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: | ||
| + | background: linear-gradient(135deg, | ||
| + | color: #fff; | ||
| + | font-size: 1.7rem; | ||
| + | font-weight: | ||
| + | line-height: | ||
| + | cursor: pointer; | ||
| + | box-shadow: 0 0 18px rgba(255, 40, 0, 0.75); | ||
| + | } | ||
| + | |||
| + | .av-popup-close: | ||
| + | filter: brightness(1.12); | ||
| + | transform: scale(1.04); | ||
| + | } | ||
| + | |||
| + | .av-popup-inner { | ||
| + | position: relative; | ||
| + | z-index: 2; | ||
| + | padding: clamp(1.4rem, | ||
| + | padding-top: | ||
| + | text-align: center; | ||
| + | } | ||
| + | |||
| + | .av-popup-kicker { | ||
| + | font-family: | ||
| + | letter-spacing: | ||
| + | text-transform: | ||
| + | color: #ffd38a; | ||
| + | font-weight: | ||
| + | font-size: 0.82rem; | ||
| + | } | ||
| + | |||
| + | .av-popup-title { | ||
| + | margin: 0.2rem 0; | ||
| + | font-size: clamp(2.6rem, | ||
| + | line-height: | ||
| + | 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: | ||
| + | background: rgba(11, 125, 35, 0.96); | ||
| + | color: #fff; | ||
| + | font-family: | ||
| + | font-weight: | ||
| + | font-size: 1.15rem; | ||
| + | } | ||
| + | |||
| + | .av-popup-location { | ||
| + | font-size: clamp(1.1rem, | ||
| + | font-weight: | ||
| + | } | ||
| + | |||
| + | .av-popup-program { | ||
| + | margin: 1rem auto; | ||
| + | max-width: 720px; | ||
| + | text-align: left; | ||
| + | font-family: | ||
| + | line-height: | ||
| + | } | ||
| + | |||
| + | .av-popup-program div { | ||
| + | margin: 0.38rem 0; | ||
| + | padding: 0.42rem 0.6rem; | ||
| + | border-radius: | ||
| + | background: rgba(255, 255, 255, 0.1); | ||
| + | } | ||
| + | |||
| + | .av-popup-flyer-callout { | ||
| + | margin: 1.1rem auto 0; | ||
| + | max-width: 680px; | ||
| + | padding: 1rem; | ||
| + | border-radius: | ||
| + | background: | ||
| + | linear-gradient(135deg, | ||
| + | border: 1px solid rgba(255, 225, 160, 0.55); | ||
| + | font-family: | ||
| + | font-weight: | ||
| + | color: #fff8df; | ||
| + | box-shadow: inset 0 0 18px rgba(255, 170, 40, 0.16); | ||
| + | } | ||
| + | |||
| + | .av-popup-actions { | ||
| + | display: flex; | ||
| + | justify-content: | ||
| + | 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: | ||
| + | filter: contrast(1.22) saturate(1.5); | ||
| + | } | ||
| + | |||
| + | .av-fire-stage:: | ||
| + | content: ""; | ||
| + | position: absolute; | ||
| + | left: 12%; | ||
| + | right: 12%; | ||
| + | bottom: 6px; | ||
| + | height: 72px; | ||
| + | border-radius: | ||
| + | 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: | ||
| + | border-radius: | ||
| + | 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: | ||
| + | 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:: | ||
| + | content: ""; | ||
| + | position: absolute; | ||
| + | left: 21%; | ||
| + | top: 27%; | ||
| + | width: 58%; | ||
| + | height: 68%; | ||
| + | border-radius: | ||
| + | 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: | ||
| + | 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); | ||
| + | to { transform: translateY(0) scale(1); opacity: 1; } | ||
| + | } | ||
| + | |||
| + | @keyframes av-real-flame { | ||
| + | 0% { transform: translateX(var(--x)) scaleX(0.92) scaleY(1) rotate(-3deg); | ||
| + | 35% { transform: translateX(calc(var(--x) + 7px)) scaleX(1.08) scaleY(1.13) rotate(4deg); | ||
| + | 70% { transform: translateX(calc(var(--x) - 5px)) scaleX(0.98) scaleY(0.96) rotate(-5deg); | ||
| + | 100% { transform: translateX(calc(var(--x) + 3px)) scaleX(1.04) scaleY(1.08) rotate(2deg); | ||
| + | } | ||
| + | |||
| + | @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, | ||
| + | 12% { opacity: 1; } | ||
| + | 100% { transform: translate(var(--dx), | ||
| + | } | ||
| + | |||
| + | @media (prefers-reduced-motion: | ||
| + | .av-popup-overlay, | ||
| + | .av-popup-box, | ||
| + | .av-flame, | ||
| + | .av-ember, | ||
| + | .av-fire-stage:: | ||
| + | .av-grillfest-card-fire, | ||
| + | .av-download-prominent { | ||
| + | animation: none !important; | ||
| + | } | ||
| + | } | ||
| + | </ | ||
| + | |||
| + | < | ||
| + | (function () { | ||
| + | var root = document.getElementById(" | ||
| + | if (!root || root.getAttribute(" | ||
| + | root.setAttribute(" | ||
| + | |||
| + | var flyerUrl = " | ||
| + | var overlay = null; | ||
| + | |||
| + | function closePopup() { | ||
| + | if (!overlay) return; | ||
| + | |||
| + | document.removeEventListener(" | ||
| + | document.body.style.overflow = ""; | ||
| + | overlay.classList.add(" | ||
| + | |||
| + | var oldOverlay = overlay; | ||
| + | overlay = null; | ||
| + | |||
| + | setTimeout(function () { | ||
| + | if (oldOverlay && oldOverlay.parentNode) { | ||
| + | oldOverlay.parentNode.removeChild(oldOverlay); | ||
| + | } | ||
| + | }, 560); | ||
| + | } | ||
| + | |||
| + | function onEscape(event) { | ||
| + | if (event.key === " | ||
| + | } | ||
| + | |||
| + | 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(" | ||
| + | flame.className = " | ||
| + | flame.style.setProperty(" | ||
| + | flame.style.width = (58 + (i % 5) * 9) + " | ||
| + | flame.style.height = (92 + (i % 6) * 12) + " | ||
| + | flame.style.animationDelay = (-i * 0.13) + " | ||
| + | flame.style.zIndex = String(20 - Math.abs(pos)); | ||
| + | stage.appendChild(flame); | ||
| + | }); | ||
| + | |||
| + | for (var e = 0; e < 18; e++) { | ||
| + | var ember = document.createElement(" | ||
| + | ember.className = " | ||
| + | ember.style.left = (28 + Math.random() * 44) + " | ||
| + | ember.style.setProperty(" | ||
| + | ember.style.animationDelay = (-Math.random() * 2.4) + " | ||
| + | ember.style.animationDuration = (1.8 + Math.random() * 1.4) + " | ||
| + | stage.appendChild(ember); | ||
| + | } | ||
| + | } | ||
| + | |||
| + | function showPopup() { | ||
| + | if (overlay) return; | ||
| + | |||
| + | overlay = document.createElement(" | ||
| + | overlay.id = " | ||
| + | overlay.className = " | ||
| + | overlay.setAttribute(" | ||
| + | overlay.setAttribute(" | ||
| + | overlay.setAttribute(" | ||
| + | |||
| + | overlay.innerHTML = | ||
| + | '< | ||
| + | '< | ||
| + | '< | ||
| + | '< | ||
| + | '< | ||
| + | '< | ||
| + | '< | ||
| + | '< | ||
| + | '< | ||
| + | '< | ||
| + | '< | ||
| + | '< | ||
| + | '< | ||
| + | '< | ||
| + | '< | ||
| + | '</ | ||
| + | '< | ||
| + | 'Alle Programmpunkte, | ||
| + | '</ | ||
| + | '< | ||
| + | '<a class=" | ||
| + | '< | ||
| + | '</ | ||
| + | '</ | ||
| + | '< | ||
| + | '</ | ||
| + | |||
| + | document.body.appendChild(overlay); | ||
| + | document.body.style.overflow = " | ||
| + | |||
| + | var closeX = overlay.querySelector(" | ||
| + | var closeMain = overlay.querySelector(" | ||
| + | var stage = overlay.querySelector(" | ||
| + | |||
| + | addFlames(stage); | ||
| + | |||
| + | closeX.addEventListener(" | ||
| + | closeMain.addEventListener(" | ||
| + | |||
| + | overlay.addEventListener(" | ||
| + | if (event.target === overlay) closePopup(); | ||
| + | }); | ||
| + | |||
| + | document.addEventListener(" | ||
| + | closeX.focus(); | ||
| + | } | ||
| + | |||
| + | var replay = document.getElementById(" | ||
| + | if (replay) replay.addEventListener(" | ||
| + | |||
| + | setTimeout(showPopup, | ||
| + | })(); | ||
| + | </ | ||
| + | <!-- Grillfest AV-Hütte 2026 – Ende --> | ||
| + | <!-- ------------------------------------------------------------------------------------------------------------------------ --> | ||
| + | </ | ||
| + | |||
| <WRAP centeralign> | <WRAP centeralign> | ||
| Zeile 44: | Zeile 603: | ||
| ++++ | ++++ | ||
| + | < | ||
| + | <meta property=" | ||
| + | </ | ||
start.1774870894.txt.gz · Zuletzt geändert: von dfrey
