:root{
    --cream:#F1E3D3;      /* Almond – Hintergrund */
    --cream-2:#E9D6C3;    /* Almond dunkler – alternierende Abschnitte */
    --paper:#FAF1E6;      /* Almond hell – Karten */
    --green-900:#3A3D31;  /* Reseda tief – Footer / dunkelste Fläche */
    --green-800:#4C5142;  /* Reseda dunkel – Überschriften */
    --green:#6B705C;      /* Reseda – Hauptfarbe */
    --green-600:#7E8370;  /* Reseda heller */
    --sage:#6B6F5D;       /* gedämpftes Oliv – Labels (lesbar) */
    --sage-2:#B7B7A4;     /* Ash Gray – dekorativ / Linien */
    --brown:#925637;      /* Terrakotta dunkel – Text/Akzent (lesbar) */
    --brown-2:#C58C6D;    /* Persan Orange – Akzent */
    --camel:#BE9A6E;      /* Desert Sand dunkler – Akzent Darm */
    --beige:#DDBEA9;      /* Desert Sand */
    --beige-2:#E9D3BE;    /* Desert Sand heller */
    --ink:#3D3F34;        /* Fließtext */
    --ink-soft:#5E5F50;   /* Fließtext gedämpft */
    --line:#E2D5C2;       /* feine Linien (sandgetönt) */
    --maxw:1180px;
    --shadow:0 18px 50px -28px rgba(58,61,49,.42);
  }
  *{box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{
    margin:0;background:var(--cream);color:var(--ink);
    font-family:"Mulish",system-ui,sans-serif;font-weight:400;
    font-size:clamp(16px,1.05vw,17.5px);line-height:1.72;
    -webkit-font-smoothing:antialiased;overflow-x:hidden;
  }
  h1,h2,h3,h4{
    font-family:"Fraunces",Georgia,serif;
    font-variation-settings:"SOFT" 40,"WONK" 1;
    font-weight:420;color:var(--green-800);line-height:1.08;
    letter-spacing:-.01em;margin:0;
  }
  a{color:inherit;text-decoration:none}
  img{max-width:100%;display:block}
  .wrap{max-width:var(--maxw);margin:0 auto;padding:0 clamp(20px,5vw,44px)}
  .eyebrow{
    font-family:"Mulish",sans-serif;font-weight:700;font-size:.72rem;
    letter-spacing:.28em;text-transform:uppercase;color:var(--sage);
    display:flex;align-items:center;gap:.7em;margin:0 0 1.1rem;
  }
  .eyebrow::before{content:"";width:26px;height:1px;background:var(--sage);display:inline-block}
  .eyebrow.center{justify-content:center}
  .eyebrow.center::after{content:"";width:26px;height:1px;background:var(--sage);display:inline-block}

  /* ---------- buttons ---------- */
  .btn{
    display:inline-flex;align-items:center;gap:.6em;cursor:pointer;
    font-family:"Mulish",sans-serif;font-weight:700;font-size:.92rem;
    letter-spacing:.02em;padding:.92em 1.7em;border-radius:999px;border:1.5px solid transparent;
    transition:transform .35s cubic-bezier(.2,.7,.3,1),background .3s,color .3s,box-shadow .35s;
  }
  .btn .arw{transition:transform .35s cubic-bezier(.2,.7,.3,1)}
  .btn:hover .arw{transform:translateX(4px)}
  .btn-solid{background:var(--green);color:#F7F6EE;box-shadow:0 12px 26px -14px rgba(58,61,49,.45)}
  .btn-solid:hover{background:var(--green-800);transform:translateY(-2px)}
  .btn-ghost{border-color:var(--green);color:var(--green-800)}
  .btn-ghost:hover{background:rgba(107,112,92,.10);transform:translateY(-2px)}

  /* ---------- nav ---------- */
  header.nav{
    position:fixed;inset:0 0 auto 0;z-index:60;
    transition:background .4s,box-shadow .4s,padding .4s;padding:18px 0;
  }
  header.nav.scrolled{background:rgba(241,227,211,.9);backdrop-filter:blur(10px);box-shadow:0 1px 0 var(--line);padding:10px 0}
  .nav-in{display:flex;align-items:center;justify-content:space-between;gap:24px}
  .nav-logo img{height:44px;width:auto;transition:height .4s}
  header.nav.scrolled .nav-logo img{height:38px}
  .nav-links{display:flex;align-items:center;gap:30px}
  .nav-links a{
    font-weight:600;font-size:.9rem;color:var(--ink-soft);position:relative;padding:4px 0;
  }
  .nav-links a::after{content:"";position:absolute;left:0;bottom:-2px;width:0;height:1.5px;background:var(--green);transition:width .3s}
  .nav-links a:hover{color:var(--green-800)}
  .nav-links a:hover::after{width:100%}
  .nav-links .btn{padding:.7em 1.35em}
  .nav-links .btn:hover{color:#F7F6EE}
  .burger{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:8px}
  .burger span{width:26px;height:2px;background:var(--green-800);border-radius:2px;transition:.3s}
  .burger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .burger.open span:nth-child(2){opacity:0}
  .burger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

  /* ---------- hero ---------- */
  .hero{position:relative;padding:150px 0 90px;text-align:center;overflow:hidden}
  .hero-bg{position:absolute;inset:0;z-index:0;pointer-events:none}
  .hero-bg .roots{position:absolute;left:50%;bottom:-2px;transform:translateX(-50%);width:min(1300px,120vw);opacity:.5}
  .hero-bg .blob{position:absolute;border-radius:50%;filter:blur(60px);opacity:.5}
  .hero-bg .b1{width:520px;height:520px;background:rgba(107,112,92,.16);top:-120px;left:-140px}
  .hero-bg .b2{width:460px;height:460px;background:rgba(197,140,109,.20);top:40px;right:-160px}
  .hero-inner{position:relative;z-index:2;max-width:940px;margin:0 auto}
  .hero-logo{width:min(620px,86%);margin:0 auto 30px}
  .hero-tag{
    font-family:"Fraunces",serif;font-variation-settings:"SOFT" 60,"WONK" 0;
    font-weight:340;font-size:clamp(1.5rem,3.4vw,2.55rem);color:var(--green-800);
    line-height:1.14;max-width:16ch;margin:0 auto 1.1rem;
  }
  .hero-tag em{font-style:italic;color:var(--brown)}
  .hero-lead{max-width:52ch;margin:0 auto 2rem;color:var(--ink-soft);font-size:1.05rem}
  .hero-cta{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
  .pillbar{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:34px}
  .pill{
    font-size:.78rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
    padding:.5em 1.05em;border-radius:999px;border:1px solid var(--line);color:var(--ink-soft);
    background:rgba(250,241,230,.6);display:inline-flex;align-items:center;gap:.5em;
  }
  .pill .dot{width:7px;height:7px;border-radius:50%}

  /* ---------- generic section ---------- */
  section{position:relative}
  .band{padding:clamp(74px,9vw,120px) 0}
  .band.alt{background:var(--cream-2)}
  .lede-grid{display:grid;grid-template-columns:0.95fr 1.05fr;gap:clamp(34px,6vw,80px);align-items:center}
  h2.section-title{font-size:clamp(2rem,4.4vw,3.15rem);margin-bottom:1.2rem}
  .prose p{margin:0 0 1.1rem;color:var(--ink-soft)}
  .prose p:last-child{margin-bottom:0}
  .quote{
    margin:34px 0 0;padding:22px 26px;border-left:3px solid var(--sage);
    background:rgba(107,112,92,.10);border-radius:0 14px 14px 0;
  }
  .quote p{font-family:"Fraunces",serif;font-style:italic;font-variation-settings:"SOFT" 60;
    font-size:1.22rem;color:var(--green-800);margin:0 0 .4rem;line-height:1.4}
  .quote cite{font-style:normal;font-weight:700;font-size:.82rem;letter-spacing:.06em;color:var(--brown);text-transform:uppercase}

  .portrait{
    position:relative;border-radius:20px;overflow:hidden;aspect-ratio:4/5;
    background:linear-gradient(160deg,#E6D8C6,#CFC7B4 40%,#DDBEA9);box-shadow:var(--shadow);
  }
  .portrait .ph{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;color:var(--green-800);text-align:center;padding:24px}
  .portrait .ph svg{width:70px;height:70px;opacity:.55}
  .portrait .ph span{font-family:"Mulish";font-weight:600;font-size:.8rem;letter-spacing:.16em;text-transform:uppercase;opacity:.7}
  .portrait::after{content:"";position:absolute;inset:0;border:1px solid rgba(255,255,255,.35);border-radius:20px;pointer-events:none}

  /* ---------- pillars / services ---------- */
  .pillars-head{text-align:center;max-width:640px;margin:0 auto clamp(48px,6vw,72px)}
  .pillars-head p{color:var(--ink-soft);margin:.6rem auto 0;max-width:52ch}
  .pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
  .card{
    background:var(--paper);border:1px solid var(--line);border-radius:22px;
    padding:38px 32px 34px;position:relative;overflow:hidden;
    transition:transform .4s cubic-bezier(.2,.7,.3,1),box-shadow .4s,border-color .4s;
  }
  .card::before{content:"";position:absolute;left:0;top:0;height:4px;width:100%;background:var(--accent,var(--green));transform:scaleX(0);transform-origin:left;transition:transform .5s}
  .card:hover{transform:translateY(-8px);box-shadow:var(--shadow);border-color:transparent}
  .card:hover::before{transform:scaleX(1)}
  .card .ico{width:70px;height:84px;margin-bottom:22px}
  .card .ico svg{width:100%;height:100%;overflow:visible}
  .card h3{font-size:1.5rem;margin-bottom:.5rem}
  .card .sub{font-size:.74rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--green);margin-bottom:1rem;display:block}
  .card p{color:var(--ink-soft);font-size:.97rem;margin:0 0 1.1rem}
  .card ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.55rem}
  .card li{position:relative;padding-left:1.4em;font-size:.92rem;color:var(--ink-soft)}
  .card li::before{content:"";position:absolute;left:0;top:.62em;width:7px;height:7px;border-radius:50%;background:var(--accent,var(--sage))}

  /* ---------- process ---------- */
  .steps{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-top:14px;counter-reset:s}
  .step{position:relative;padding-top:30px}
  .step::before{
    counter-increment:s;content:"0" counter(s);font-family:"Fraunces",serif;
    font-variation-settings:"WONK" 1;font-weight:400;font-size:2.2rem;color:var(--beige);
    position:absolute;top:-14px;left:0;line-height:1;
  }
  .step h4{font-size:1.12rem;margin:0 0 .4rem}
  .step p{margin:0;font-size:.92rem;color:var(--ink-soft)}
  .step-line{height:1px;background:var(--line);margin:34px 0 0}

  .price-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(30px,5vw,60px);align-items:start;margin-top:12px}
  .price-list{background:var(--paper);border:1px solid var(--line);border-radius:20px;padding:12px 30px}
  .price-row{display:flex;align-items:baseline;justify-content:space-between;gap:16px;padding:20px 0;border-bottom:1px dashed var(--line)}
  .price-row:last-child{border-bottom:0}
  .price-row .l h4{font-size:1.1rem;margin-bottom:.15rem}
  .price-row .l span{font-size:.85rem;color:var(--ink-soft)}
  .price-row .p{font-family:"Fraunces",serif;font-size:1.3rem;color:var(--green-800);white-space:nowrap;font-variation-settings:"WONK" 1}
  .note{font-size:.86rem;color:var(--ink-soft);margin-top:16px}
  .info-card{background:var(--green);color:#EFEFE2;border-radius:20px;padding:34px 32px}
  .info-card h3{color:#FBFAF4;font-size:1.5rem;margin-bottom:1rem}
  .info-card ul{list-style:none;margin:0 0 22px;padding:0;display:flex;flex-direction:column;gap:.7rem}
  .info-card li{display:flex;gap:.7em;font-size:.95rem;color:#E7E7D6}
  .info-card li b{color:#fff;font-weight:700}
  .info-card .btn-solid{background:var(--beige);color:var(--green-900)}
  .info-card .btn-solid:hover{background:#fff}

  /* ---------- contact ---------- */
  .contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,56px)}
  .contact-lines{display:flex;flex-direction:column;gap:26px;margin-top:8px}
  .cline{display:flex;gap:16px;align-items:flex-start}
  .cline .ci{flex:none;width:46px;height:46px;border-radius:12px;background:rgba(107,112,92,.14);display:flex;align-items:center;justify-content:center;color:var(--green)}
  .cline .ci svg{width:22px;height:22px}
  .cline h4{font-size:1rem;margin:0 0 .2rem}
  .cline p,.cline a{margin:0;color:var(--ink-soft);font-size:.98rem}
  .cline a:hover{color:var(--green-800)}
  form{background:var(--paper);border:1px solid var(--line);border-radius:20px;padding:30px;display:flex;flex-direction:column;gap:16px}
  .field label{display:block;font-size:.78rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:.4rem}
  .field input,.field textarea{
    width:100%;font-family:inherit;font-size:.98rem;color:var(--ink);
    background:var(--cream);border:1px solid var(--line);border-radius:12px;padding:.8em .9em;transition:border .25s,box-shadow .25s;
  }
  .field input:focus,.field textarea:focus{outline:none;border-color:var(--sage);box-shadow:0 0 0 3px rgba(107,112,92,.16)}
  .field textarea{resize:vertical;min-height:110px}
  .form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
  form .btn-solid{justify-content:center;margin-top:4px}
  .form-hint{font-size:.8rem;color:var(--ink-soft)}

  /* ---------- footer ---------- */
  footer{background:var(--green-900);color:#D6D8C6;padding:64px 0 28px}
  .foot-top{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px;align-items:start}
  .foot-logo img{height:70px;width:auto;filter:brightness(0) invert(1);opacity:.92}
  .foot-note{margin-top:16px;font-size:.9rem;color:#A9AE93;max-width:34ch}
  footer h5{font-family:"Mulish";font-weight:700;letter-spacing:.14em;text-transform:uppercase;font-size:.75rem;color:#B6BB9C;margin:0 0 16px}
  .foot-col a,.foot-col p{display:block;color:#CDD0BC;font-size:.94rem;margin:0 0 10px}
  .foot-col a:hover{color:#fff}
  .foot-bar{margin-top:48px;padding-top:22px;border-top:1px solid rgba(255,255,255,.12);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:.82rem;color:#9CA187}
  .foot-bar a{color:#9CA187}.foot-bar a:hover{color:#fff}

  /* ---------- reveal ---------- */
  .reveal{opacity:0;transform:translateY(26px);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.7,.3,1)}
  .reveal.in{opacity:1;transform:none}
  .reveal.d1{transition-delay:.08s}.reveal.d2{transition-delay:.16s}.reveal.d3{transition-delay:.24s}

  /* draw-in for hero roots */
  .draw path,.draw line{stroke-dasharray:1;stroke-dashoffset:1;pathLength:1;animation:draw 2.6s ease forwards}
  @keyframes draw{to{stroke-dashoffset:0}}

  /* ---------- responsive ---------- */
  @media(max-width:920px){
    .lede-grid,.price-grid,.contact-grid{grid-template-columns:1fr}
    .pillars{grid-template-columns:1fr;gap:20px}
    .steps{grid-template-columns:1fr 1fr;gap:30px 22px}
    .foot-top{grid-template-columns:1fr 1fr}
    .portrait{aspect-ratio:16/12;max-width:520px}
  }
  @media(max-width:680px){
    .nav-links{
      position:fixed;inset:0 0 0 auto;width:min(320px,84vw);background:var(--cream);
      flex-direction:column;align-items:flex-start;justify-content:center;gap:22px;padding:40px;
      transform:translateX(100%);transition:transform .4s cubic-bezier(.2,.7,.3,1);box-shadow:-20px 0 50px -30px rgba(0,0,0,.4);
    }
    .nav-links.open{transform:none}
    .nav-links a{font-size:1.05rem}
    .burger{display:flex;z-index:70}
    .form-row{grid-template-columns:1fr}
    .steps,.foot-top{grid-template-columns:1fr}
    .foot-bar{flex-direction:column}
  }
  @media (prefers-reduced-motion:reduce){
    *{scroll-behavior:auto!important}
    .reveal{opacity:1;transform:none;transition:none}
    .draw path,.draw line{animation:none;stroke-dashoffset:0}
    .btn,.card{transition:none}
  }