:root{--logo-h:86px;
  --green:#2f5635;
  --green-700:#284a2e;
  --beige:#b7a777;
  --beige-100:#e9e3d1;
  --text:#1e2320;
  --muted:#5d665f;
  --bg:#f8f7f4;
  --radius:18px;
  --shadow:0 6px 18px rgba(0,0,0,.07);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  color:var(--text);
  background:var(--bg);
  line-height:1.6;
}
img{max-width:100%;display:block}
.container{width:min(1100px, 92%);margin-inline:auto}
h1,h2,h3{line-height:1.15;margin:0 0 .6rem}
h1{font-size:clamp(2.2rem,4.5vw,3.2rem);letter-spacing:.2px}
h2{font-size:clamp(1.5rem,2.8vw,2.2rem)}
.h4{font-size:1.05rem;margin:.2rem 0 1rem}
p{margin:.5rem 0 1rem}
a{color:var(--green);text-decoration:none}
a:hover{text-decoration:underline}
.muted{color:var(--muted)}
.mt-sm{margin-top:.5rem}

/* Header */
.site-header{
  position:sticky;top:0;z-index:50;
  background:rgba(248,247,244,.88);
  backdrop-filter:saturate(140%) blur(8px);
  border-bottom:1px solid rgba(0,0,0,.06);
}
.header-inner{display:flex;align-items:center;justify-content:space-between;padding:.6rem 0}
.brand{display:flex;gap:.6rem;align-items:center}
.brand img{height:var(--logo-h);width:auto;border-radius:12px;box-shadow:var(--shadow)}
.brand-text{display:flex;flex-direction:column}
.brand-text small{color:var(--muted);margin-top:-2px}

.main-nav ul{display:flex;gap:.9rem;align-items:center;margin:0;padding:0;list-style:none}
.main-nav a{padding:.45rem .7rem;border-radius:12px}
.main-nav a:hover{background:rgba(183,167,119,.15);text-decoration:none}
.btn{background:var(--green);border:none;color:white;padding:.7rem 1rem;border-radius:14px;box-shadow:var(--shadow);display:inline-block}
.btn:hover{filter:brightness(.95);text-decoration:none}
.btn-ghost{background:transparent;border:1px solid var(--green);color:var(--green)}

.nav-toggle{display:none;background:none;border:0}
.nav-toggle .bar{display:block;width:24px;height:2px;background:#2a2f2c;margin:5px 0}

/* Hero */
.hero{
  position:relative;
  padding:clamp(3rem,7vw,6rem) 0;
  background:linear-gradient(180deg, var(--beige-100), #fff);
}
.hero-inner{display:grid;grid-template-columns:1.2fr .8fr;gap:2rem;align-items:center}
.hero .accent{color:var(--green);}
.parallax-card{background:linear-gradient(180deg, #fff, var(--beige-100));border-radius:var(--radius);padding:1.2rem;box-shadow:var(--shadow);transform:translateZ(0)}
.scroll-down{position:absolute;bottom:10px;left:50%;transform:translateX(-50%);color:var(--muted)}

/* Sections */
.section{padding:clamp(2.4rem,6vw,4rem) 0}
.section-alt{background:#fff}
.card{
  background:#fff;border-radius:var(--radius);padding:1rem 1.2rem;
  box-shadow:var(--shadow);
}
.card-soft{background:var(--beige-100)}
.grid.two{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem}
.grid.three{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem}
.cards .card:hover{transform:translateY(-3px);transition:transform .2s ease}

.checklist{padding-left:1.2rem}
.checklist li{margin:.4rem 0}

.process{margin-top:1rem;border-left:4px solid var(--green);padding:1rem;border-radius:12px}
.steps{margin:.6rem 0 0;padding-left:1.2rem}
.steps li{margin:.4rem 0}

/* Chips */
.chip-list{display:flex;flex-wrap:wrap;gap:.6rem}
.chip{background:rgba(47,86,53,.08);border:1px solid rgba(47,86,53,.25);padding:.35rem .7rem;border-radius:999px}
.chip:hover{background:rgba(47,86,53,.18);text-decoration:none}

/* Accordion + Details */
.fold{border-radius:var(--radius);padding:0;background:transparent}
.fold>summary{list-style:none;cursor:pointer;border-radius:var(--radius);padding:.6rem 0}
.fold>summary::-webkit-details-marker{display:none}
details>summary{font-weight:600}
details>summary:hover{color:var(--green)}
.accordion details{margin:.5rem 0;border:1px solid rgba(0,0,0,.08);border-radius:12px;padding:.6rem .8rem;background:#fff}
.accordion details[open]{border-color:var(--green)}
.accordion summary{cursor:pointer}

/* Contact form */
.field{display:flex;flex-direction:column;margin:.6rem 0}
.field.inline{flex-direction:row;gap:.4rem;align-items:center}
input,textarea{padding:.65rem .7rem;border-radius:12px;border:1px solid rgba(0,0,0,.15);background:#fff}
input:focus,textarea:focus{outline:2px solid rgba(47,86,53,.25);border-color:var(--green)}
.actions{display:flex;gap:.6rem;align-items:center;margin-top:.6rem}

/* Footer */
.site-footer{padding:2rem 0;background:linear-gradient(180deg, #fff, var(--beige-100));border-top:1px solid rgba(0,0,0,.06);margin-top:2rem}
.footer-grid{display:flex;align-items:center;justify-content:space-between;gap:1rem}
.site-footer nav a{margin-right:.8rem}

/* Reveal on scroll */
.reveal{opacity:0;transform:translateY(16px);transition:opacity .5s ease, transform .5s ease}
.reveal.is-visible{opacity:1;transform:none}

/* Responsive */
@media (max-width: 880px){
  .grid.two{grid-template-columns:1fr}
  .grid.three{grid-template-columns:1fr 1fr}
  .hero-inner{grid-template-columns:1fr}
  .main-nav ul{display:none;position:absolute;right:1rem;top:60px;background:#fff;padding:.8rem;border-radius:12px;box-shadow:var(--shadow);flex-direction:column;align-items:flex-start}
  .nav-toggle{display:block}
  .main-nav[aria-expanded="true"] ul{display:flex}
}
@media (max-width: 520px){
  .grid.three{grid-template-columns:1fr}
}
/* Utility */
.sr-only{position:absolute !important;height:1px;width:1px;overflow:hidden;clip:rect(1px,1px,1px,1px)}

/* ===== Off-canvas Drawer Menu ===== */
.menu-btn{
  background:var(--green);color:#fff;border:0;border-radius:14px;
  padding:.55rem .9rem;box-shadow:var(--shadow);font-weight:600;
}
.menu-btn:hover{filter:brightness(.95);cursor:pointer}
.drawer-backdrop{
  position:fixed;inset:0;background:rgba(0,0,0,.35);
  opacity:0;visibility:hidden;transition:opacity .25s ease;z-index:70;
}
.drawer{
  position:fixed;top:0;right:0;height:100%;width:min(420px, 92%);
  background:#fff;padding:1.2rem;box-shadow:-8px 0 28px rgba(0,0,0,.18);
  transform:translateX(105%);transition:transform .28s ease;z-index:80;
  display:flex;flex-direction:column;gap:.6rem;
}
.drawer header{display:flex;align-items:center;justify-content:space-between;margin-bottom:.8rem}
.drawer nav a{display:block;padding:.8rem 0;border-bottom:1px solid rgba(0,0,0,.06)}
.drawer.open{transform:none}
.drawer-backdrop.show{opacity:1;visibility:visible}

/* Header adjustments */
.brand img{height:var(--logo-h);width:auto;border-radius:12px;box-shadow:var(--shadow)}
@media (max-width:880px){
  .brand img{height:var(--logo-h);width:auto;border-radius:12px;box-shadow:var(--shadow)}
}
.main-nav ul{display:none} /* hide old inline list */

/* ==== Logo aspect ratio fix ==== */
.brand img{height:var(--logo-h);width:auto;border-radius:12px;box-shadow:var(--shadow)}
@media (max-width:880px){ .brand img{height:var(--logo-h);width:auto;border-radius:12px;box-shadow:var(--shadow)} }

/* ==== People/Partner Cards ==== */
.people-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem}
@media (max-width:880px){ .people-grid{grid-template-columns:1fr 1fr} }
@media (max-width:520px){ .people-grid{grid-template-columns:1fr} }
.person-card, .partner-card{background:#fff;border-radius:var(--radius);padding:1rem 1.2rem;box-shadow:var(--shadow);text-align:center}
.person-card .portrait, .partner-card .logo{
  width:120px;height:120px;border-radius:999px;margin:0 auto .6rem;object-fit:cover;background:linear-gradient(180deg,#fff,var(--beige-100));
  display:block;
}
.person-card h3{margin:.2rem 0 .2rem}
.person-card h4, .partner-card h4{margin:.2rem 0 .6rem;color:var(--muted);font-weight:500}
.partner-card .logo{border-radius:16px;width:140px;height:100px;object-fit:contain;background:#fff;border:1px solid rgba(0,0,0,.08)}
.partner-card a{display:inline-block;margin-top:.4rem}

/* === Adjustments requested === */

/* 1) Header-Logo größer (responsive) */
.brand img{height:var(--logo-h);width:auto;border-radius:12px;box-shadow:var(--shadow)}
@media (max-width:880px){ .brand img{height:var(--logo-h);width:auto;border-radius:12px;box-shadow:var(--shadow)} }

/* 2) Hero: Foto statt Logo, sauberer Zuschnitt */
.hero-art .parallax-card{padding:0;background:transparent;border-radius:var(--radius);box-shadow:var(--shadow)}
.hero-art .parallax-card .hero-photo{
  display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:var(--radius);
}

/* 3) Footer-Logo größer & nicht verzerrt */
.footer-logo{height:48px;width:auto;border-radius:12px;box-shadow:var(--shadow)}

@media (max-width:880px){ .brand img{height:72px} }
/* Footer: Logo links, Text rechts – in einer Zeile, mittig ausgerichtet */
:root { --logo-h: 86px; }                 /* gleiche Höhe wie oben; bei Bedarf anpassen */
.footer-grid > div{
  display: flex;
  align-items: center;                    /* Text vertikal mittig zum Logo */
  gap: .75rem;                            /* Abstand zwischen Logo und Text */
}
.footer-logo{
  height: var(--logo-h);
  width: auto;                            /* keine Verzerrung */
  border-radius: 12px;
  box-shadow: var(--shadow);
}
.footer-grid > div p{ margin: 0; }        /* verhindert extra Zeilenabstand */
@media (max-width: 880px){
  .footer-logo{ height: 72px; }           /* mobil etwas kleiner – wie im Header */
}
/* === Header: Brand mittig, Menu rechts fixiert === */
:root{
  --logo-h: 96px;                 /* Höhe Logo/Header/Foot – bei Bedarf anpassen */
}

/* 1) Brand mittig im Header */
.site-header .container{ position: relative; }
.header-inner{ justify-content: center; }      /* zentriert die Brand-Gruppe */
.main-nav{
  position: absolute; right: 0; top: 50%;
  transform: translateY(-50%);                 /* Menü-Button bleibt rechts ausgerichtet */
}

/* 2) Logo-Höhe (greift auch im Footer, falls du meine Variable nutzt) */
.brand img{ height: var(--logo-h); width: auto; }

/* 3) Brand-Typo deutlich grösser */
.brand-text{ line-height: 1.05; }
.brand-text strong{
  font-size: 1.45rem;                          /* vorher ~1rem */
  font-weight: 800;
}
.brand-text small{
  display: block;
  font-size: 1.05rem;                          /* Unterzeile grösser */
  opacity: .9;
}

/* 4) Mobile etwas zurücknehmen, damit’s nicht sprengt */
@media (max-width: 880px){
  :root{ --logo-h: 80px; }
  .brand-text strong{ font-size: 1.25rem; }
  .brand-text small{  font-size: .95rem; }
}
/* === Feintuning Header-Ausrichtung === */
/* Stellschrauben (gerne anpassen) */
:root{
  --header-nudge: -18px;   /* negativer Wert = Brand leicht nach links schieben */
  --brand-gap: 1.4rem;     /* Abstand zwischen Logo und Schrift */
  --logo-left-pad: 10px;   /* „Luft“ links am Logo (optischer Versatz) */
}

/* Brand mittig, Menü bleibt rechts (wie vorher) */
.site-header .container{ position: relative; }
.header-inner{ justify-content: center; }

/* Nudge + Abstand anwenden */
.brand{
  transform: translateX(var(--header-nudge));
  gap: var(--brand-gap);
}
.brand img{
  height: var(--logo-h);   /* kommt aus deiner bestehenden Definition */
  width: auto;
  padding-left: var(--logo-left-pad);
}

/* Mobile etwas zurücknehmen */
@media (max-width: 880px){
  :root{
    --header-nudge: -10px;
    --brand-gap: 1.1rem;
    --logo-left-pad: 6px;
  }
}
/* Wappen mittig im Karten-Block ausrichten */
.aside .card-soft .wappen{
  display:block;
  margin-inline:auto;   /* horizontal zentrieren */
  max-width: 160px;     /* optional: begrenzen */
  height:auto;
}
.aside .card-soft{ text-align:center; }
.hero {
  position: relative;
  overflow: hidden;
  height: 80vh;
  display: flex;
  align-items: center;
  justify-content: center;
}


.hero {
  position: relative;
  overflow: hidden;
  height: 90vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Hintergrundvideo */
.hero-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

/* leichte Abdunkelung für besseren Kontrast */
.hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.35);
  z-index: 0;
}

/* Kachel mittig zentriert */
.hero-center {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}

/* Hauptkarte */
.hero-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 3rem;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(8px);
  border-radius: 28px;
  padding: 4rem 5rem;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
  max-width: 1200px;
  width: 85%;
  transition: transform 0.4s ease;
}

.hero-card:hover {
  transform: scale(1.02);
}

/* Text */
.hero-copy {
  flex: 1;
}

.hero-copy h1 {
  font-size: 2.8rem;
  margin-bottom: 1rem;
}

.hero-copy p {
  font-size: 1.25rem;
  line-height: 1.6;
  color: #333;
}

/* Bild */
.hero-art {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}

.hero-photo {
  width: 520px;
  max-width: 100%;
  border-radius: 20px;
  box-shadow: 0 6px 25px rgba(0, 0, 0, 0.3);
  object-fit: cover;
}

/* Buttons */
.hero-ctas {
  margin-top: 1.5rem;
}

/* Responsiv */
@media (max-width: 1000px) {
  .hero-card {
    flex-direction: column;
    text-align: center;
    padding: 3rem 2rem;
  }
  .hero-photo {
    width: 90%;
    margin-top: 2rem;
  }
  .hero-copy h1 {
    font-size: 2.2rem;
  }
}
/* Bild-Öffnen erschweren (Overlay fängt Klicks ab) */
.portrait-wrap {
  position: relative;
  display: inline-block;
}

.portrait-overlay {
  position: absolute;
  inset: 0;
  background: transparent;
}

/* Zusätzliche UX-Hürden */
.portrait {
  user-select: none;
  -webkit-user-drag: none;
}
.grid {
  display: grid;
  gap: 1.5rem;
}

.grid.three {
  grid-template-columns: repeat(3, 1fr);
}

.grid.four {
  grid-template-columns: repeat(4, 1fr);
}

/* Tablet */
@media (max-width: 1024px) {
  .grid.three,
  .grid.four {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Mobile */
@media (max-width: 640px) {
  .grid.three,
  .grid.four {
    grid-template-columns: 1fr;
  }
}

.gemeinden-layout{
  display:grid;
  grid-template-columns: 320px 1fr;
  gap: 1rem;
  align-items: start;
}

@media (max-width: 980px){
  .gemeinden-layout{ grid-template-columns: 1fr; }
}

/* Linke Liste */
.gemeinden-list{
  position: sticky;
  top: 90px;
  max-height: calc(100vh - 120px);
  overflow: hidden;
}

.list-head{
  display:flex;
  flex-direction: column;
  gap: .25rem;
  margin-bottom: .6rem;
}

.list{
  overflow:auto;
  max-height: calc(100vh - 170px);
  padding-right: .25rem;
  border-radius: var(--radius);
  background: #fff;
  border: 1px solid var(--beige-100);
}

.g-link{
  display:flex;
  align-items:center;
  gap:.5rem;
  padding: .65rem .75rem;
  text-decoration:none;
  color: var(--text);
  border-bottom: 1px solid var(--beige-100);
}

.g-link:last-child{ border-bottom: none; }

.g-link:hover,
.g-link.is-active{
  background: var(--beige-100);
}

/* Rechte Karte */
.gemeinden-map .map-head{
  display:flex;
  flex-direction: column;
  gap: .25rem;
  margin-bottom: .6rem;
}

.map-wrap{
  position:relative;
  border-radius: var(--radius);
  border: 1px solid var(--beige-100);
  background: #fff;
  overflow:hidden;
  min-height: 520px;
}

@media (max-width: 980px){
  .map-wrap{ min-height: 460px; }
}

.map-bg{
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 30% 40%, rgba(47,86,53,.08), transparent 55%),
    radial-gradient(circle at 70% 60%, rgba(183,167,119,.18), transparent 55%);
}

/* Pins (clean version: Punkt + Label immer oben) */
.pin{
  position:absolute;
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--green);
  box-shadow: 0 6px 18px rgba(0,0,0,.10);
  transform: translate(-50%, -50%);
  text-decoration:none;
  outline: none;
  z-index: 2;
}

/* größere Hover-Fläche */
.pin::after{
  content:"";
  position:absolute;
  inset:-10px;
  border-radius:999px;
  background: rgba(47,86,53,.10);
  opacity:0;
  transition: opacity .15s ease;
}

/* Label immer über dem Pin */
.pin > span{
  position:absolute;
  left:50%;
  bottom: 16px;
  transform: translateX(-50%);
  white-space: nowrap;

  background: #fff;
  border: 1px solid var(--beige-100);
  border-radius: 999px;
  padding: .25rem .5rem;
  font-size: .85rem;
  color: var(--text);
  box-shadow: 0 6px 18px rgba(0,0,0,.08);

  opacity:0;
  pointer-events:none;
  transition: opacity .12s ease;
}

.pin:hover > span,
.pin.is-active > span{ opacity:1; }

.pin:hover::after,
.pin.is-active::after{ opacity:1; }

.pin.is-active{ background: var(--beige); }

/* Für rechte Rand-Pins: Label nach links ziehen (ohne Pin zu bewegen) */
.pin.label-left > span{
  left:auto;
  right: 14px;
  transform: none;
  text-align: right;
}

/* ============================================================
   MOBILE FIXES – iPhone optimiert (390px)
   ============================================================ */

/* Hero: feste Höhe entfernen damit Mobile scrollen kann */
@media (max-width: 768px) {
  .hero {
    height: auto !important;
    min-height: 100svh;
    align-items: flex-start !important;
    padding-top: 100px;
    padding-bottom: 2rem;
    overflow-y: visible !important;
  }

  .hero-center {
    height: auto !important;
    align-items: flex-start !important;
    padding-bottom: 1.5rem;
  }
}

@media (max-width: 640px) {

  /* Header: Logo kleiner, kein overflow */
  .header-inner {
    justify-content: space-between !important;
    padding: .4rem 0;
  }
  .brand img {
    height: 48px !important;
  }
  .brand-text strong {
    font-size: 1.05rem !important;
  }
  .brand-text small {
    font-size: .78rem !important;
  }

  /* Hero Card: volle Breite, weniger Padding */
  .hero-card {
    width: 94% !important;
    padding: 1.6rem 1.2rem !important;
    border-radius: 18px !important;
    flex-direction: column !important;
    text-align: center !important;
    gap: 1.2rem !important;
  }

  .hero-copy h1 {
    font-size: 1.65rem !important;
    margin-bottom: .6rem !important;
  }

  .hero-copy p {
    font-size: 1rem !important;
  }

  /* Hero Bild: volle Breite */
  .hero-photo {
    width: 100% !important;
    margin-top: 0 !important;
  }

  /* Hero Buttons: zentriert und stapeln */
  .hero-ctas {
    display: flex !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
    gap: .6rem !important;
  }

  /* News Slider Card */
  .news-slider {
    width: 94% !important;
    padding: 1.4rem 1.2rem !important;
  }

  /* Container: etwas mehr Platz */
  .container {
    width: min(100%, 96%) !important;
  }

  /* Karten im Grid: volle Breite */
  .grid.two {
    grid-template-columns: 1fr !important;
  }

  /* Kontakt-Buttons in hero */
  .hero-card .btn {
    width: 100% !important;
    text-align: center !important;
  }
}