:root{
  --blue:#0b3d5c;
  --blue-90:rgba(11,61,92,0.9);
  --light:#ffffff;
  --text:#1d2730;
  --muted:#6a7784;
  --accent:#e0472e;
  --card:#ffffff;
  --card-border:#e6eef5;
  --shadow:0 6px 18px rgba(0,0,0,.06);
  --radius:14px;
  --container:1200px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;}
body{
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  color:var(--text);background:#f6f9fc;line-height:1.6;
  min-height:100vh;
  display:flex;
  flex-direction:column;
}
a{color:inherit;text-decoration:none;cursor:pointer}
img{max-width:100%;display:block}
.container{max-width:var(--container);margin:0 auto;padding:0 20px}

/* Topbar / Navigation */
.topbar{position:sticky;top:0;z-index:1000;background:var(--blue);color:var(--light);box-shadow:var(--shadow);}
.nav{height:64px;display:flex;align-items:center;justify-content:space-between;}
.brand{display:flex;align-items:center;gap:10px;font-weight:700;}
.brand-logo{width:46px;height:46px;border-radius:50%;background:url('../images/Website/ASV-LOGO.gif')center/cover no-repeat;background-color:#123;box-shadow:0 0 0 2px rgba(255,255,255,.3);}
.brand-title{font-size:1.1rem;letter-spacing:0.03em;text-transform:uppercase;}
.nav-links{display:flex;gap:10px;align-items:center;list-style:none;margin:0;padding:0;}
.nav-links li{position:relative;display:flex;align-items:center;gap:4px;}
.nav-links a{padding:8px 12px;border-radius:999px;color:var(--light);font-size:.95rem;white-space:nowrap;transition:background .15s, transform .1s;}
.nav-links a:hover{background:rgba(255,255,255,.12);transform:translateY(-1px);}
.nav-links a.active{background:rgba(255,255,255,.18);font-weight:600;box-shadow:0 0 0 1px rgba(255,255,255,.35);}
.dropdown-content{
  display:none;position:absolute;top:40px;left:0;background:var(--blue-90);
  border-radius:14px;flex-direction:column;min-width:210px;box-shadow:var(--shadow);padding:4px;
}
.dropdown-content a{padding:8px 12px;display:block;border-radius:10px;}
.dropdown-content a:hover{background:rgba(255,255,255,.1);}
.dropdown-toggle{font-size:.7rem;cursor:pointer;user-select:none;color:var(--light);padding-right:4px;}
.show-dropdown .dropdown-content{display:flex;}
.burger{display:none;flex-direction:column;gap:5px;cursor:pointer;margin-left:10px;}
.burger span{width:26px;height:3px;background:#fff;border-radius:3px}
@media(max-width:980px){
  .burger{display:flex}
  .nav-links{position:absolute;top:64px;right:16px;left:16px;background:var(--blue-90);border-radius:16px;padding:12px;
    display:none;flex-direction:column;gap:4px;}
  .nav-links.show{display:flex}
  .dropdown-content{position:static;background:none;box-shadow:none;padding:0;margin-left:10px;}
}

/* Hero */
.hero{position:relative;isolation:isolate;background:#0a2f48;color:var(--light);
  padding:clamp(48px,7vw,96px) 0;overflow:hidden;}
.hero::before{content:"";position:absolute;inset:0;z-index:-2;
  background:url('../images/Website/Sommertal_sommer.jpeg') center/cover no-repeat fixed;filter:brightness(.6);}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(to bottom,rgba(0,0,0,0)0%,rgba(0,0,0,.35)60%,rgba(0,0,0,.6)100%);}
.hero-inner{display:grid;gap:18px}
.hero h1{margin:0;font-size:clamp(28px,4.2vw,42px);}
.hero p{margin:0;color:#e6edf3;max-width:820px}
.hero-cta{margin-top:14px;display:flex;gap:12px;flex-wrap:wrap}
.btn{background:var(--accent);color:#fff;border:none;border-radius:999px;
  padding:10px 18px;font-weight:600;cursor:pointer;box-shadow:var(--shadow);display:inline-block;font-size:.95rem;}
.btn.secondary{background:transparent;border:2px solid #ffffff55}

/* Layout & Content */
main{min-height:60vh;}
.section{padding:clamp(28px,4.2vw,56px) 0}
.section h1,.section h2{margin:0 0 12px;font-size:clamp(22px,3vw,28px)}
.sub{color:var(--muted);margin-bottom:20px}
.news-grid{display:grid;gap:18px;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));}
.card{background:var(--card);border:1px solid var(--card-border);border-radius:var(--radius);
  box-shadow:var(--shadow);overflow:hidden;display:flex;flex-direction:column;min-height:100%;cursor:pointer;}
.card-img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  display: block;
  border-bottom: 1px solid #e6eef5;
}

.card-body{padding:14px 14px 16px}
.tag{display:inline-block;font-size:.8rem;color:#fff;background:var(--blue);
  padding:4px 8px;border-radius:999px;margin-bottom:8px}
.card h3{margin:6px 0 8px;font-size:1.1rem}
.meta{font-size:.85rem;color:var(--muted);margin-bottom:10px}

.text-block{max-width:900px;}
.text-block p{margin:0 0 12px;}
.text-block ul{padding-left:20px;margin:0 0 12px;}
.text-block li{margin-bottom:6px;}

/* Gewässer-Liste – hervorgehobene, anklickbare „Karten“ */
.gewaesser-list{
  list-style:none;
  padding:0;
  margin:24px 0;
  display:grid;
  gap:12px;
  grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
}

.gewaesser-list li{
  margin:0;
}

.gewaesser-link{
  display:flex;
  flex-direction:column;
  padding:12px 16px;
  border-radius:var(--radius);
  border:1px solid var(--card-border);
  background:var(--card);
  box-shadow:var(--shadow);
  transition:transform .12s ease, box-shadow .12s ease, border-color .12s ease, background .12s ease;
}

.gewaesser-title{
  font-weight:600;
  font-size:1.02rem;
  margin-bottom:2px;
}

.gewaesser-desc{
  font-size:.9rem;
  color:var(--muted);
}

/* Hover-Effekt, damit es klar „klickbar“ wirkt */
.gewaesser-link:hover{
  transform:translateY(-2px);
  border-color:var(--accent);
  background:#ffffff;
  box-shadow:0 8px 20px rgba(0,0,0,.08);
}

/* Optional: Fokus-Style für Tastatur-Nutzer */
.gewaesser-link:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:3px;
}

.gallery{display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));margin-top:10px;}
.gallery img{width:100%;height:150px;object-fit:cover;border-radius:10px;cursor:pointer;transition:transform .2s, box-shadow .2s;}
.gallery img:hover{transform:scale(1.03);box-shadow:var(--shadow);}

/* Tables */
.table{width:100%;border-collapse:collapse;margin-top:10px;}
.table th,.table td{padding:8px 10px;border-bottom:1px solid var(--card-border);text-align:left;font-size:.95rem;}
.table th{background:#edf3fa;font-weight:600;}

/* Modal for News-Details */
.modal-overlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.6);
  display:none;
  align-items:center;
  justify-content:center;
  z-index:1500;
}
.modal-overlay.show{display:flex;}
.modal-inner{
  background:#fff;
  border-radius:16px;
  max-width:960px;
  width:90%;
  max-height:90vh;
  overflow:auto;
  position:relative;
  padding:20px;
  box-shadow:var(--shadow);
}
.modal-close{
  position:absolute;
  top:10px;
  right:14px;
  border:none;
  background:transparent;
  color:#444;
  font-size:1.6rem;
  cursor:pointer;
}
.modal-body h2{margin-top:0;}

/* Image Lightbox */
.image-lightbox{
  position:fixed;
  inset:0;
  display:none;
  align-items:center;
  justify-content:center;
  background:rgba(0,0,0,.85);
  z-index:2000;
}
.image-lightbox.show{display:flex;}
.image-lightbox-img{
  max-width:90vw;
  max-height:90vh;
  border-radius:12px;
  background:#000;
}

/* Lightbox Navigation Buttons (Variante B) */
.lightbox-button{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:46px;
  height:46px;
  border-radius:50%;
  border:none;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:26px;
  line-height:1;
  background:rgba(0,0,0,0.45);
  color:#fff;
  cursor:pointer;
  transition:background 0.15s, transform 0.15s;
}
.lightbox-button:hover{
  background:rgba(0,0,0,0.65);
  transform:translateY(-50%) scale(1.05);
}
.lightbox-prev{
  left:24px;
}
.lightbox-next{
  right:24px;
}

@media (max-width: 600px){
  .lightbox-button{
    width:40px;
    height:40px;
    font-size:22px;
  }
  .lightbox-prev{
    left:12px;
  }
  .lightbox-next{
    right:12px;
  }
}

.map-container {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 */
    height: 0;
    overflow: hidden;
    border-radius: 6px;
}
.map-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.image-lightbox-figure{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:0.5rem;
}

.image-lightbox-caption{
  font-size:0.9rem;
  color:#fff;
  text-align:center;
  max-width:90vw;
}

/* Footer */
footer{background:#0a2f48;color:#e7eef4;padding:28px 0;margin-top:24px;}
.footer-grid{display:grid;gap:20px;grid-template-columns:2fr 1fr 1fr;}
@media(max-width:900px){.footer-grid{grid-template-columns:1fr}}
.small{font-size:.9rem;color:#cfd9e3}
.footer-bottom{margin-top:10px;font-size:.8rem;color:#aeb9c5;text-align:right;}
footer a{color:#dbe7ff;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;}