/* ===== Inter (self-hosted, local) ===== */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ===== base ===== */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  background: #f4f5f6;
  color: #1b2426;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
input, textarea, button { font-family: inherit; }

/* ===== interactive hover / focus ===== */
.btn-primary { transition: transform .2s, box-shadow .2s; }
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 16px 36px rgba(20,80,94,0.32); }
.btn-outline { transition: background .2s, border-color .2s; }
.btn-outline:hover { background: rgba(20,80,94,0.06); border-color: rgba(20,80,94,0.45); }
.btn-white { transition: transform .2s; }
.btn-white:hover { transform: translateY(-2px); }
.nav-cta { transition: transform .2s, box-shadow .2s; }
.nav-cta:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(20,80,94,0.3); }

.card-hover { transition: transform .25s, box-shadow .25s; }
.card-hover:hover { transform: translateY(-5px); box-shadow: 0 20px 44px rgba(20,50,58,0.12); }
.vc { transition: transform .25s; }
.vc:hover { transform: translateY(-5px); }
.dl-card { transition: border-color .2s, transform .2s; }
.dl-card:hover { border-color: #2f8296; transform: translateX(3px); }

.kontakt-input { transition: border-color .2s; }
.kontakt-input:focus { outline: none; border-color: #2f8296; }

nav a.navlink { transition: color .2s; }
nav a.navlink:hover { color: #14505e; }

/* ===== project filter (Isotope) ===== */
.filter-btn {
  padding: 10px 20px; border: 1.5px solid rgba(20,80,94,0.22);
  cursor: pointer; font-weight: 600; font-size: 0.9rem;
  background: transparent; color: #3c4644; transition: all .2s;
}
.filter-btn:hover { border-color: #2f8296; color: #14505e; }
.filter-btn.is-active { background: #14505e; color: #fff; border-color: #14505e; }

/* ===== Vorstands-Zitat-Slider ===== */
.qs-btn {
  width: 36px; height: 36px; border: 1.5px solid rgba(20,80,94,0.25);
  background: #fff; color: #14505e; cursor: pointer; font-size: 1.2rem; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center; transition: all .2s;
}
.qs-btn:hover { background: #14505e; color: #fff; border-color: #14505e; }
.qs-dot {
  width: 8px; height: 8px; border-radius: 50%; background: rgba(20,80,94,0.22);
  border: none; cursor: pointer; padding: 0; transition: all .2s;
}
.qs-dot.active { background: #c69a3f; width: 22px; border-radius: 4px; }

.isotope-grid { margin: 0 auto; }
.proj-item { width: 32%; margin-bottom: 24px; }
.gutter-sizer { width: 2%; }

/* ===== reveal on scroll ===== */
[data-reveal] { will-change: opacity, transform; }

/* ===== legal pages ===== */
.legal-wrap { max-width: 820px; margin: 0 auto; padding: 128px 28px 72px; }
.legal-eyebrow {
  display: inline-flex; align-items: center; gap: 11px;
  font-size: 0.8rem; font-weight: 600; letter-spacing: 0.16em;
  text-transform: uppercase; color: #2f8296; margin-bottom: 18px;
}
.legal-eyebrow span { width: 30px; height: 2px; background: #c69a3f; display: inline-block; }
.legal-wrap h1 {
  font-weight: 500; font-size: clamp(2rem, 4vw, 2.8rem);
  line-height: 1.1; letter-spacing: -0.02em; color: #14323a; margin-bottom: 8px;
}
.legal-rule { width: 54px; height: 3px; background: #c69a3f; margin: 18px 0 34px; }
.legal-block { margin-bottom: 30px; }
.legal-block h2 {
  font-size: 1rem; text-transform: uppercase; letter-spacing: 0.06em;
  color: #2f8296; margin-bottom: 8px; font-weight: 700;
}
.legal-block p { color: #43514f; font-size: 0.98rem; line-height: 1.7; }
.legal-block a { color: #14505e; }

/* ===== responsive ===== */
@media (max-width: 900px) {
  [data-hero-grid] { grid-template-columns: 1fr !important; }
  [data-about-grid] { grid-template-columns: 1fr !important; }
  [data-mitglied-grid] { grid-template-columns: 1fr !important; }
  [data-kontakt-grid] { grid-template-columns: 1fr !important; }
  [data-stats-grid] { grid-template-columns: repeat(2,1fr) !important; }
  [data-vorstand-grid] { grid-template-columns: repeat(3,1fr) !important; }
  [data-news-grid] { grid-template-columns: 1fr !important; }
  [data-form-grid] { grid-template-columns: 1fr !important; }
  [data-desktop-nav] { display: none !important; }
  [data-mobile-burger] { display: flex !important; }
  .proj-item { width: 48%; }
  .gutter-sizer { width: 4%; }
}
@media (max-width: 600px) {
  [data-vorstand-grid] { grid-template-columns: repeat(2,1fr) !important; }
  .proj-item { width: 100%; }
  .gutter-sizer { width: 0; }
  [data-vorteile-grid] { grid-template-columns: 1fr !important; }
}