@font-face{
    font-family:'Fraunces';
    font-style:normal;
    font-weight:400 600;
    font-display:swap;
    font-optical-sizing:auto;
    src:url('fonts/fraunces-variable.woff2') format('woff2');
  }
  @font-face{
    font-family:'Source Sans 3';
    font-style:normal;
    font-weight:400 700;
    font-display:swap;
    src:url('fonts/sourcesans3-variable.woff2') format('woff2');
  }

  :root{
    --ink:#1b2a4a;
    --ink-deep:#121d33;
    --brass:#a9803f;
    --brass-light:#c9a35f;
    --paper:#f6f4ef;
    --paper-2:#eeebe2;
    --charcoal:#2a2a28;
    --line:#d8d3c5;
    --max:1080px;
  }
  *{box-sizing:border-box;margin:0;padding:0;}
  html{scroll-behavior:smooth;}
  body{
    font-family:'Source Sans 3', sans-serif;
    color:var(--charcoal);
    background:var(--paper);
    line-height:1.6;
  }
  h1,h2,h3{
    font-family:'Fraunces', serif;
    color:var(--ink);
    font-weight:600;
    letter-spacing:-0.01em;
  }
  a{color:var(--ink);text-decoration:none;}
  .wrap{max-width:var(--max);margin:0 auto;padding:0 28px;}

  /* Top bar */
  .topbar{
    background:var(--ink-deep);
    color:#cfd6e6;
    font-size:0.85rem;
  }
  .topbar .wrap{
    display:flex;flex-wrap:wrap;gap:20px;
    justify-content:flex-end;
    padding:9px 28px;
  }
  .topbar a{color:#cfd6e6;}
  .topbar span, .topbar a{display:flex;align-items:center;gap:6px;}

  /* Header */
  header.site{
    background:var(--paper);
    border-bottom:1px solid var(--line);
    position:sticky;top:0;z-index:50;
  }
  .header-inner{
    display:flex;align-items:center;justify-content:space-between;
    padding:18px 28px;flex-wrap:wrap;gap:16px;
  }
  .brand {
  display: flex;
  align-items: center;
  gap: 14px;
}

.brand .logo img {
  display: block;
  height: 92px;
  width: auto;
}

.brand .text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
  .brand .name{
    font-family:'Fraunces', serif;
    font-size:1.35rem;
    font-weight:600;
    color:var(--ink);
    line-height:1.15;
  }
  .brand .claim{
    font-size:0.8rem;
    letter-spacing:0.08em;
    text-transform:uppercase;
    color:var(--brass);
    font-weight:600;
  }
  nav.main ul{
    display:flex;gap:26px;list-style:none;flex-wrap:wrap;
  }
  nav.main a{
    font-size:0.95rem;
    font-weight:600;
    color:var(--ink);
    position:relative;
    padding-bottom:4px;
  }
  nav.main a::after{
    content:"";position:absolute;left:0;right:0;bottom:0;height:2px;
    background:var(--brass);transform:scaleX(0);transition:transform .2s ease;
  }
  nav.main a:hover::after{transform:scaleX(1);}
  
  #schutzverband {
  scroll-margin-top: 90px; /* Höhe deines Headers + etwas Puffer */
}
#mitgliedschaft {
  scroll-margin-top: 90px; /* Höhe deines Headers + etwas Puffer */
}
#aufgaben {
  scroll-margin-top: 90px; /* Höhe deines Headers + etwas Puffer */
}
#kontakt {
  scroll-margin-top: 90px; /* Höhe deines Headers + etwas Puffer */
}

  /* Hero */
  .hero{
    position:relative;
    background:var(--ink-deep);
    color:#eef0f5;
    overflow:hidden;
  }
  .hero::before{
    content:"§";
    position:absolute;
    right:-40px;top:-60px;
    font-family:'Fraunces', serif;
    font-size:560px;
    color:rgba(169,128,63,0.08);
    line-height:1;
    pointer-events:none;
  }
  .hero-inner{
    position:relative;
    padding:96px 28px 84px;
    max-width:var(--max);margin:0 auto;
  }
  .eyebrow{
    display:inline-block;
    font-size:0.78rem;
    letter-spacing:0.14em;
    text-transform:uppercase;
    color:var(--brass-light);
    border:1px solid rgba(201,163,95,0.4);
    padding:6px 14px;
    border-radius:999px;
    margin-bottom:26px;
  }
  .hero h1{
    color:#fff;
    font-size:clamp(2.2rem, 4.5vw, 3.4rem);
    max-width:760px;
    line-height:1.1;
    margin-bottom:20px;
  }
  .hero p.lead{
    max-width:620px;
    font-size:1.15rem;
    color:#c9cede;
  }
  .hero .cta-row{
    margin-top:36px;display:flex;gap:16px;flex-wrap:wrap;
  }
  .btn{
    display:inline-block;
    padding:13px 26px;
    border-radius:2px;
    font-weight:600;
    font-size:0.95rem;
    transition:all .2s ease;
  }
  .btn-primary{
    background:var(--brass);color:#1b1509;
  }
  .btn-primary:hover{background:var(--brass-light);}
  .btn-ghost{
    border:1px solid rgba(255,255,255,0.35);color:#fff;
  }
  .btn-ghost:hover{border-color:#fff;}

  /* Sections */
  section{
    padding:78px 28px;
    border-bottom:1px solid var(--line);
  }
  section.alt{background:var(--paper-2);}
  .section-head{
    max-width:640px;margin-bottom:44px;
  }
  .section-head .tag{
    font-size:0.78rem;letter-spacing:0.14em;text-transform:uppercase;
    color:var(--brass);font-weight:700;margin-bottom:10px;display:block;
  }
  .section-head h2{
    font-size:clamp(1.7rem,3vw,2.3rem);
    margin-bottom:14px;
  }
  .section-head p{color:#5a5850;font-size:1.05rem;}

  /* Schutzverband */
  .split{
    display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start;
    max-width:var(--max);margin:0 auto;
  }
  .split p{color:#4a483f;font-size:1.02rem;}
  .quote-block{
    border-left:3px solid var(--brass);
    padding:6px 0 6px 24px;
    font-family:'Fraunces', serif;
    font-size:1.25rem;
    color:var(--ink);
  }

  /* Membership cards */
  .membership-grid{
    max-width:var(--max);margin:0 auto;
    display:grid;grid-template-columns:1fr 1fr;gap:28px;
  }
  .m-card{
    background:#fff;border:1px solid var(--line);
    padding:34px 32px;position:relative;
  }
  .m-card.featured{border-color:var(--brass);}
  .m-card .price{
    font-family:'Fraunces', serif;font-size:2.4rem;color:var(--ink);
    margin:10px 0 4px;
  }
  .m-card .price small{font-size:1rem;font-weight:500;color:#8a8776;}
  .m-card h3{font-size:1.2rem;margin-bottom:6px;}
  .m-card p{color:#5a5850;font-size:0.98rem;margin-top:14px;}
  .m-card .badge{
    position:absolute;top:-12px;right:24px;
    background:var(--brass);color:#1b1509;
    font-size:0.72rem;font-weight:700;letter-spacing:0.06em;
    text-transform:uppercase;padding:5px 12px;
  }

  /* Phases (signature element) */
  .phases{
    max-width:var(--max);margin:0 auto;
    display:grid;grid-template-columns:repeat(3,1fr);gap:0;
    border:1px solid var(--line);
  }
  .phase{
    padding:32px 28px;background:#fff;position:relative;
  }
  .phase + .phase{border-left:1px solid var(--line);}
  .phase .num{
    font-family:'Fraunces', serif;font-size:2.6rem;color:var(--paper-2);
    -webkit-text-stroke:1.5px var(--brass);
    position:absolute;top:14px;right:20px;
  }
  .phase h3{font-size:1.1rem;margin-bottom:10px;}
  .phase p{color:#5a5850;font-size:0.95rem;}
  .subpoints{
    max-width:var(--max);margin:36px auto 0;
    display:grid;grid-template-columns:1fr 1fr;gap:14px 40px;
  }
  .subpoints .item{
    display:flex;gap:12px;font-size:0.95rem;color:#4a483f;
    padding:10px 0;border-bottom:1px dashed var(--line);
  }
  .subpoints .letter{
    font-family:'Fraunces', serif;color:var(--brass);font-weight:600;flex-shrink:0;
  }

  /* Contact */
  .contact-grid{
    max-width:var(--max);margin:0 auto;
    display:grid;grid-template-columns:1.1fr 0.9fr;gap:50px;
  }
  .contact-card{
    background:var(--ink-deep);color:#dfe3ec;padding:36px;border-radius:2px;
  }
  .contact-card h3{color:#fff;font-size:1.2rem;margin-bottom:18px;}
  .contact-line{display:flex;gap:12px;margin-bottom:14px;font-size:0.98rem;}
  .contact-line .k{color:var(--brass-light);min-width:90px;font-weight:600;}
  .contact-card a{color:#fff;text-decoration:underline;text-decoration-color:rgba(255,255,255,0.3);}
  .hours{font-size:0.95rem;color:#5a5850;}
  .hours .row{display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px solid var(--line);}

  /* Location */
  .location-box{
    max-width:var(--max);margin:0 auto;
    display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center;
  }
  .map-frame{
    border:1px solid var(--line);height:280px;
    display:flex;align-items:center;justify-content:center;
    background:repeating-linear-gradient(45deg, #eee 0 10px, #f6f4ef 10px 20px);
    color:#8a8776;font-size:0.9rem;text-align:center;
  }
  .map-frame a{color:var(--ink);font-weight:600;text-decoration:underline;}

  footer{
    padding:32px 28px;text-align:center;font-size:0.85rem;color:#8a8776;
  }
  footer .legal-links{margin-top:10px;display:flex;gap:18px;justify-content:center;flex-wrap:wrap;}
  footer .legal-links a{color:#8a8776;text-decoration:underline;text-decoration-color:var(--line);}
  footer .legal-links a:hover{color:var(--ink);}

  @media (max-width:800px){
    .split, .membership-grid, .phases, .contact-grid, .location-box, .subpoints{
      grid-template-columns:1fr;
    }
    .phase + .phase{border-left:none;border-top:1px solid var(--line);}
    nav.main ul{gap:16px;}
    .topbar .wrap{justify-content:center;text-align:center;}
  }