:root{
  --green:#006F3C;
  --yellow:#F9D900;
  --black:#000000;
  --white:#ffffff;
  --bg:var(--white);
  --text:#1b1b1b;
  --radius:16px;
  --shadow:0 6px 18px rgba(0,0,0,.08);
}


html[lang="de-CH"] q{ quotes:'«' '»' '‹' '›'; }


*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:'Oswald',Arial,sans-serif;
  color:var(--text);
  background:var(--bg);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  hyphens:auto;
}
h1,h2,h3{letter-spacing:.2px}
h1{font-size:clamp(2rem,4vw,3rem)}
h2{font-size:clamp(1.25rem,2.5vw,1.75rem)}
.lead{font-weight:500}
img{max-width:100%;height:auto;display:block}

.container{max-width:1200px;margin-inline:auto;padding:0 16px}
.inner{display:flex;align-items:center;justify-content:space-between;gap:16px}


.site-header{position:sticky;top:0;z-index:10;background:var(--white);border-bottom:4px solid var(--green)}
.brand-link{display:flex;align-items:center;gap:10px;text-decoration:none;color:inherit;font-weight:700}
.nav-list{list-style:none;display:flex;gap:18px;margin:0;padding:12px 0}
.nav-list a{text-decoration:none;color:#222;padding:8px 10px;border-radius:10px}
.nav-list a.active,.nav-list a:hover{background:var(--yellow);color:#111}


.skip-link{position:absolute;left:-9999px}
.skip-link:focus{left:8px;top:8px;background:var(--yellow);color:#000;padding:8px 12px;border-radius:8px}


.hero{position:relative;isolation:isolate;min-height:56svh;display:grid;place-items:center;text-align:center;color:var(--white)}
.hero::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(180deg,rgba(0,0,0,.35),rgba(0,0,0,.45)),
    url('../images/liam-foto-am-schiessen.jpg') center 45%/cover no-repeat;
}

.hero-bar{height:8px;background:var(--yellow)}
.content h1{margin:.2em 0}
.cta{display:flex;gap:12px;justify-content:center}


.btn{display:inline-block;padding:10px 16px;border-radius:12px;text-decoration:none;font-weight:700}
.btn-primary{background:var(--green);color:var(--white)}
.btn-primary:hover{filter:brightness(1.05)}
.btn-secondary{background:var(--yellow);color:#111;box-shadow:inset 0 0 0 2px rgba(0,0,0,.3)}
.btn-link{color:var(--green);text-decoration:underline;text-underline-offset:3px}


.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin:28px auto 40px}
.card{background:var(--white);border-radius:var(--radius);box-shadow:var(--shadow);padding:16px}
.page-header{margin:24px 0 12px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin:18px 0 28px}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;margin:18px 0 28px}


.wide{margin:28px 0}
.caption{font-size:.95rem;color:#555;margin-top:6px}


.spenden-bild img{
  width:100%;
  height:auto;
  border-top:4px solid var(--green);
  border-bottom:4px solid var(--green);
  display:block;
}


.form fieldset{border:2px solid var(--green);border-radius:16px;padding:16px}
.form legend{padding:0 8px;font-weight:700}
.form label{display:block;margin-top:12px;font-weight:600}
.form input,.form textarea{width:100%;padding:10px 12px;border:1.5px solid #ddd;border-radius:12px}
.form input:focus,.form textarea:focus{outline:3px solid var(--yellow);border-color:var(--green)}
.form button{margin-top:16px}


.site-footer{border-top:4px solid var(--green);background:#111;color:#eee;padding:18px 0;margin-top:40px}
.site-footer a{color:#ddd;text-decoration:underline;text-underline-offset:3px}

/* EIN Responsive-Breakpoint (Handy) */
@media (max-width:640px){
  .inner{flex-wrap:wrap}
  .nav-list{flex-wrap:wrap}
  .cards,.grid-3,.grid-2{grid-template-columns:1fr}
  .hero{min-height:48svh}
}