@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Playfair+Display:wght@600;700;800&display=swap');

:root { --ink:#252019; --muted:#756e62; --cream:#fbf7ed; --paper:#fffdf8; --line:#e9e0cf; --gold:#e9a918; --gold-dark:#b87900; --olive:#617b52; --olive-dark:#405b3c; --night:#222c20; --shadow:0 18px 45px rgba(72,52,21,.10); --radius:22px; --max:1160px; }
* { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }
body { background:var(--cream); color:var(--ink); font-family:'DM Sans',Arial,sans-serif; line-height:1.6; }
a { color:inherit; text-decoration:none; }
img { max-width:100%; display:block; }
button { font:inherit; }
.container { width:min(calc(100% - 40px),var(--max)); margin:auto; }
.skip-link { position:fixed; top:10px; left:10px; z-index:100; padding:10px 16px; border-radius:8px; background:var(--gold); color:var(--ink); transform:translateY(-160%); transition:transform .2s; }
.skip-link:focus { transform:translateY(0); }
.site-header { position:sticky; top:0; z-index:20; background:rgba(251,247,237,.90); border-bottom:1px solid rgba(233,224,207,.8); backdrop-filter:blur(16px); }
.navbar { min-height:82px; display:flex; align-items:center; justify-content:space-between; gap:30px; }
.brand { display:inline-flex; align-items:center; gap:11px; color:var(--ink); line-height:1.05; }
.brand-mark { display:grid; place-items:center; width:42px; height:42px; border-radius:13px; background:var(--gold); font-size:22px; box-shadow:0 7px 16px rgba(233,169,24,.25); }
.brand strong,.brand small { display:block; }.brand strong { font-size:16px; letter-spacing:-.02em; }.brand small { color:var(--muted); font-size:11px; letter-spacing:.15em; text-transform:uppercase; margin-top:4px; }
.nav-menu { display:flex; align-items:center; gap:28px; color:#5f584d; font-size:14px; font-weight:600; }.nav-menu a { transition:color .2s; }.nav-menu a:hover { color:var(--gold-dark); }.nav-cta { padding:11px 19px; border:1px solid var(--line); border-radius:999px; color:var(--ink)!important; background:rgba(255,255,255,.55); }.nav-cta:hover { border-color:var(--gold); background:var(--gold); }
.menu-toggle { display:none; align-items:center; gap:8px; border:0; background:transparent; color:var(--ink); cursor:pointer; }.menu-icon { font-size:24px; line-height:1; }.menu-label { font-size:13px; font-weight:700; }
.hero { position:relative; min-height:680px; overflow:hidden; background:linear-gradient(135deg,#344832 0%,#273324 100%); color:#fff; }
.hero:before { position:absolute; inset:0; content:""; opacity:.18; background-image:url('assets/vereinsheim2.png'); background-size:cover; background-repeat:no-repeat; background-position:center; }
.hero-inner { position:relative; z-index:1; min-height:680px; display:grid; grid-template-columns:1fr .85fr; align-items:center; gap:50px; }.hero-copy { padding:60px 0; }.eyebrow { display:flex; align-items:center; gap:9px; margin-bottom:18px; color:#d9bd78; font-size:12px; font-weight:700; letter-spacing:.15em; text-transform:uppercase; }.eyebrow-dot { display:inline-block; width:8px; height:8px; border-radius:50%; background:var(--gold); box-shadow:0 0 0 5px rgba(233,169,24,.18); }.eyebrow-dark { color:var(--gold-dark); }.hero h1 { max-width:670px; margin-bottom:22px; font-family:'Playfair Display',Georgia,serif; font-size:clamp(45px,6vw,79px); font-weight:700; line-height:1.03; letter-spacing:-.04em; }.hero h1 span { color:#f4c24d; }.hero-text { max-width:525px; color:rgba(255,255,255,.76); font-size:17px; }.hero-actions { display:flex; flex-wrap:wrap; gap:13px; margin-top:31px; }.button { display:inline-flex; align-items:center; justify-content:center; gap:13px; min-height:50px; padding:13px 21px; border:1px solid transparent; border-radius:999px; font-size:14px; font-weight:700; transition:transform .2s,background .2s,box-shadow .2s; }.button:hover { transform:translateY(-2px); }.button-primary { background:var(--gold); color:#282015; box-shadow:0 10px 24px rgba(233,169,24,.18); }.button-primary:hover { background:#f4bd36; box-shadow:0 14px 27px rgba(233,169,24,.25); }.button-ghost { border-color:rgba(255,255,255,.32); color:white; }.button-ghost:hover { border-color:white; background:rgba(255,255,255,.1); }.hero-meta { display:flex; gap:33px; margin-top:64px; }.hero-meta div { display:grid; gap:1px; }.hero-meta strong { color:#f4c24d; font-family:'Playfair Display',Georgia,serif; font-size:25px; }.hero-meta span { color:rgba(255,255,255,.56); font-size:11px; }

.hero-art { position:relative; min-height:500px; }.honeycomb { position:absolute; width:250px; height:290px; opacity:.65; background:linear-gradient(120deg,rgba(234,180,55,.35),rgba(234,180,55,.05)); clip-path:polygon(25% 3%,75% 3%,100% 25%,100% 75%,75% 97%,25% 97%,0 75%,0 25%); }.honeycomb:after { position:absolute; inset:20px; content:""; border:2px solid rgba(244,194,77,.55); clip-path:inherit; }.honeycomb-back { top:60px; right:11%; transform:rotate(29deg); }.honeycomb-front { bottom:37px; left:11%; width:210px; height:245px; transform:rotate(-25deg); opacity:.38; }.bee-orbit { position:absolute; top:95px; left:15%; width:350px; height:350px; border:1px dashed rgba(244,194,77,.5); border-radius:50%; }.bee { position:absolute; top:185px; left:36%; display:grid; place-items:center; width:115px; height:115px; border-radius:50%; background:#f4c24d; box-shadow:0 18px 35px rgba(0,0,0,.22); font-size:63px; transform:rotate(-14deg); animation:float 4.5s ease-in-out infinite; }.hero-badge { position:absolute; right:0; bottom:42px; display:grid; grid-template-columns:43px 1fr; column-gap:10px; align-items:center; width:210px; padding:14px; border:1px solid rgba(255,255,255,.2); border-radius:16px; background:rgba(255,255,255,.11); backdrop-filter:blur(8px); }.hero-badge span { grid-row:span 2; display:grid; place-items:center; width:38px; height:38px; border-radius:50%; background:var(--gold); }.hero-badge strong { font-size:12px; }.hero-badge small { color:rgba(255,255,255,.58); font-size:10px; }
.hero-glow { position:absolute; border-radius:50%; filter:blur(2px); pointer-events:none; }.hero-glow-one { width:500px; height:500px; top:-300px; right:-100px; background:rgba(228,171,27,.12); }.hero-glow-two { width:350px; height:350px; bottom:-220px; left:25%; background:rgba(108,145,76,.18); }.scroll-hint { position:absolute; z-index:2; right:40px; bottom:32px; display:flex; align-items:center; gap:10px; color:rgba(255,255,255,.55); font-size:11px; }.scroll-hint span { display:block; width:28px; height:43px; border:1px solid rgba(255,255,255,.38); border-radius:20px; }.scroll-hint span:after { display:block; width:4px; height:7px; margin:8px auto; border-radius:4px; background:var(--gold); content:""; animation:scroll 1.7s ease-in-out infinite; }
.section { padding:105px 0; }.about-section { background:var(--paper); }.split-layout { display:grid; grid-template-columns:.95fr 1fr; align-items:center; gap:105px; }.section-copy h2,.section-heading h2,.contact-box h2 { margin-bottom:20px; font-family:'Playfair Display',Georgia,serif; font-size:clamp(34px,4vw,51px); line-height:1.08; letter-spacing:-.035em; }.section-copy>p { max-width:505px; color:var(--muted); font-size:16px; }.section-visual { position:relative; min-height:420px; }.visual-card { position:absolute; inset:20px 32px 0 0; overflow:hidden; border-radius:28px; background:linear-gradient(145deg,#e1b850 0%,#f3d27b 53%,#c4a24f 100%); box-shadow:var(--shadow); }.visual-card:before { position:absolute; inset:0; content:""; opacity:.22; background:repeating-linear-gradient(165deg,transparent 0 19px,#fff 20px 22px); transform:rotate(-19deg) scale(1.4); }.visual-sun { position:absolute; top:40px; right:46px; color:#fff8ce; font-size:47px; }.field-lines { position:absolute; right:-10%; bottom:31px; left:-15%; height:165px; border-radius:50% 50% 0 0; background:linear-gradient(165deg,#687a41,#48613b); transform:rotate(-8deg); }.field-lines:before,.field-lines:after { position:absolute; inset:20px 0; content:""; border-top:2px solid rgba(240,218,125,.45); border-radius:50%; transform:rotate(4deg); }.field-lines:after { inset:65px 0; }.visual-hive { position:absolute; z-index:1; right:28%; bottom:55px; display:grid; place-items:center; width:70px; height:100px; border-radius:38% 38% 14px 14px; background:#c98518; color:#ffdb72; font-size:46px; box-shadow:5px 8px 0 rgba(66,53,21,.2); }.floating-note { position:absolute; right:0; bottom:25px; display:grid; grid-template-columns:43px 1fr; column-gap:10px; align-items:center; width:185px; padding:14px; border:1px solid var(--line); border-radius:16px; background:var(--paper); box-shadow:var(--shadow); }.floating-note span { grid-row:span 2; display:grid; place-items:center; width:38px; height:38px; border-radius:50%; background:#e5eedf; font-size:20px; }.floating-note strong { font-size:12px; }.floating-note small { color:var(--muted); font-size:10px; }.check-list { display:grid; gap:11px; margin:26px 0 30px; list-style:none; color:#5e584e; font-size:14px; }.check-list li { display:flex; align-items:center; gap:12px; }.check-list span { display:grid; place-items:center; width:22px; height:22px; border-radius:50%; background:#e6eedf; color:var(--olive-dark); font-size:12px; font-weight:700; }
.text-link { display:inline-flex; align-items:center; gap:9px; color:var(--olive-dark); font-size:13px; font-weight:700; }.text-link:hover { color:var(--gold-dark); }.text-link span { transition:transform .2s; }.text-link:hover span { transform:translateX(4px); }
.features-section { background:var(--cream); }.section-heading { max-width:650px; margin:0 auto 48px; text-align:center; }.section-heading>p:last-child { color:var(--muted); }.feature-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }.feature-card { padding:31px; border:1px solid var(--line); border-radius:var(--radius); background:var(--paper); transition:transform .2s,box-shadow .2s; }.feature-card:hover { transform:translateY(-5px); box-shadow:var(--shadow); }.feature-card-highlight { background:var(--olive-dark); color:white; border-color:var(--olive-dark); }.feature-card-highlight h3 { color:white; }.feature-card-highlight p { color:rgba(255,255,255,.68); }.feature-card-highlight a { color:#f4c24d; }.feature-icon { display:grid; place-items:center; width:54px; height:54px; margin-bottom:23px; border-radius:16px; background:#fff1cc; font-size:25px; }.feature-card h3 { margin-bottom:10px; font-size:18px; }.feature-card p { min-height:72px; margin-bottom:22px; color:var(--muted); font-size:14px; }
.events-section { background:var(--paper); }.section-heading-row { display:flex; align-items:end; justify-content:space-between; max-width:none; margin-bottom:34px; text-align:left; }.section-heading-row h2 { margin-bottom:0; }.event-list { display:grid; gap:12px; }.event-item { display:grid; grid-template-columns:90px 1fr 44px; align-items:center; gap:25px; padding:19px 22px; border:1px solid var(--line); border-radius:16px; background:var(--cream); transition:background .2s,transform .2s; }.event-item:hover { background:#fff9e6; transform:translateX(4px); }.event-date { display:grid; place-items:center; width:65px; height:66px; border-radius:13px; background:#fff1ca; color:var(--gold-dark); }.event-date strong { font-family:'Playfair Display',Georgia,serif; font-size:27px; line-height:1; }.event-date span { font-size:10px; font-weight:700; letter-spacing:.12em; }.event-type,.news-date { margin-bottom:2px; color:var(--gold-dark); font-size:10px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; }.event-info h3 { margin-bottom:2px; font-size:16px; }.event-info>p:last-child { color:var(--muted); font-size:12px; }.event-arrow { display:grid; place-items:center; width:40px; height:40px; border:1px solid var(--line); border-radius:50%; color:var(--olive-dark); font-size:19px; transition:background .2s; }.event-arrow:hover { background:var(--gold); }
.news-section { background:var(--cream); }.news-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }.news-card { overflow:hidden; border:1px solid var(--line); border-radius:var(--radius); background:var(--paper); }.news-image { display:grid; place-items:center; height:190px; font-size:62px; }.news-image-one { background:linear-gradient(135deg,#d2e5a6,#f2cf5f); }.news-image-two { background:linear-gradient(135deg,#edc15a,#d88837); }.news-image-three { background:linear-gradient(135deg,#b8cec0,#5e8264); }.news-content { padding:23px; }.news-content h3 { min-height:48px; margin:8px 0 9px; font-family:'Playfair Display',Georgia,serif; font-size:20px; line-height:1.2; }.news-content>p:not(.news-date) { min-height:50px; margin-bottom:18px; color:var(--muted); font-size:13px; }
.contact-section { padding:80px 0; background:var(--olive-dark); color:white; }.contact-box { display:flex; align-items:center; justify-content:space-between; gap:40px; }.contact-box h2 { max-width:620px; color:white; }.contact-box>div:first-child>p:last-child { max-width:560px; color:rgba(255,255,255,.68); }.contact-actions { min-width:260px; }.contact-actions>p { margin-top:16px; color:rgba(255,255,255,.56); font-size:12px; line-height:1.8; }
.site-footer { padding:55px 0 24px; background:var(--night); color:rgba(255,255,255,.63); }.footer-grid { display:grid; grid-template-columns:2fr 1fr 1fr; gap:50px; padding-bottom:45px; }.footer-brand { margin-bottom:18px; color:white; }.site-footer h3 { margin-bottom:16px; color:#f4c24d; font-size:12px; letter-spacing:.12em; text-transform:uppercase; }.site-footer p { font-size:13px; }.site-footer> .container a:not(.brand) { display:block; width:max-content; margin:7px 0; color:rgba(255,255,255,.63); font-size:13px; }.site-footer> .container a:not(.brand):hover { color:#f4c24d; }.footer-bottom { display:flex; justify-content:space-between; gap:20px; padding-top:22px; border-top:1px solid rgba(255,255,255,.12); color:rgba(255,255,255,.4); font-size:11px; }
@keyframes float { 0%,100% { transform:translateY(0) rotate(-14deg); } 50% { transform:translateY(-15px) rotate(-8deg); } } @keyframes scroll { 0% { opacity:0; transform:translateY(0); } 40% { opacity:1; } 100% { opacity:0; transform:translateY(15px); } }
:focus-visible { outline:3px solid var(--gold); outline-offset:4px; }
@media (max-width:850px) { .hero-inner { grid-template-columns:1fr; min-height:auto; }.hero { min-height:0; }.hero-copy { padding:90px 0 30px; }.hero-art { min-height:390px; max-width:540px; width:100%; margin:auto; }.hero-meta { margin-top:42px; }.split-layout { gap:55px; }.section { padding:78px 0; }.contact-box { align-items:flex-start; flex-direction:column; }.contact-actions { min-width:0; } }
@media (max-width:700px) { .container { width:min(calc(100% - 30px),var(--max)); }.menu-toggle { display:flex; }.nav-menu { position:absolute; top:81px; right:15px; left:15px; display:none; flex-direction:column; align-items:stretch; gap:0; padding:10px; border:1px solid var(--line); border-radius:16px; background:var(--paper); box-shadow:var(--shadow); }.nav-menu.is-open { display:flex; }.nav-menu a { padding:12px 14px; border-radius:9px; }.nav-menu a:hover { background:#fff4d7; }.nav-cta { margin-top:5px; text-align:center; }.hero h1 { font-size:48px; }.hero-art { min-height:310px; transform:scale(.88); transform-origin:top center; margin-bottom:-45px; }.hero-meta { gap:19px; }.hero-meta strong { font-size:21px; }.hero-meta span { font-size:10px; }.scroll-hint { display:none; }.split-layout { grid-template-columns:1fr; }.section-visual { min-height:340px; }.visual-card { inset:10px 20px 0 0; }.floating-note { right:0; }.feature-grid,.news-grid { grid-template-columns:1fr; }.feature-card p,.news-content h3,.news-content>p:not(.news-date) { min-height:0; }.section-heading-row { align-items:flex-start; flex-direction:column; gap:17px; }.event-item { grid-template-columns:65px 1fr 35px; gap:13px; padding:14px; }.event-arrow { width:34px; height:34px; }.footer-grid { grid-template-columns:1fr 1fr; gap:35px 20px; }.footer-grid>div:first-child { grid-column:1/-1; }.footer-bottom { flex-direction:column; gap:5px; } }
@media (prefers-reduced-motion:reduce) { *,*:before,*:after { scroll-behavior:auto!important; animation:none!important; transition:none!important; } }



/* Slideshow Basis-Styling */
.slideshow-container {
  position: relative;
  width: 100%;
  max-width: 100%;
  margin: auto;
  overflow: hidden;
  border-radius: 12px; /* Falls deine visual-card abgerundet war */
}

/* Versteckt die Slides standardmäßig */
.my-slide {
  display: none;
}

/* Verhindert, dass Bilder gestaucht werden */
.visual-image {
  width: 100%;
  display: block;
  object-fit: cover;
}

/* Styling für die Pfeile */
.prev-slide, .next-slide {
  cursor: pointer;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: auto;
  padding: 16px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 0.3s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
  background-color: rgba(0, 0, 0, 0.3); /* Dezenter Hintergrund */
}

/* Rechten Pfeil rechts positionieren */
.next-slide {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* Hover-Effekt für die Pfeile */
.prev-slide:hover, .next-slide:hover {
  background-color: rgba(0, 0, 0, 0.8);
}

/* Sanfter Einblende-Effekt beim Wechseln */
.fade {
  animation-name: fadeAnimation;
  animation-duration: 0.5s;
}

@keyframes fadeAnimation {
  from {opacity: .4} 
  to {opacity: 1}
}