:root{
  --primary:#0f4c81;
  --secondary:#f4b400;
  --bg:#f7f9fc;
  --text:#1f2933;
  --card:#ffffff;
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:Inter,sans-serif;background:var(--bg);color:var(--text);line-height:1.6}
a,button{min-height:44px}
a{text-decoration:none}

section{width:100%;padding:4rem 2rem;scroll-margin-top:90px}
.container{max-width:1200px;margin:0 auto}
.container h2{text-align:center;margin-bottom:1.5rem}

/* HEADER */
header{position:sticky;top:0;z-index:20;background:linear-gradient(135deg,#0f4c81,#163d5a)}
.nav{display:flex;align-items:center;justify-content:space-between;padding:1rem 2rem}
.logo{color:#fff;font-weight:800}
nav ul{display:flex;gap:1.5rem;list-style:none}
nav a{color:#fff;font-weight:500}
.menu-toggle{display:none;background:none;border:0;color:#fff;font-size:2rem}

/* HERO */
.hero{
  min-height:90vh;
  background:url("bilder/hero-landstrasse.webp") center/cover no-repeat;
  position:relative;
  display:flex;align-items:center;justify-content:center;
}
.hero::after{content:"";position:absolute;inset:0;background:rgba(15,76,129,.55)}
.hero-content{position:relative;z-index:1;text-align:center;color:#fff;max-width:900px;padding:2rem}

.hero-content .intro{font-size:3.4rem;font-weight:800}
.hero h1{font-size:3.4rem;font-weight:800}
.hero-text{
  margin:1.5rem auto;
  font-size:1.25rem;
  line-height:1.8;
  font-weight:600;
  color:var(--secondary);
}
.hero-text p{margin-bottom:1.1rem}

.hero-toggle{
  display:none;margin:1rem auto;
  border:2px solid var(--secondary);
  background:none;color:var(--secondary);
  padding:.5rem 1.2rem;border-radius:999px
}
.slogan{font-size:2rem;color:var(--secondary);margin:1.5rem 0;font-family:cursive}

/* BUTTON */
.btn{padding:1rem 2.4rem;border-radius:999px;font-weight:600;display:inline-block}
.btn.primary{background:var(--secondary);color:#1a1a1a}
.btn.light{background:#fff;color:#0f4c81}

/* CARDS */
.cards{display:grid;gap:2rem;grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.card{background:var(--card);padding:2rem;border-radius:1.25rem;box-shadow:0 15px 35px rgba(0,0,0,.12)}
.badge{background:linear-gradient(135deg,var(--secondary),#ffd666);padding:.35rem .75rem;border-radius:999px;font-size:.75rem;font-weight:700}

/* VALUES */
.values{list-style:none;margin-top:2rem;display:grid;gap:1.5rem}
.values li{display:flex;gap:1rem}
.values .icon{font-size:1.6rem}

/* CTA */
.community-cta{
  margin-top:3rem;
  padding:3rem 2rem;
  background:linear-gradient(135deg,#0f4c81,#163d5a);
  border-radius:1.5rem;
  color:#fff;text-align:center;
}

/* GALLERY */
.gallery{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:1.5rem;
}
.gallery-item{
  aspect-ratio:4/3;
  border-radius:1.25rem;
  background:#e5e7eb center/cover no-repeat;
  cursor:pointer;
}

/* LIGHTBOX */
.lightbox{
  position:fixed;inset:0;
  background:rgba(0,0,0,.85);
  display:none;align-items:center;justify-content:center;
  z-index:1000;
}
.lightbox.active{display:flex}
.lightbox img{max-width:90vw;max-height:90vh;border-radius:1rem}

/* Skip-Link für Tastatur-Navigation */
.skip-link{
  position:absolute;
  left:-9999px;
  top:0;
  background:#fff;
  color:#000;
  padding:.75rem 1rem;
  z-index:10000;
  border-radius:.5rem;
}

.skip-link:focus{
  left:1rem;
  top:1rem;
}

.sr-only{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

/* Sichtbarer Fokus für Tastatur-Navigation */
:focus-visible{
  outline:3px solid var(--secondary);
  outline-offset:3px;
}

/* Speziell für Galerie */
.gallery-item:focus-visible{
  box-shadow:0 0 0 4px rgba(244,180,0,.6);
}

/* FORM STATUS */
.form-status{
  display:none;
  margin-top:1.5rem;
  padding:1.2rem;
  border-radius:1rem;
  font-weight:600;
}
.form-success{background:#e6f7ee;color:#065f46}
.form-error{background:#fdecea;color:#7f1d1d}

/* FORM DESIGN */
#kontakt form input,
#kontakt form textarea{
  width:100%;
  padding:.9rem 1.1rem;
  font-size:1rem;
  border-radius:.9rem;
  border:1px solid #e5e7eb;
  box-shadow:0 6px 18px rgba(0,0,0,.06);
}
#kontakt form input:focus,
#kontakt form textarea:focus{
  outline:none;
  border-color:var(--primary);
  box-shadow:0 0 0 3px rgba(15,76,129,.15);
}
#kontakt form textarea{min-height:140px;resize:vertical}

/* FOOTER */
footer{background:#0b2f4a;color:#e5e7eb;text-align:center;padding:2.5rem 1.5rem}
footer a{color:var(--secondary)}

/* MOBILE */
@media(max-width:768px){
.menu-toggle{display:block}
nav ul{display:none;flex-direction:column;position:absolute;top:100%;left:0;right:0;background:#0f4c81;padding:1.5rem}
nav ul.active{display:flex}
.hero h1,.hero-content .intro{font-size:2.2rem}
.hero-text{max-height:7.5em;overflow:hidden}
.hero-text.expanded{max-height:none}
.hero-toggle{display:block}
}

@media (prefers-reduced-motion: reduce){
*{animation:none!important;transition:none!important}
}

select{
  margin:1.5rem 0 2.5rem;
  padding:.7rem 1.2rem;
  border-radius:999px;
  font-weight:600;
}

.event-heading{
  margin:3rem 0 1rem;
}
#album{
  margin-bottom:3em!important;
}