# Homepage Event Integration — notrë 002
## Übersicht: 4 Stellen werden angepasst
---
## 1. CSS hinzufügen (vor ``)
```css
/* Event Teaser Section */
.event-teaser{padding:6rem 4rem;background:linear-gradient(135deg,#1a0508 0%,#0d0204 50%,#1a0508 100%);text-align:center;position:relative;overflow:hidden}
.event-teaser::before{content:'';position:absolute;inset:0;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 300 300' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");opacity:.5;pointer-events:none}
.event-teaser-inner{max-width:650px;margin:0 auto;position:relative;z-index:1}
.event-teaser-line{width:1px;height:50px;background:rgba(255,255,255,.12);margin:0 auto 2rem}
.event-teaser-label{font-size:.72rem;font-weight:400;letter-spacing:.22em;text-transform:uppercase;color:rgba(255,255,255,.35);margin-bottom:.6rem}
.event-teaser-title{font-family:'Playfair Display',Georgia,serif;font-size:clamp(2rem,4.5vw,3rem);font-weight:400;color:#fff;margin-bottom:.5rem;letter-spacing:.02em}
.event-teaser-sub{font-family:'Cormorant Garamond',Georgia,serif;font-size:1.1rem;font-weight:300;font-style:italic;color:rgba(255,255,255,.45);margin-bottom:2.5rem}
.event-teaser-details{display:flex;align-items:center;justify-content:center;gap:2rem;margin-bottom:2.5rem;flex-wrap:wrap}
.event-teaser-detail{font-family:'Cormorant Garamond',Georgia,serif;font-size:1rem;font-weight:300;color:rgba(255,255,255,.55);letter-spacing:.03em}
.event-teaser-dot{width:3px;height:3px;border-radius:50%;background:rgba(255,255,255,.2)}
.event-teaser-btn{display:inline-block;padding:.9rem 2.8rem;font-family:'Cormorant Garamond',Georgia,serif;font-size:.9rem;font-weight:400;letter-spacing:.14em;text-transform:uppercase;color:#fff;border:1px solid rgba(255,255,255,.2);text-decoration:none;transition:all .4s ease;background:transparent}
.event-teaser-btn:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.4);transform:translateY(-2px)}
.event-teaser-line-bottom{width:1px;height:50px;background:rgba(255,255,255,.12);margin:2.5rem auto 0}
@media(max-width:768px){.event-teaser{padding:5rem 2rem}.event-teaser-details{gap:1rem}.event-teaser-dot{display:none}}
/* Menu Event Badge (pulsierender Dot) */
.menu-event-badge{display:inline-flex;align-items:center;gap:.6rem}
.menu-event-dot{width:6px;height:6px;border-radius:50%;background:#C4908A;animation:eventPulse 2s ease infinite}
@keyframes eventPulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(1.3)}}
.mobile-event-dot{width:6px;height:6px;border-radius:50%;background:#C4908A;display:inline-block;margin-left:.5rem;animation:eventPulse 2s ease infinite;vertical-align:middle}
/* 6. Menü-Item Delay */
.menu-links li:nth-child(6)>a{transition-delay:0.8s}
```
---
## 2. Desktop Hamburger-Menü — neuer Link (nach "Contact")
Füge diesen `
` NACH dem Contact-Link ein, innerhalb von `