body{
  margin: 0;
  padding: 0;
}

.site-header{
  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(20px);
  box-shadow: rgba(0, 0, 0, 0.04) 0px 8px 30px;
}

/* ============================================
   wild verbunden — Frontend CSS
   ============================================ */

/* ──────────────────────────────────────────────
   1. Font Faces
   ────────────────────────────────────────────── */

/* Inter 18pt */
@font-face {
  font-family: 'Inter 18pt';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/Inter18pt-Regular.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter 18pt';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/Inter18pt-Italic.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter 18pt';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('assets/fonts/Inter18pt-Medium.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter 18pt';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('assets/fonts/Inter18pt-Bold.woff2') format('woff2');
}

/* Cormorant */
@font-face {
  font-family: 'Cormorant';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('assets/fonts/Cormorant-Light.woff2') format('woff2');
}
@font-face {
  font-family: 'Cormorant';
  font-style: italic;
  font-weight: 300;
  font-display: swap;
  src: url('assets/fonts/Cormorant-LightItalic.woff2') format('woff2');
}
@font-face {
  font-family: 'Cormorant';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/Cormorant-Regular.woff2') format('woff2');
}
@font-face {
  font-family: 'Cormorant';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/Cormorant-Italic.woff2') format('woff2');
}
@font-face {
  font-family: 'Cormorant';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('assets/fonts/Cormorant-Medium.woff2') format('woff2');
}
@font-face {
  font-family: 'Cormorant';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url('assets/fonts/Cormorant-MediumItalic.woff2') format('woff2');
}
@font-face {
  font-family: 'Cormorant';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('assets/fonts/Cormorant-SemiBold.woff2') format('woff2');
}
@font-face {
  font-family: 'Cormorant';
  font-style: italic;
  font-weight: 600;
  font-display: swap;
  src: url('assets/fonts/Cormorant-SemiBoldItalic.woff2') format('woff2');
}
@font-face {
  font-family: 'Cormorant';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('assets/fonts/Cormorant-Bold.woff2') format('woff2');
}
@font-face {
  font-family: 'Cormorant';
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url('assets/fonts/Cormorant-BoldItalic.woff2') format('woff2');
}

/* ──────────────────────────────────────────────
   2. Tailwind Directives
   ────────────────────────────────────────────── */

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  body {
    @apply font-sans text-olive-800;
    background-color: #f4f5f0;
  }
  h1, h2, h3, h4 {
    @apply font-serif;
  }
  html {
    scroll-behavior: smooth;
  }
  @media (prefers-reduced-motion: reduce) {
    html {
      scroll-behavior: auto;
    }
    *, *::before, *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
    }
  }
}

@layer components {
  .glass {
    background: rgba(255,255,255,0.4);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
  }
  .glass-strong {
    background: rgba(255,255,255,0.6);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
  }
  .btn-primary {
    @apply inline-flex items-center justify-center gap-2 py-4 px-6 bg-olive-700 text-white rounded-full font-medium text-sm transition-all no-underline;
  }
  .btn-primary:hover {
    @apply bg-olive-800 shadow-md;
  }
  .btn-primary:focus-visible {
    @apply outline-2 outline-offset-2 outline-olive-800;
  }
  .btn-outline {
    @apply inline-flex items-center justify-center gap-2 py-3.5 px-6 border border-olive-200 text-olive-800 rounded-full font-medium text-sm transition-all no-underline;
  }
  .btn-outline:hover {
    background-color: rgba(74,82,64,0.05);
    @apply border-olive-300;
  }
  .btn-outline:focus-visible {
    @apply outline-2 outline-offset-2 outline-olive-800;
  }
}

/* ──────────────────────────────────────────────
   3. Layout — Typografie & Utilities
   ────────────────────────────────────────────── */

body { font-family: 'Inter 18pt', 'Inter', sans-serif; }
h1, h2, h3, h4 { font-family: 'Cormorant', Georgia, serif; }

.pill-image { border-radius: 42% 58% 70% 30% / 45% 45% 55% 55%; }

/* ──────────────────────────────────────────────
   4. Event-Detail — Slider & Lightbox
   ────────────────────────────────────────────── */

.ev-slider { position:relative; overflow:hidden; border-radius:16px; }
.ev-slider-track { display:flex; transition:transform .4s ease; }
.ev-slider-track .ev-slide { flex:0 0 33.333%; padding:0 6px; box-sizing:border-box; }
.ev-slider-track .ev-slide img { width:100%; height:320px; object-fit:cover; border-radius:12px; cursor:pointer; transition:filter .2s; display:block; }
.ev-slider-track .ev-slide img:hover { filter:brightness(.85); }
.ev-btn { position:absolute; top:50%; transform:translateY(-50%); width:44px; height:44px; border-radius:50%; border:none; background:rgba(255,255,255,.85); color:#4A5240; font-size:22px; cursor:pointer; z-index:5; box-shadow:0 2px 8px rgba(0,0,0,.15); display:flex; align-items:center; justify-content:center; }
.ev-btn:hover { background:#fff; }
.ev-btn-prev { left:12px; }
.ev-btn-next { right:12px; }
.ev-dots { display:flex; justify-content:center; gap:8px; margin-top:16px; }
.ev-dot { width:10px; height:10px; border-radius:50%; border:none; background:#b5ba9a; cursor:pointer; padding:0; transition:background .2s; }
.ev-dot.active { background:#4A5240; }

@media(max-width:768px) {
    .ev-slider-track .ev-slide { flex:0 0 100%; }
    .ev-slider-track .ev-slide img { height:240px; }
}
@media(min-width:769px) and (max-width:1024px) {
    .ev-slider-track .ev-slide { flex:0 0 50%; }
}

/* Lightbox */
.ev-lightbox { position:fixed; top:0; left:0; right:0; bottom:0; z-index:9999; background:rgba(0,0,0,.95); display:none; align-items:center; justify-content:center; }
.ev-lightbox.open { display:flex; }
.ev-lightbox img { max-height:92vh; max-width:92vw; object-fit:contain; border-radius:4px; }
.ev-lb-close { position:absolute; top:20px; right:24px; background:none; border:none; color:#fff; font-size:40px; cursor:pointer; z-index:10; line-height:1; opacity:.7; }
.ev-lb-close:hover { opacity:1; }
.ev-lb-nav { position:absolute; top:50%; transform:translateY(-50%); width:52px; height:52px; border-radius:50%; border:none; background:rgba(255,255,255,.12); color:#fff; font-size:28px; cursor:pointer; z-index:10; display:flex; align-items:center; justify-content:center; }
.ev-lb-nav:hover { background:rgba(255,255,255,.25); }
.ev-lb-prev { left:20px; }
.ev-lb-next { right:20px; }