:root{
    /* Marken */
    --brand-olive:      #8A8A4A;
    --brand-olive-deep: #6F6F3A;
    --brand-olive-soft: #B3B37A;
    --brand-leaf:       #A8C258;
    --brand-leaf-deep:  #8AA844;
    --brand-forest:     #2F4030;

    /* Neutrale */
    --paper:     #F6F3EC;
    --paper-dim: #EDE8DC;
    --stone-50:  #EFECE4;
    --stone-100: #E1DDD0;
    --stone-200: #C9C4B2;
    --stone-300: #A8A292;
    --stone-400: #807A6A;
    --stone-500: #5A5648;
    --stone-600: #3D3A30;
    --stone-700: #2A2822;
    --ink:       #1F1D18;

    /* Erdige Akzente */
    --terra: #C97B5A;
    --sand:  #E8D8A8;
    --sky:   #7AA6C2;

    /* Semantik */
    --success: #6F8F4A;
    --warning: #C9A84A;
    --danger:  #B25A4A;

    /* Typo */
    --font-display: "Fraunces", "Cormorant Garamond", Georgia, serif;
    --font-body:    "Source Sans 3", "Inter", system-ui, sans-serif;

    /* Spacing */
    --s-1:  4px;  --s-2:  8px;  --s-3: 12px; --s-4: 16px; --s-5: 24px;
    --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10:128px;

    /* Radien */
    --r-xs: 2px; --r-sm: 4px; --r-md: 8px; --r-lg: 14px; --r-xl: 22px; --r-pill: 9999px;

    /* Schatten */
    --shadow-1: 0 1px 2px rgba(60,55,35,.06),  0 1px 1px rgba(60,55,35,.04);
    --shadow-2: 0 4px 12px rgba(60,55,35,.08), 0 2px 4px rgba(60,55,35,.05);
    --shadow-3: 0 12px 32px rgba(60,55,35,.12),0 4px 8px rgba(60,55,35,.06);

    --pad: clamp(20px, 4vw, 56px);
  }

  *{box-sizing:border-box}
  html,body{margin:0;padding:0}
  html{scroll-behavior:smooth}
  body{
    background:var(--paper);
    color:var(--stone-600);
    font-family:var(--font-body);
    font-size:17px;
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;
  }

  a{color:inherit;text-decoration:none}
  img{max-width:100%;display:block}
  button{font:inherit;color:inherit;cursor:pointer}

  .wrap{
    max-width:1280px;
    margin:0 auto;
    padding-left:var(--pad);
    padding-right:var(--pad);
  }

  /* ----- Typografie ----- */
  h1,h2,h3{
    font-family:var(--font-display);
    font-weight:500;
    color:var(--stone-700);
    margin:0;
    text-wrap:balance;
  }
  h4{
    font-family:var(--font-body);
    font-weight:600;
    color:var(--stone-700);
    margin:0;
  }
  .display-2{font-size:clamp(40px, 6vw, 64px); line-height:1.0; letter-spacing:-0.02em}
  h1{font-size:clamp(32px, 3.4vw, 44px); line-height:1.05; letter-spacing:-0.02em}
  h2{font-size:clamp(24px, 2.2vw, 30px); line-height:1.18; letter-spacing:-0.015em}
  h3{font-size:clamp(20px, 1.6vw, 26px); line-height:1.22; letter-spacing:-0.01em}
  h4{font-size:19px; line-height:1.32}
  p{margin:0;text-wrap:pretty;max-width:65ch}

  em.serif-it{font-style:italic;font-family:var(--font-display);font-weight:500;color:var(--brand-olive-deep)}

  .caption{
    font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:0.10em;
    color:var(--brand-olive-deep);
  }
  .meta{
    font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:0.16em;
    color:var(--stone-400);
  }
  .eyebrow{
    display:inline-flex;align-items:center;gap:12px;
    font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:0.18em;
    color:var(--brand-olive);
  }
  .eyebrow::before{
    content:"";width:24px;height:1px;background:var(--brand-olive);display:inline-block;
  }
  .lead{
    font-size:21px;
    line-height:1.52;
    color:var(--stone-500);
    max-width:56ch;
    font-weight:400;
  }

  /* ----- Buttons ----- */
  .btn{
    display:inline-flex;align-items:center;gap:10px;
    height:44px;padding:0 22px;
    border-radius:var(--r-pill);
    border:1px solid transparent;
    font-family:var(--font-body);
    font-size:15px;font-weight:500;
    transition: background .2s ease, color .2s ease, border-color .2s ease;
    white-space:nowrap;
  }
  .btn .arr{display:inline-block;transition:transform .2s ease}
  .btn:hover .arr{transform:translateX(3px)}
  .btn-primary{background:var(--brand-olive);color:#fff}
  .btn-primary:hover{background:var(--brand-olive-deep)}
  .btn-leaf{background:var(--brand-leaf);color:var(--brand-forest)}
  .btn-leaf:hover{background:var(--brand-leaf-deep)}
  .btn-secondary{background:transparent;color:var(--stone-700);border-color:var(--stone-200)}
  .btn-secondary:hover{background:var(--paper-dim);border-color:var(--stone-300)}
  .btn-ghost{background:transparent;color:var(--brand-olive-deep);border-color:transparent;padding-left:6px;padding-right:6px}
  .btn-ghost:hover{background:var(--paper-dim)}
  .btn-lg{height:52px;padding:0 28px;font-size:16px}

  /* ----- Badges ----- */
  .badge{
    display:inline-flex;align-items:center;gap:7px;
    padding:4px 10px;border-radius:var(--r-pill);
    font-size:12px;font-weight:600;
  }
  .badge::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
  .badge-leaf{background:rgba(168,194,88,.22);color:#4D6A1F}
  .badge-olive{background:rgba(138,138,74,.14);color:var(--brand-olive-deep)}
  .badge-stone{background:var(--stone-100);color:var(--stone-600)}
  .badge-terra{background:rgba(201,123,90,.16);color:#8A4A30}

  /* ----- Header ----- */
  header.site{
    position:sticky;top:0;z-index:30;
    background:rgba(246,243,236,.88);
    backdrop-filter: blur(12px) saturate(1.1);
    -webkit-backdrop-filter: blur(12px) saturate(1.1);
    border-bottom:1px solid var(--stone-100);
  }
  .site-row{
    display:flex;align-items:center;justify-content:space-between;gap:24px;
    height:80px;
  }
  .brand img{height:40px;width:auto;transition:transform .35s cubic-bezier(.2,.7,.2,1)}
  .brand:hover img{transform:scale(1.04)}
  nav.site-nav{display:flex;gap:30px}
  nav.site-nav a{
    font-size:15px;color:var(--stone-600);font-weight:400;
    position:relative;padding-bottom:2px;
    transition:color .2s ease;
  }
  nav.site-nav a:hover{color:var(--brand-olive-deep)}
  /* Micro-Interaction: Underline wächst von links bei Hover */
  nav.site-nav a:not(.is-active)::after{
    content:"";position:absolute;left:0;right:0;bottom:-2px;
    height:1px;background:var(--brand-olive-deep);
    transform:scaleX(0);transform-origin:left center;
    transition:transform .3s cubic-bezier(.2,.7,.2,1);
  }
  nav.site-nav a:not(.is-active):hover::after{transform:scaleX(1)}
  .site-cta{display:flex;align-items:center;gap:10px}
  .footer-brand img{transition:transform .35s cubic-bezier(.2,.7,.2,1)}
  .footer-brand:hover img{transform:scale(1.04)}
  @media (max-width:980px){
    nav.site-nav{display:none}
    .site-cta .btn-secondary{display:none}
  }

  /* ----- HERO (Vollbild mit Hintergrund) ----- */
  .hero{
    position:relative;
    min-height: clamp(620px, 88vh, 880px);
    display:flex;align-items:flex-end;
    padding:0;
    overflow:hidden;
    margin-bottom: var(--s-10);
  }
  .hero-bg{
    position:absolute;inset:0;z-index:0;
    background:
      repeating-linear-gradient(135deg,
        rgba(138,138,74,0.08) 0 18px,
        rgba(138,138,74,0.16) 18px 36px),
      linear-gradient(135deg, #B3B37A 0%, #6F6F3A 50%, #2F4030 100%);
  }
  .hero-bg > img{
    position:absolute;inset:0;width:100%;height:100%;
    object-fit:cover;display:block;
  }
  .hero-bg::after{
    content:"";position:absolute;inset:0;
    background:linear-gradient(180deg, rgba(31,29,24,0) 0%, rgba(31,29,24,0.15) 40%, rgba(31,29,24,0.72) 100%);
  }
  .hero-ph-label{
    position:absolute;left:24px;top:24px;z-index:2;
    background:rgba(246,243,236,.92);color:var(--stone-500);
    padding:8px 14px;border-radius:var(--r-pill);
    border:1px solid rgba(255,255,255,.4);
    font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  }
  .hero-status{
    position:absolute;right:24px;top:24px;z-index:2;
    display:flex;align-items:center;gap:10px;
    background:rgba(31,29,24,.55);backdrop-filter:blur(8px);
    color:#fff;padding:10px 16px;border-radius:var(--r-pill);
    font-size:13px;border:1px solid rgba(255,255,255,.18);
  }
  .pulse{
    width:10px;height:10px;border-radius:50%;background:var(--brand-leaf);
    box-shadow:0 0 0 0 rgba(168,194,88,.6);
    animation:pulse 2.4s ease-out infinite;flex:0 0 auto;
  }
  @keyframes pulse{
    0%{box-shadow:0 0 0 0 rgba(168,194,88,.55)}
    70%{box-shadow:0 0 0 14px rgba(168,194,88,0)}
    100%{box-shadow:0 0 0 0 rgba(168,194,88,0)}
  }
  .hero-content{
    position:relative;z-index:1;width:100%;
    padding-top:var(--s-9);padding-bottom:var(--s-8);
  }
  .hero-content .eyebrow{color:var(--brand-leaf)}
  .hero-content .eyebrow::before{background:var(--brand-leaf)}
  .hero h1.display-2{
    margin-top:18px;
    font-size:clamp(44px, 6.4vw, 88px);
    font-weight:500;line-height:0.98;letter-spacing:-0.025em;
    color:#fff;
    max-width:18ch;
  }
  .hero h1.display-2 em.serif-it{color:var(--brand-leaf)}
  .hero p.hero-lead{
    margin-top:28px;
    font-size:clamp(18px, 1.4vw, 22px);
    line-height:1.55;
    color:rgba(246,243,236,.86);
    max-width:60ch;
  }
  .hero-actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:40px}
  .hero .btn-secondary{
    background:rgba(255,255,255,.08);color:#fff;border-color:rgba(255,255,255,.32);backdrop-filter:blur(8px);
  }
  .hero .btn-secondary:hover{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.5)}
  .hero .btn-ghost{color:rgba(255,255,255,.85)}
  .hero .btn-ghost:hover{background:rgba(255,255,255,.1);color:#fff}

  /* Inline Eckdaten (klein, dezent) */
  .keyfacts{
    display:flex;flex-wrap:wrap;align-items:center;gap:10px 28px;
    padding:var(--s-5) 0;
    border-top:1px solid var(--stone-100);
    border-bottom:1px solid var(--stone-100);
    font-size:14px;color:var(--stone-500);
  }
  .keyfacts .kf{display:inline-flex;align-items:baseline;gap:8px;white-space:nowrap}
  .keyfacts .kf b{font-family:var(--font-display);font-weight:500;font-size:17px;color:var(--stone-700);letter-spacing:-.005em}
  .keyfacts .sep{width:4px;height:4px;border-radius:50%;background:var(--stone-200);display:inline-block}
  @media (max-width:560px){.keyfacts{gap:10px 18px}.keyfacts .sep{display:none}}

  /* ----- Sections shared ----- */
  section{padding:160px 0}
  section.tight{padding:112px 0}
  @media (max-width:880px){section{padding:112px 0} section.tight{padding:80px 0}}
  .section-head{
    display:grid;grid-template-columns: 1fr 1.3fr;gap:var(--s-7);
    align-items:start;margin-bottom:80px;
  }
  @media (max-width:880px){.section-head{margin-bottom:56px}}
  @media (max-width:880px){.section-head{grid-template-columns:1fr}}
  .section-head .left{display:flex;flex-direction:column;gap:14px}
  .sect-num{
    font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--stone-400);
    display:flex;align-items:center;gap:10px;
  }



  /* ----- Zielgruppen ----- */
  .audience{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:18px;
  }
  @media (max-width: 880px){.audience{grid-template-columns:1fr}}
  .a-card{
    background:#fff;
    border:1px solid var(--stone-100);
    border-radius:var(--r-lg);
    padding:32px 28px;
    display:flex;flex-direction:column;gap:18px;
    min-height:380px;
    text-align:left;
    transition:border-color .2s ease, transform .25s ease, box-shadow .25s ease;
    cursor:pointer;
    box-shadow:var(--shadow-1);
  }
  .a-card:hover{border-color:var(--stone-300);transform:translateY(-2px);box-shadow:var(--shadow-3)}
  .a-card.active{
    background:var(--brand-olive);border-color:var(--brand-olive);
  }
  .a-card.active h3,
  .a-card.active .a-num,
  .a-card.active ul li,
  .a-card.active .a-meta,
  .a-card.active .a-link{color:#fff}
  .a-card.active .a-meta{color:rgba(255,255,255,.7)}
  .a-card.active ul li::before{background:var(--brand-leaf)}
  .a-num{font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--stone-400)}
  .a-card h3{font-size:28px}
  .a-card ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:9px;font-size:15px;line-height:1.5;color:var(--stone-600)}
  .a-card ul li{display:flex;gap:10px;align-items:flex-start}
  .a-card ul li::before{
    content:"";flex:0 0 auto;
    width:6px;height:6px;border-radius:50%;
    background:var(--brand-olive);margin-top:9px;
  }
  .a-meta{margin-top:auto;display:flex;justify-content:space-between;align-items:flex-end;font-size:13px;color:var(--stone-400)}
  .a-link{font-weight:600;color:var(--brand-olive-deep);display:inline-flex;gap:6px}

  /* ----- Detail ----- */
  .audience-detail{
    margin-top:24px;
    border:1px solid var(--stone-100);
    border-radius:var(--r-lg);
    padding:clamp(28px,4vw,56px);
    background:var(--paper-dim);
    display:grid;grid-template-columns:1.2fr 1fr;gap:clamp(28px,4vw,56px);
    align-items:center;
  }
  @media (max-width:880px){.audience-detail{grid-template-columns:1fr}}
  .audience-detail .img{
    aspect-ratio:5/4;border-radius:var(--r-md);
    overflow:hidden;
    position:relative;
    border:1px solid var(--stone-100);
  }
  .audience-detail .img.legacy{
    background:repeating-linear-gradient(135deg, var(--stone-50) 0 16px, var(--stone-100) 16px 32px);
  }
  .audience-detail .img .ph-label{
    position:absolute;left:14px;top:14px;
    font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
    background:var(--paper);color:var(--stone-500);
    padding:6px 10px;border-radius:var(--r-pill);border:1px solid var(--stone-100);
  }
  .audience-detail h3{font-size:clamp(28px,3vw,40px);line-height:1.1;letter-spacing:-.02em;color:var(--stone-700);font-weight:500}
  .audience-detail .pts{display:grid;grid-template-columns:1fr 1fr;gap:0 24px;margin:24px 0;font-size:15px;color:var(--stone-600)}
  .audience-detail .pts > div{padding:12px 0;border-top:1px solid var(--stone-100)}

  /* ----- Beschreibung ----- */
  .desc{
    display:grid;grid-template-columns: 1fr 1.4fr;gap:var(--s-7);
  }
  @media (max-width:880px){.desc{grid-template-columns:1fr}}
  .desc p{font-size:17px;color:var(--stone-600)}
  .desc p+p{margin-top:18px}
  .desc .pull{
    font-family:var(--font-display);font-weight:500;
    font-size:clamp(22px, 2vw, 30px);
    line-height:1.3;letter-spacing:-.015em;
    color:var(--stone-700);
  }

  /* ----- Wohnen Grid ----- */
  .features{
    display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--stone-100);
    border:1px solid var(--stone-100);border-radius:var(--r-lg);overflow:hidden;
    box-shadow:var(--shadow-1);
  }
  @media (max-width:980px){.features{grid-template-columns:repeat(2,1fr)}}
  @media (max-width:560px){.features{grid-template-columns:1fr}}
  .f{
    background:#fff;padding:28px 26px 30px;display:flex;flex-direction:column;gap:10px;min-height:180px;
  }
  .f .ic{width:24px;height:24px;color:var(--brand-olive);stroke-width:1.5}
  .f h4{font-size:17px;margin-top:6px}
  .f p{font-size:14.5px;color:var(--stone-500);line-height:1.55}

  /* ----- Nachhaltigkeit ----- */
  .sustain{
    background:var(--brand-forest);color:#fff;
    border-radius:var(--r-xl);
    padding:clamp(32px,5vw,72px);
    display:grid;grid-template-columns: 1fr 1.1fr;gap:var(--s-7);
    align-items:start;
    position:relative;overflow:hidden;
  }
  @media (max-width:880px){.sustain{grid-template-columns:1fr}}
  .sustain h2{color:#fff;font-size:clamp(28px,2.6vw,38px)}
  .sustain p.lead{color:rgba(255,255,255,.78)}
  .sustain .eyebrow{color:var(--brand-leaf)}
  .sustain .eyebrow::before{background:var(--brand-leaf)}
  .sustain .waves{
    position:absolute;right:-40px;top:-40px;width:280px;height:160px;opacity:.5;pointer-events:none;
  }
  .sustain .seals{
    display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:24px;
  }
  .sustain .seal{
    border:1px solid rgba(255,255,255,.16);
    border-radius:var(--r-md);padding:18px 16px;
    display:flex;flex-direction:column;gap:6px;
    background:rgba(255,255,255,.03);
  }
  .sustain .seal .k{font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.55)}
  .sustain .seal .v{font-family:var(--font-display);font-size:22px;font-weight:500;line-height:1.1}
  .sustain ul.benefits{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
  .sustain ul.benefits li{
    padding:14px 0;border-top:1px solid rgba(255,255,255,.10);
    display:flex;justify-content:space-between;gap:18px;align-items:center;
    font-size:15px;color:rgba(255,255,255,.85);
  }
  .sustain ul.benefits li:last-child{border-bottom:1px solid rgba(255,255,255,.10)}
  .sustain ul.benefits li b{font-weight:500;color:#fff}
  .sustain ul.benefits li em{font-style:normal;color:rgba(255,255,255,.55);font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:600}

  /* ----- Lage ----- */
  /* Sticky-Header beim Anchor-Scroll berücksichtigen */
  section[id]{scroll-margin-top:80px}

  .location-top{
    display:grid;grid-template-columns:1fr 1fr;gap:var(--s-7);align-items:start;
    margin-bottom:var(--s-8);
  }
  @media (max-width:980px){.location-top{grid-template-columns:1fr}}
  .map{
    aspect-ratio: 4/3;
    border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--stone-100);
    background:var(--stone-50);
    position:relative;
    box-shadow:var(--shadow-1);
  }
  .map svg{display:block;width:100%;height:100%}
  .loc-text p{color:var(--stone-600);font-size:17px}
  .loc-text p+p{margin-top:14px}

  /* Lage-Erzählung */
  .lage-story{
    background:var(--paper);
    border:1px solid var(--stone-100);
    border-radius:var(--r-lg);
    padding:36px 40px;
    margin-bottom:var(--s-8);
  }
  .lage-story p{
    font-family:var(--font-display);font-weight:300;
    font-size:clamp(20px,1.8vw,26px);line-height:1.4;color:var(--stone-700);
    letter-spacing:-.005em;text-wrap:pretty;max-width:62ch;
  }
  .lage-story p + p{margin-top:14px}
  .lage-story em.serif-it{color:var(--brand-olive-deep)}

  /* Lage-Cluster: drei thematische Karten */
  .lage-grid{
    display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-6);
  }
  @media (max-width:980px){.lage-grid{grid-template-columns:1fr}}
  .lage-card{
    background:#fff;border:1px solid var(--stone-100);border-radius:var(--r-lg);
    padding:28px;display:flex;flex-direction:column;gap:16px;
  }
  .lage-card .ic-wrap{
    width:44px;height:44px;border-radius:50%;
    background:rgba(138,138,74,.12);color:var(--brand-olive-deep);
    display:grid;place-items:center;
  }
  .lage-card .ic-wrap svg{width:22px;height:22px;stroke-width:1.6}
  .lage-card h4{font-family:var(--font-display);font-size:22px;font-weight:500;letter-spacing:-.01em}
  .lage-card p.intro{color:var(--stone-600);font-size:15px;line-height:1.55}
  .lage-list{list-style:none;padding:0;margin:0}
  .lage-list li{
    display:flex;justify-content:space-between;align-items:baseline;gap:14px;
    padding:11px 0;border-top:1px solid var(--stone-100);
    font-size:14px;color:var(--stone-600);
  }
  .lage-list li:first-child{border-top:none;padding-top:4px}
  .lage-list .v{font-size:13px;color:var(--stone-400);font-variant-numeric:tabular-nums}
  .lage-list .v strong{color:var(--stone-700);font-weight:600}

  /* ----- Form ----- */
  .form-wrap{
    display:grid;grid-template-columns: 1fr 1.05fr;
    gap:var(--s-7);align-items:start;
  }
  @media (max-width:980px){.form-wrap{grid-template-columns:1fr}}
  .form-card{
    background:#fff;
    border:1px solid var(--stone-100);
    border-radius:var(--r-lg);
    padding:clamp(24px,3vw,40px);
    box-shadow:var(--shadow-3);
  }
  form.expose{
    display:grid;grid-template-columns:1fr 1fr;gap:14px;
  }
  form.expose .full{grid-column:1/-1}
  .field{display:flex;flex-direction:column;gap:6px}
  .field label{
    font-size:13px;font-weight:600;color:var(--stone-600);
  }
  .field input, .field select, .field textarea{
    font-family:var(--font-body);font-size:15px;color:var(--stone-700);
    background:var(--paper);
    border:1px solid var(--stone-200);
    border-radius:var(--r-sm);
    padding:11px 14px;height:44px;
    transition:border-color .15s, background .15s, box-shadow .15s;
  }
  .field input:focus, .field select:focus, .field textarea:focus{
    outline:none;border-color:var(--brand-olive);
    box-shadow:0 0 0 3px rgba(138,138,74,.18);
  }
  .field textarea{height:auto;min-height:110px;resize:vertical;line-height:1.5}
  .check{
    grid-column:1/-1;display:flex;gap:12px;align-items:flex-start;
    font-size:13px;color:var(--stone-500);line-height:1.55;
  }
  .check input{flex:0 0 auto;margin-top:3px;accent-color:var(--brand-olive);width:16px;height:16px}
  .check a{color:var(--brand-olive-deep);text-decoration:underline}
  .form-actions{
    grid-column:1/-1;display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;margin-top:6px;
  }
  .form-hint{font-size:12px;color:var(--stone-400)}
  .form-success{
    grid-column:1/-1;display:none;
    padding:24px;border-radius:var(--r-md);
    background:rgba(168,194,88,.18);border:1px solid rgba(168,194,88,.45);
    color:#3D5018;
    font-size:15px;line-height:1.55;
  }
  .form-success.show{display:block}
  .form-success b{font-family:var(--font-display);font-weight:500;font-size:19px;display:block;margin-bottom:4px;color:var(--brand-forest)}

  .expose-side .quote{
    font-family:var(--font-display);font-weight:400;
    font-size:clamp(24px,2vw,30px);
    line-height:1.3;letter-spacing:-.01em;color:var(--stone-700);
  }
  .expose-incl{
    margin-top:28px;border-top:1px solid var(--stone-100);padding-top:20px;
    list-style:none;padding-left:0;display:flex;flex-direction:column;gap:14px;
  }
  .expose-incl li{
    display:flex;gap:14px;align-items:center;
    font-size:15px;color:var(--stone-600);
  }
  .expose-incl li .ic{
    width:22px;height:22px;color:var(--brand-olive);flex:0 0 auto;stroke-width:1.5;
  }

  /* ----- Vertrauen ----- */
  .trust{
    display:grid;grid-template-columns:1fr 1fr;gap:1px;
    border:1px solid var(--stone-100);border-radius:var(--r-lg);overflow:hidden;
    background:var(--stone-100);
    box-shadow:var(--shadow-1);
  }
  @media (max-width:880px){.trust{grid-template-columns:1fr}}
  .trust > div{
    background:#fff;padding:36px 32px;display:flex;flex-direction:column;gap:14px;min-height:240px;
  }
  .trust .role{font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--stone-400)}
  .trust .name{font-family:var(--font-display);font-size:32px;font-weight:500;letter-spacing:-.015em;color:var(--stone-700);line-height:1.1}
  .trust p{color:var(--stone-500);font-size:15px;line-height:1.6}
  .trust .placeholder{margin-top:auto;display:flex;gap:14px;font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--stone-400)}

  /* ----- FAQ ----- */
  .faq-list{display:flex;flex-direction:column}
  .faq-item{border-top:1px solid var(--stone-100)}
  .faq-item:last-child{border-bottom:1px solid var(--stone-100)}
  .faq-item details{padding:22px 4px}
  .faq-item summary{
    list-style:none;cursor:pointer;
    display:flex;justify-content:space-between;align-items:center;gap:24px;
    font-family:var(--font-display);font-size:clamp(19px,1.6vw,24px);font-weight:500;letter-spacing:-.01em;color:var(--stone-700);
  }
  .faq-item summary::-webkit-details-marker{display:none}
  .faq-item .plus{
    width:28px;height:28px;border-radius:50%;border:1px solid var(--stone-200);
    display:grid;place-items:center;flex:0 0 auto;
    transition:transform .25s, background .2s, color .2s, border-color .2s;
    color:var(--stone-500);font-size:18px;line-height:1;
  }
  .faq-item details[open] .plus{
    background:var(--brand-olive);color:#fff;border-color:var(--brand-olive);transform:rotate(45deg);
  }
  .faq-item details[open] summary{color:var(--brand-olive-deep)}
  .faq-item .answer{
    margin-top:14px;font-size:16px;color:var(--stone-500);max-width:78ch;line-height:1.65;
  }

  /* ----- Final CTA ----- */
  .final-cta{
    background:var(--paper-dim);border:1px solid var(--stone-100);border-radius:var(--r-xl);
    padding:clamp(32px,5vw,64px);
    display:grid;grid-template-columns:1.2fr 1fr;gap:32px;align-items:center;
    position:relative;overflow:hidden;
  }
  @media (max-width:880px){.final-cta{grid-template-columns:1fr}}
  .final-cta h2{font-size:clamp(28px,3vw,40px);line-height:1.1;color:var(--stone-700)}
  .final-cta .acts{display:flex;gap:12px;flex-wrap:wrap;justify-content:flex-end}
  @media (max-width:880px){.final-cta .acts{justify-content:flex-start}}

  /* ----- Footer ----- */
  footer.site{
    border-top:1px solid var(--stone-100);
    padding:48px 0 32px;
    background:var(--paper-dim);
  }
  .foot-row{
    display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:32px;
    margin-bottom:36px;
  }
  @media (max-width:880px){.foot-row{grid-template-columns:1fr 1fr}}
  .foot-col h5{
    font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--stone-400);
    margin:0 0 14px;
  }
  .foot-col ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:9px;font-size:14px}
  .foot-col ul a{color:var(--stone-600)}
  .foot-col ul a:hover{color:var(--brand-olive-deep)}
  .foot-bottom{
    display:flex;justify-content:space-between;flex-wrap:wrap;gap:16px;
    padding-top:24px;border-top:1px solid var(--stone-100);
    font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--stone-400);
  }
  .legal-note{
    font-size:13px;line-height:1.6;color:var(--stone-400);max-width:90ch;margin-top:24px;
  }
  .footer-brand img{height:42px}

  .hide{display:none !important}

  /* ============================================================
     Bild-Platzhalter — bis echte Visualisierungen / Fotos vorliegen
     ============================================================ */
  .ph{
    position:relative;display:block;overflow:hidden;
    border-radius:var(--r-lg);
    background:var(--paper-dim);
    color:var(--stone-500);
    isolation:isolate;
  }
  .ph::before{
    content:"";position:absolute;inset:0;z-index:0;
    background-image:
      repeating-linear-gradient(135deg,
        rgba(0,0,0,0.025) 0 1px, transparent 1px 18px);
  }
  .ph .ph-inner{
    position:relative;z-index:1;width:100%;height:100%;
    display:flex;flex-direction:column;justify-content:space-between;
    padding:18px 20px;
  }
  .ph .ph-tag{
    align-self:flex-start;
    font-size:10px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
    background:rgba(246,243,236,.92);
    color:var(--stone-500);
    padding:6px 10px;border-radius:var(--r-pill);
    backdrop-filter:blur(6px);
  }
  .ph .ph-meta{
    display:flex;justify-content:space-between;align-items:flex-end;gap:14px;
  }
  .ph .ph-title{
    font-family:var(--font-display);font-weight:500;
    font-size:clamp(18px,1.6vw,22px);letter-spacing:-.01em;
    color:var(--stone-700);
    text-wrap:balance;line-height:1.2;
    max-width:24ch;
  }
  .ph .ph-kind{
    font-size:10px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
    color:var(--stone-400);white-space:nowrap;
  }
  .ph .ph-glyph{
    position:absolute;right:-20px;bottom:-30px;width:60%;height:auto;
    opacity:.18;pointer-events:none;color:currentColor;
  }
  .ph.ph-square{aspect-ratio:1/1}
  .ph.ph-4x3{aspect-ratio:4/3}
  .ph.ph-16x9{aspect-ratio:16/9}
  .ph.ph-21x9{aspect-ratio:21/9}
  .ph.ph-3x4{aspect-ratio:3/4}
  .ph.ph-2x3{aspect-ratio:2/3}

  /* Kategorie-Töne */
  .ph-archi{background:linear-gradient(135deg,#E8E4D5 0%,#D5D0BD 100%);color:#5A5648}
  .ph-interior{background:linear-gradient(135deg,#EFE6D4 0%,#D8C9A8 100%);color:#6B5A3F}
  .ph-people{background:linear-gradient(135deg,#E6D5C2 0%,#C99B7A 100%);color:#5C3F2A}
  .ph-people-warm{background:linear-gradient(135deg,#F0DCC2 0%,#D8A56F 100%);color:#5C3F2A}
  .ph-nature{background:linear-gradient(135deg,#C9D4A8 0%,#7A8E58 100%);color:#3D4520}
  .ph-village{background:linear-gradient(135deg,#D8D4C2 0%,#9AA08A 100%);color:#3D4520}
  .ph-detail{background:linear-gradient(135deg,#E0D5C0 0%,#B59A78 100%);color:#4A3520}
  .ph-forest{background:linear-gradient(135deg,#5A6F4A 0%,#2F4030 100%);color:rgba(255,255,255,.85)}
  .ph-forest .ph-tag{background:rgba(255,255,255,.14);color:#F0EDDF}
  .ph-forest .ph-title{color:#F6F3EC}
  .ph-forest .ph-kind{color:rgba(255,255,255,.6)}

  /* Bilder im .ph-Container (echte Bilder statt Platzhalter) */
  .ph.has-img{background:var(--paper-dim)}
  .ph.has-img::before{display:none}
  .ph.has-img > img{
    position:absolute;inset:0;z-index:1;
    width:100%;height:100%;object-fit:cover;
    display:block;
  }

  /* Volle Sektions-Bildbänder */
  .img-band{
    width:100%;
    border-radius:0;
  }
  .img-band.contained{
    border-radius:var(--r-lg);
  }
  .band-section{
    padding:0;background:var(--paper);
  }
  .band-section .img-band{aspect-ratio:21/6;min-height:280px}
  @media (max-width:880px){.band-section .img-band{aspect-ratio:16/9;min-height:220px}}

  /* Galerie für Innenraum-Bilder */
  .interior-gallery{
    display:grid;grid-template-columns:repeat(6,1fr);gap:var(--s-4);
  }
  .interior-gallery .ph{min-height:180px}
  .interior-gallery .g-1{grid-column:span 3;aspect-ratio:4/3}
  .interior-gallery .g-2{grid-column:span 3;aspect-ratio:4/3}
  .interior-gallery .g-3{grid-column:span 2;aspect-ratio:1/1}
  .interior-gallery .g-4{grid-column:span 2;aspect-ratio:1/1}
  .interior-gallery .g-5{grid-column:span 2;aspect-ratio:1/1}
  @media (max-width:880px){
    .interior-gallery{grid-template-columns:repeat(2,1fr)}
    .interior-gallery .g-1,.interior-gallery .g-2,
    .interior-gallery .g-3,.interior-gallery .g-4,.interior-gallery .g-5{grid-column:span 1;aspect-ratio:4/3}
  }

  /* Aktiver Nav-Zustand für Unterseiten */
  .site-nav a.is-active{color:var(--brand-olive-deep);font-weight:600}
  .site-nav a.is-active::after{
    content:"";display:block;height:1px;background:var(--brand-olive);
    margin-top:4px;
  }

  /* Subpage-Hero */
  .sub-hero{
    background:var(--paper-dim);
    padding:120px 0 144px;
    border-bottom:1px solid var(--stone-100);
  }
  .sub-hero .crumbs{
    font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
    color:var(--stone-400);margin-bottom:32px;
  }
  .sub-hero .crumbs a{color:var(--stone-500);text-decoration:none}
  .sub-hero .crumbs a:hover{color:var(--brand-olive-deep)}
  .sub-hero .crumbs span{margin:0 8px;color:var(--stone-300)}
  .sub-hero h1{
    font-family:var(--font-display);font-weight:400;
    font-size:clamp(40px,5vw,68px);line-height:1.04;letter-spacing:-.02em;
    text-wrap:balance;max-width:22ch;
  }
  .sub-hero .sub-lead{
    font-size:clamp(17px,1.4vw,20px);line-height:1.55;color:var(--stone-500);
    max-width:60ch;margin-top:28px;
  }
  .sub-hero-grid{
    display:grid;grid-template-columns:1.1fr .9fr;gap:80px;align-items:end;
  }
  @media (max-width:980px){.sub-hero-grid{grid-template-columns:1fr}}

  /* Nutzer-Argumente: zwei-Spalten Stat/Argument */
  .args-grid{
    display:grid;grid-template-columns:repeat(3,1fr);gap:28px;
  }
  @media (max-width:880px){.args-grid{grid-template-columns:1fr}}
  .arg-card{
    background:#fff;border:1px solid var(--stone-100);
    border-radius:var(--r-lg);padding:28px;
    display:flex;flex-direction:column;gap:14px;
  }
  .arg-card .arg-num{
    font-family:var(--font-display);font-weight:400;
    font-size:38px;color:var(--brand-olive-deep);letter-spacing:-.02em;
    line-height:1;
  }
  .arg-card h4{font-family:var(--font-display);font-size:22px;font-weight:500;letter-spacing:-.01em}
  .arg-card p{color:var(--stone-600);font-size:15px;line-height:1.55}

  /* Kontaktblock auf Unterseite */
  .sub-cta{
    background:var(--brand-forest);color:#fff;
    border-radius:var(--r-xl);
    padding:var(--s-8) var(--s-7);
    display:grid;grid-template-columns:1.4fr 1fr;gap:var(--s-7);align-items:center;
    position:relative;overflow:hidden;
  }
  @media (max-width:880px){.sub-cta{grid-template-columns:1fr}}
  .sub-cta h2{color:#fff;font-family:var(--font-display);font-size:clamp(28px,2.6vw,38px);font-weight:400;letter-spacing:-.01em}
  .sub-cta p{color:rgba(255,255,255,.78);font-size:17px;line-height:1.55;margin-top:12px;max-width:50ch}
  .sub-cta .btn-primary{background:var(--brand-leaf);color:#1F1D18}
  .sub-cta .btn-secondary{background:transparent;color:#fff;border-color:rgba(255,255,255,.3)}

  /* ============================================================
     Animations · Initial-States für GSAP
     Verhindern Flash, bevor JS lädt. Werden beim Scrollen oder
     Page-Load von gsap.from() überschrieben.
     ============================================================ */
  html.js-anim .hero .eyebrow,
  html.js-anim .hero h1,
  html.js-anim .hero .hero-lead,
  html.js-anim .hero-actions .btn,
  html.js-anim .sub-hero .crumbs,
  html.js-anim .sub-hero h1,
  html.js-anim .sub-hero .sub-lead,
  html.js-anim .sub-hero figure,
  html.js-anim .sub-hero .btn{
    opacity:0;
  }

  /* Bei Reduced-Motion-Präferenz alles sofort sichtbar machen */
  @media (prefers-reduced-motion: reduce){
    html.js-anim .hero .eyebrow,
    html.js-anim .hero h1,
    html.js-anim .hero .hero-lead,
    html.js-anim .hero-actions .btn,
    html.js-anim .sub-hero .crumbs,
    html.js-anim .sub-hero h1,
    html.js-anim .sub-hero .sub-lead,
    html.js-anim .sub-hero figure,
    html.js-anim .sub-hero .btn{
      opacity:1 !important;
    }
    /* Sicherheitsnetz: keine GSAP-Übergänge */
    *,*::before,*::after{
      animation-duration:0.01ms !important;
      animation-iteration-count:1 !important;
      transition-duration:0.01ms !important;
      scroll-behavior:auto !important;
    }
  }

  /* ============================================================
     Micro-Interactions · zusätzliche subtile Hover-Effekte
     ============================================================ */
  /* Buttons: Schatten beim Hover (nur Primary/Leaf, nicht Ghost/Secondary) */
  .btn-primary,.btn-leaf{
    box-shadow:0 1px 2px rgba(60,55,35,.08);
    transition:background .2s ease, box-shadow .25s ease, transform .2s ease;
  }
  .btn-primary:hover,.btn-leaf:hover{
    box-shadow:0 6px 18px rgba(60,55,35,.18);
    transform:translateY(-1px);
  }
  .btn-primary:active,.btn-leaf:active{
    transform:translateY(0);
    box-shadow:0 1px 2px rgba(60,55,35,.10);
  }

  /* Image-Placeholder: subtiler Lift bei Hover (nur in Galerie/Cards, nicht in Bildbändern) */
  .audience-detail .ph,
  .interior-gallery .ph{
    transition:transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .3s ease;
  }
  .audience-detail .ph:hover,
  .interior-gallery .ph:hover{
    transform:translateY(-3px);
    box-shadow:var(--shadow-2);
  }

  /* Lage-Cards: weicher Hover (analog Audience-Cards, aber dezenter) */
  .lage-card{
    transition:border-color .2s ease, transform .25s cubic-bezier(.2,.7,.2,1), box-shadow .25s ease;
  }
  .lage-card:hover{
    border-color:var(--stone-200);
    transform:translateY(-2px);
    box-shadow:var(--shadow-2);
  }

  /* Argumente-Karten Subpages */
  .arg-card{
    transition:border-color .2s ease, transform .25s cubic-bezier(.2,.7,.2,1), box-shadow .25s ease;
  }
  .arg-card:hover{
    border-color:var(--stone-200);
    transform:translateY(-2px);
    box-shadow:var(--shadow-2);
  }

  /* FAQ: weicheres Plus-Icon Easing */
  .faq-item .plus{
    transition:transform .35s cubic-bezier(.2,.7,.2,1), background .25s ease, color .25s ease, border-color .25s ease;
  }

  /* Form: Label-Animation bei Focus (subtil hochrutschen, Brand-Olive) */
  .field{position:relative}
  .field label{transition:color .2s ease}
  .field:focus-within label{color:var(--brand-olive-deep)}

  /* Eyebrow-Linie: dezent verbreitern beim Section-Hover (NICHT auf Body Eyebrows) */
  .section-head .eyebrow::before{
    transition:width .35s cubic-bezier(.2,.7,.2,1);
  }
  .section-head:hover .eyebrow::before{
    width:36px;
  }